facebookページのpage pluginのstinger5サイト設置方法!いいねのためのリンクです!2015年12月17日現在
2016/01/16Author:
費用: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 いいねしてくれた人の顔を表示するかどうかです。
このサイトの場合は以下のようになります。
get codeをクリックして、コードを生成しましょう。
すると、コードが二つ生成されます。
javascript SDK とプラグイン自体のコードですね。SDKはjavascriptを動かすうえで欠かせない存在なので準備しましょう。
bodyタグの直下にSDKのコードをコピペしましょう。
ちなみに、stinger5の場合、何もしなくても大丈夫です(変更していなければ)
そして、下のプラグイン自体のコードを設置したい部分にコピペすればおkです。
stinger5の場合、外観>>ウィジェットにて、テキストを選択し、コピペすればサイドバーに設置できますよ。
しかし、もし以下のように表示されなかった場合、バージョンや設定などでSDKが作動していないことが考えられます。
その場合は
その場合は、外観>>テーマの編集をクリックします。
そして、header.phpを選択します。
そしてbodyタグを探します。以下のような部分です。その直後に、コード生成の時に表示された、最初のjavascriptSDKのコードを挿入しましょう。
すると、サイドバーにプラグインが表示されるはずです。
みなさんも設置してみてはいかがでしょうか!