Facebook「Like box」から「Page Plugin」へ ～作成のポイントとスマホやサイドバーで右端が切れてしまう場合の対処法～

新しくサイトを作っていて、いつものノリでFacebookのLike box作成ページへ行ったところ。。

「な。何じゃこれ～？」

どうやらLike boxは、2015年6月15日で廃止されるそうで、それに伴って現在のLike boxをPage Pluginという新機能と置き換える必要があるようですね。
上記赤枠の「Page Plugin」のリンクをクリックすると作成画面へ移動します。

Facebook Page pluguin 作成ページ
https://developers.facebook.com/docs/plugins/page-plugin

当ブログにもPage Pluginを設置しています。
どんな感じ？と思われた方は大変お手数ですが、フッターをご覧ください。
※Twitterのウィジェットと高さを揃える為に、タイムライン表示有りの280px × 280pxで作成しています。

Page Pluginの設置はとても簡単ですが、パソコンのサイドバーの領域が狭い場合やiPhoneで表示した場合に右端が切れてしまう現象が起きてしまったので、その対処法を記録したいと思います。
この方法は、アドセンスのラージモバイルバナーやレクタングルのスマホ表示が同じ状態になった場合でも応用出来ます。

Facebook「Page Plugin」作成のポイント

作成の手順は、Like boxと同様、とてもシンプルで簡単。
FacebookページのURL、幅と高さの指定の他、「いいね！」を押してくれた方のプロフィール写真の表示、カバー画像の表示、タイムラインの表示の有無を選択してコードを取得するだけです。
WordPressのウィジェットを使う場合は、下記のように表示されたコードの両方をコピーペーストします。
幅や高さを微調整したい場合は、何度もコードを発行しなくても赤線部分の数値を手動で直接変更出来ます。

気を付けたいポイントはひとつだけ。
表示サイズです。
数値を指定しないデフォルトの状態は、幅340px、高さ500pxですが、タイムラインを表示させていない場合は短く表示されます。
高さを指定しても反映されません。
短いまま。(笑)
高さの指定は、タイムラインを表示させている場合だけで良さそうですね。

また、幅の最小値は280px、最大値は500px。
高さの最小値は130px、最大値は500pxになっています。
幅を微調整したくても、それ以下には指定出来ないんですねぇ。。

サイドバーやスマホ表示で右端が切れてしまう場合

使っているテーマによっては、サイドバーやスマホ（iPhone）表示で右端が切れてしまう場合があります。
切れてはないけど。。微妙～にずれてる。とか。
当ブログで使用している「stinger3」は大丈夫でしたが、他のテーマでは度々見られる現象です。

その場合、パソコンのサイドバーの場合はPC用のstyle.cssに、スマホ表示の場合はスマホ用のstyle.cssに下記コードを追加しています。

/*Facebook Page Plugin*/
.fb-page {
  position: relative;
  left: -10px;
}

「-10px」の数値は表示を確認しながら変更してみてください。

アドセンスで応用

アドセンスコードに好きなclass名をつけます。（この場合はad-sp）

<div class="ad-sp">
アドセンスコード
</div>

「アドセンスコード」の部分は差し替えてください。
次にスマホ用のstyle.cssにコードを追加します。

/*スマホアドセンス*/
.ad-sp {
  position: relative;
  left: -10px;
}

「-10px」の数値は表示を確認しながら変更してみてください。

※表示確認 Windows7/Google Chrome/Internet Explorer/iPhone5c/
他のスマホ端末では少し左よりに表示されるかもしれません。

以上、FacebookのPage Plugin作成のポイントとスマホ（iPhone）やサイドバーで右端が切れてしまう場合の対処法でした。
最後までお付き合い頂きありがとうございます。