A-key function 大学生が始めるべきネットビジネス起業

大学生のうちに始めるべきネットビジネス・資格などを紹介してます。

facebookページのpage pluginのstinger5サイト設置方法!いいねのためのリンクです!2015年12月17日現在

      2016/01/16

費用:0円 時間:10分

facebookでページを作成した!なら次にやらなくてはいけないのは、サイトにそのfacebookページのリンク、プラグインを設置することです。

サイトなどで見かけるページ紹介と、いいねの複合ウィジェットはpage pluginといいます。

では、page pluginの設置方法を紹介したいと思います!

sponsored link

page pluginの設定

facebook for developers にて設定を行っていきましょう。

設定facebook page URL にはfacebookページのURLを記載しましょう。

tabs はページの紹介とともに表示されるfacebookページ上での情報を設定できます。既定だと、timelinesでタイムライン。消すと、ページの紹介だけになります。他にも、messegesやcomentsなどがあります。俺は空白でページ紹介のみにします。

widthはウィジェットの幅。180~500px以内の必要があります。まあstinger5のサイドバーならwidth300pxですね。

heightはウィジェットの高さです。70px以上の必要があるみたいですね。

use small header はサイズが小さいウィジェットやスマホでの表示に向いています。チェックすると、シェアボタンが消えるのが難点ですね。

hide cover photo カバー写真を表示するかどうかです。

adapt to conteiner width 親要素の幅に合わせて幅を設定するようにするかどうかです。基本はチェックマークを入れときましょう。

show friend’s faces いいねしてくれた人の顔を表示するかどうかです。

このサイトの場合は以下のようになります。

oreno

get codeをクリックして、コードを生成しましょう。

すると、コードが二つ生成されます。

ko-dojavascript SDK とプラグイン自体のコードですね。SDKはjavascriptを動かすうえで欠かせない存在なので準備しましょう。

bodyタグの直下にSDKのコードをコピペしましょう。

ちなみに、stinger5の場合、何もしなくても大丈夫です(変更していなければ)

そして、下のプラグイン自体のコードを設置したい部分にコピペすればおkです。

stinger5の場合、外観>>ウィジェットにて、テキストを選択し、コピペすればサイドバーに設置できますよ。

ウィジェット

しかし、もし以下のように表示されなかった場合、バージョンや設定などでSDKが作動していないことが考えられます。

hyoujisarenai

その場合は

その場合は、外観>>テーマの編集をクリックします。

編集

そして、header.phpを選択します。

そしてbodyタグを探します。以下のような部分です。その直後に、コード生成の時に表示された、最初のjavascriptSDKのコードを挿入しましょう。

body

すると、サイドバーにプラグインが表示されるはずです。

kekka

みなさんも設置してみてはいかがでしょうか!

 - サイト作成, SNS ,

adsen

adsen

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事