Facebook「Like box」から「Page Plugin」へ ~作成のポイントとスマホやサイドバーで右端が切れてしまう場合の対処法~
公開日:
:
WordPressに挑戦!
新しくサイトを作っていて、いつものノリで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)やサイドバーで右端が切れてしまう場合の対処法でした。
最後までお付き合い頂きありがとうございます。

関連記事
-
-
WordPress ロリポップ/独自ドメインマルチサイト化 意外だったエラーの訳。。
1つのwordpressで、ブログを複数管理できるように変更する機能として【マルチサイト化】
-
-
当ブログで使用しているプラグインリスト
つい最近まで、wordpressの存在すら知りませんでしたから、当然どんなプラグインがあるの
-
-
WordPressインストール後 最初にやっておきたい事リスト
wordpressのインストールが成功したら、記事投稿の前にやっておきたい事。。 やっておいた方が
-
-
インターネットカフェから・・・
最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし
-
-
本当に簡単だった♪ロリポップのWordPress簡単インストール
wordpressでブログを作っていく際にまず最初にする作業は【wordpressのインスト
-
-
WordPress関連-LinkWithinマルチサイト表示方法とプラグインリスト追記
今日は久しぶりにWordPress関連の記事内容となります。 のんびりと(長々と?)書いて
-
-
WordPressへのGoogle Analytics導入についての特記事項
私はホームページ作成の際には、アクセス解析にGoogle Analytics(グーグルアナリ
-
-
プラグイン設置以外のカスタマイズ記録
こちらのページは、プラグイン設置以外のカスタマイズ記録になります。 これまでのプラグイ
-
-
文字がにじむ。ぼやける。。Twenty Twelveヘッダー画像の謎。。
当ブログで使用しているテーマ【Twenty Twelve】は、カスタムヘッダーと言って、自分
-
-
超簡単☆WordPressファビコン設置方法まとめ
当ページでは、wordpressにファビコンを設置する際の手順をまとめておきたいと思います。 ファ
