This post is also available in: 日本語 (Japanese)
facebookのLike Boxを設置しようとしたら、下記のような表示を見つけて慌てて対応しました。
2015年6月23日付けでLike Boxプラグインは廃止されてPage Pluginに代わるとのことです。
Graph API v2.3のリリースに伴い、Like Boxプラグインは廃止されてJune 23rd 2015(2015年6月23日)に停止します。代わりに新しいPage Pluginを使ってください。
Contents
facebookのページプラグインは横幅が最小280px、最大500px
Like Boxプラグイン:
https://developers.facebook.com/docs/plugins/like-box-for-pages
Page Plugin:
https://developers.facebook.com/docs/plugins/page-plugin
ページプラグインは横幅が最小180px、最高500pxから対応しています。
これまでサイドバーにいいねボタン(Like Box)プラグインを設置していたサイトでは、若干横幅がオーバーしてしまう場合もあるかもしれません。
Page Pluginはレスポンシブデザインに対応しているのか
Page Pluginのレスポンシブデザインの対応については、Page Pluginのページに説明があります。
要約すると、ページロード時に"width"が確定するから、リアルタイムでレスポンシブ対応したかったらその都度プラグインを再呼び出ししてね！ということのようです。
ダイナミック・リサイジングはしない：
Page pluginはレスポンシブ・fluid/staticレイアウトに対応している。メディアクエリ(Media Queries)やその他のメソッドを"width"をセットするために親要素で使用することができる。
・プラグインはページロードする時に"width"を決定する
・ページロードした後に、CSS Box Modelの変化には対応しない
もし、ウィンドウのリサイズに対応させたかったら、手動でプラグインを再レンダリングする必要があります。
wordpressへのページプラグインの設置方法
A.下記の画像の 1.Include the javascript SDK... の部分のコードをコピーする。
B.次にAにてコピーしたコードをなるべく＜body＞タグのすぐ後ろに貼り付ける。
C.次に 2.Place the code for your plugin...の部分をコピーする。
D.次にCにてコピーしたコードをページプラグインを設置したい部分に貼り付ける。
ちなみに、Twenty Fourteenテーマの場合は、＜body＞タグはヘッダー (header.php)にあります。
また、Twenty Fourteenテーマの場合で記事下に表示したい場合には、C にてコピーしたコードを下記のように単一記事の投稿 (single.php)の ＜／div＞＜!-- #content --＞ のすぐ上に貼り付けると上手いこと表示されるかと思います。
<!-- facebook --> <div style="text-align:center;"> <!-- ここの部分にコードを入れる --> </div> <!-- facebook -->
ウィジェットを使う場合には、「テキスト」というウィジェットにAとCにてコピーしたコードを連続して貼り付けてページプラグインを表示する事も可能です(javascriptがサイト内で喧嘩していなければ)。
javascriptコードを＜body＞タグのすぐ後ろに貼り付けるのが嫌だと思う方は、＜/body＞直前に貼り付けて動作するか実験したりしてみてください。