スポンサーリンク

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

公開日: : WordPressに挑戦!

6ec5cef1e162724c9a4cedc3767e4230_s-2

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

「な。何じゃこれ~?」

SnapCrab_No-0000

どうやら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のウィジェットを使う場合は、下記のように表示されたコードの両方をコピーペーストします。
幅や高さを微調整したい場合は、何度もコードを発行しなくても赤線部分の数値を手動で直接変更出来ます。

SnapCrab_No-0003

気を付けたいポイントはひとつだけ。
表示サイズです。
数値を指定しないデフォルトの状態は、幅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関連-LinkWithinマルチサイト表示方法とプラグインリスト追記

今日は久しぶりにWordPress関連の記事内容となります。 のんびりと(長々と?)書いて

記事を読む

WordPress【Twenty Twelve】カスタマイズ追記いろいろ。。

wordpressのマルチサイト化で作成した新サイトをオープンして、コンテンツ作りを少しずつ

記事を読む

インターネットカフェから・・・

最近、パソコンの調子が悪くてですね・・ 1月に修理に出したばかりなのにまた故障しちゃいまし

記事を読む

WordPressへのGoogle Analytics導入についての特記事項

私はホームページ作成の際には、アクセス解析にGoogle Analytics(グーグルアナリ

記事を読む

WordPressインストール後 最初にやっておきたい事リスト

wordpressのインストールが成功したら、記事投稿の前にやっておきたい事。。 やっておいた方が

記事を読む

トップページ・カテゴリーページ・アーカイブページなどのサムネイル画像付き抜粋表示方法まとめ

デフォルトの設定では、トップページ・カテゴリーページ・アーカイブページなどを表示すると、【全

記事を読む

WordPress【Twenty Twelve】 リンク色の変更方法まとめ

ふと。。「ブログ内のリンク色」を変えてみようかな?と思い立ちました。 カスタマイズの大半は

記事を読む

文字がにじむ。ぼやける。。Twenty Twelveヘッダー画像の謎。。

当ブログで使用しているテーマ【Twenty Twelve】は、カスタムヘッダーと言って、自分

記事を読む

本当に簡単だった♪ロリポップのWordPress簡単インストール

wordpressでブログを作っていく際にまず最初にする作業は【wordpressのインスト

記事を読む

ブログリニューアルと新サイトのご紹介です♪

こんにちは♪ ご訪問ありがとうございます。(*^_^*) ブログをリニューアルしました♪ この

記事を読む

Message

メールアドレスが公開されることはありません。


follow us in feedly  

  •   HN:ai
    北海道在住
    ▶プロフィール詳細へ

    当ブログは北海道限定情報サイト
    「北海道ディレクトリ」登録サイトです。
    北海道ディレクトリ
PAGE TOP ↑