FacebookのLike Boxが廃止に

小ネタ

自社サイトを覗いていたら、Facebook の Like Box のデザインがいつの間にか変わってました。

はじめに

2015年7月8日、自社サイトを覗いてみると、ページ下部に設置していた Facebook の Like Box のデザインが変わってました。

こんな風に

※変更前のスクリーンショットは撮ってません。
※変わってしまったのは Like Box を設置している ( 設置した事がある ) 方なら判るはず。

いったい何があった?

Like Box 廃止

Like Box は deprecated ( 廃止予定、非推奨 ) 行き になってました。

With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.

2015年6月23日をもって、Like Box は自動的に Page Plugin で代替される旨書いてありますが、ちょっと遅れて反映された形になったのでしょう。

既に Page Plugin で処理されるようになっているので

「放置!」

という手もあるかと思いますが、表示幅等デザイン的にページに適合していないので、Page Plugin の設定をちゃんと行う事にします。

Page Pluginを設定する

Page Plugin ページで、設定が行えます。

Page Plugin 設定

手順

  1. 以下のパラメータを設定します。

    Facebook Page URLFacebookページのURLを入力します。
    ※自サイトのURLではない
    Width表示の幅を入力します。( 180 ~ 500 [ピクセル] の範囲)
    Height表示の高さを入力します。 ( 最小 70 [ピクセル] )
    Use Small Headerヘッダ表示を "小さい表示" にします。
    Adapt to plugin container widthプラグインを表示するコンテナ ( 親要素 ) 内に収まるようにします。
    但し500px以上のコンテナに適合するように拡大されるような事はない
    Hide Cover Photoカバー写真を非表示にします。
    Show Friend's Faces「いいね!」してくださった方の写真を表示します。
    Show Page PostsFacebookページの投稿を表示します。
  2. プレビューに問題がなければ [ Get Code ] ボタンをクリックします。
  3. 生成されるコードが Webページで出力されるようにします。

    Code

    1 のコードは body タグの直下に、一度だけ ( 既にFacebook ウィジェットを設置済みの場合は記述済みかも )

    2 のコードは Page Plugin を表示する箇所に記述します。

確認

設置後は表示確認を行いましょう。

まとめ

deprecated 指定されている、且つ、設置済みの Like Box は既に動作していない ( Page Plugin に置き換わっている ) 状況に陥っていると思われるので、適当な機会に設定変更しておいた方がよいと思われます。

弊社Webサイトとしては、横幅の最大値が 500px に制限された事で、デザイン的な収まり感が悪くなった気がする。。。