学びで笑顔を作るコミュニティー -あなたの夢の応援団-

Facebook ブログに配置した「ページのイイネ」部品(ウィジェット)の仕組みが変わったので、Facebook Developersの Page Plugin を使って設定した

pageplugin

ブログに興味を持ってもらった方と交流(コミュニケーション)の場である「facebook ページ」。これを紹介するために、ブログのサイドバー・フッターに設置していた部品(facebook Likebox)の仕組みが2015年6月に変更となったので、新しい仕組みを使って再設定しました。

この新しい仕組みでの設定方法をまとめました。

facebook Likebox が2015年6月23日 廃止

いままで、ブログにfacebookページを紹介する部品だった「facebook LikeBox」でした。この仕組みが2015年6月23日に廃止されました。いままで使っていた LikeBox については、新しい設定へ手動で切り替えを行うようにアナウンスされています。

これが従来のfacebook Likeboxの表示です。

facebook_like_box

なお、英語原文によると、置き換えを行っていない LikeBox は、当面の表示そのものは止まらないようです。ただし、表示そのものは古いままになってしまうので、手動で切り替えを行う必要があります。なので、切り替え期日(6月23日)も過ぎているので、早急に変更する方がいいと、個人的には思います。

新しい仕組みは「Page Plugin」

ブログにfacebookページを紹介する部品を作る新しい仕組みは「Page Plugin」です。

新しいPage Pluginを使うと、以前と違い「ページのカバー写真」を活かしたデザインになります。特徴として標準サイズが、横340px・高さ500pxになります。そして、以前のLikeBoxより選択できるサイズの幅が狭くなり、横のWidthは280pxから500px・縦のHeightは130px以上はです。800pxとかのサイズが指定できなくなりました。

設定方法

作成するのに必要なのは、facebookページのURLアドレスです。そのアドレスをこのページにを開いて入力します。

facebookページのURLアドレスを「Facebook Page URL」に入力すると、下にそのfacebookページが表示されます。

facebook_pageplugin

Widthには、180から500の間の数字を入力します。これは配置するサイドバーの幅と合わせると綺麗に収まります。Heightは基本的に指定しなくて、OKです。

  • 「Adapt to plugin container width」とは、配置した場所の横幅に合わせてくれる機能です。なので、チェックを入れて「ON」のままにします。
  • 「Use Small Header」にチェックを入れると、カバー写真の領域を小さく表示できます。
  • 「Hide Cover Photo」をチェックすると、カバー写真なしの表示になります。
  • 「Show Friend’s Faces」は、イイねを押してくれている友人を表示してくれる機能です。基本的にはチェックを入れておくのをオススメします。
  • 「Show Page Posts」は、そのfacebookページの「投稿」を表示します。これはお好みでチェックを入れていください。
  • このサイトの場合は、ほぼ毎日のタイミングで更新しているスタッフ通信を紹介したいので、facebookページの「投稿」を表示しています。

一方、ものくろぼっくす(ブログ)のサイドバーに配置しているときは、読み手の方はブログを読みたいという気持ちが強いのであまりアピールせずに、facebookページの投稿は、facebookページに来てくださいという形で、自分はチェックを外しています。

チェックをオン・オフすると、プレビュー表示も変化しますので試しながら、選択してください。

facebook Page Plugin コード

設定ができたら、左下にある青いボタンの「Get Code」をクリックします。すると、サイトに設置するためのコードが表示されます。

このコードが2つに分かれていますが、はじめの「1」の方は、ページで一度だけ読み込みすればOKの前段取り(JavaScriptをロードしている)の部分です。bodyタグの後に配置してほしいと案内(理想はbodyタグの直後)されています。

後の「2」の方が、実際にfacebookページの部品を表示する命令が書かれています。つまり、この「2」を複数設置すると、ページに複数(例えば、サイドバーとフッターなど)のacebookページの部品を表示できます。

WordPressで表示するには

1つ、このfacebookページの部品を表示する場合は、難しく考える必要はありません。

サイドバーやフッターの配置したい「ウィジェット」の場所に「テキスト ウィジェット」を配置して、先の両方のコードを貼り付けます。1つ表示するだけなので、おなじ場所(ウィジェット)に「1・2」の順番に貼り付けます。

実際のテキストウィジェットに貼り付けているスクリーンショットがこちらです。

ウィジェット設置例 facebook pageplugin

これで、新しいfacebook Page Pluginの部品がブログに表示されます。

情報発信 個別コンサルティング

Web・ブログのコンサルティング・ご相談のご依頼を受け付けております。
・Webを活用して本気でビジネス・人生を切り開きたい方
・Webのテクニカルな改善でお悩みの方
・アイディアはあるのに、記事の文章にするのがうまくいかない方
・親指シフトを本気で習得したい方

そんな多様なお悩み、そして、さらに隠れていて見えないお悩みもダイレクトにアドバイス。ブログ2400記事をアウトプットした経験に基づく良質なノウハウ・スキルを手に入れてください。時間の大切さを感じてるあなたへオススメです。

お申し込みはこちらのお問い合わせフォームからお願いします。

うまく表示されない時はこちらをご覧下さい。

お申し込みはこちらのお問い合わせフォームからお願いします。
教え上手Webコーチ ものくろ by
Web・IT技術をわかりやすく優しくするコンサルタント「教え上手Webコーチ 」 ものくろ です。ブロガー・親指シフトユーザー・orzレイアウト考案者。WordPressが得意です。HTML・CSS・PHPに精通。文章は親指シフトで書いています。ニックネームの由来は趣味がモノクロ写真より。Webクリエーターエキスパート 認定保有者、カメラマンという顔も持つ。詳しくはこちら
関連記事