Facebookページのイイね数やフォロワー、投稿数をウェブサイト上に表示させる公式プラグイン Like Box(以下、旧プラグイン) が6月26日に使えなくなるかもしれないと公式からアナウンスがあり、Deprecated(廃止予定)の札が貼られました。

旧プラグインの機能が使えなくなるわけではなく、Page Pluginに移行されるとのこと。

「6月26日に廃止”予定”」なのも、「ユーザーの対応の具合によっては延期もありえるよ」というよくある措置だとは思いますが、、移行まであと3ヶ月ほどしかないので、早めに対応しておきたいですね。

移行先のPage Pluginは何が違うのか?

Page Pluginと旧プラグインの大きな違いはこんなところ。

  • 最小幅がより小さく、最大幅が固定された
    Page Plugin : 200px ~ 500px
    旧プラグイン : 292px ~ 無制限
  • デフォルトの横幅が大きくなった
    Page Plugin : 340px / 旧プラグイン : 300px
  • 縦幅が130px~無制限になった
    Page Plugin : 130px ~ / 旧プラグイン : 70px ~ 1460px
  • レスポンシブに対応
  • 配色の変更や背景色の透過ができなくなった
  • 外側の境界線が薄くなった
  • いいねしたユーザーのアイコンが小さくなった
  • カバー画像の表示
  • 指定できるオプションが少なくなってわかりやすくなった
Facebook Page Plugin と旧Like Boxの違い
Facebook Page Plugin と旧Like Boxの違い

動作比較テスト

動作のスクリーンショット
新旧比較

最大幅が決まってしまい、500pxとわりと狭め。背景色は白固定で、透明にしたり自由に変えられないため「デザインに溶けこませる」ことが難しくなりました。

しかし最大幅や最小幅が決まってるとはいえレスポンシブに対応したのは嬉しいところ。data-widthで横幅を指定すると、それを最大幅として親要素に合わせて可変します。
縦幅も変わり、最小値が130pxとなり最小値になるとちょうど投稿がぴったり隠れる形に。最大値はなく縦幅の分だけ投稿の描画領域が広くなります。
旧プラグインでも縦幅は指定出来ましたが、いいねしたユーザーの領域が広くなるだけで、そのいいねしたユーザーも100人までしか表示されないので大きな値を指定すると余白が広がるだけという状態でした。

いいねしたユーザーのアイコンがいい感じにコンパクトになったのも好印象。これまではアイコンが結構大きくて変更ができませんでした。なのでアイコンを小さくしたいがために別のプラグインを使ってたりしていましたが、今度は逆にアイコンを大きくする時に別のプラグインを使うことになりそうです。

指定できるオプションは命名がわかりやすくなり、数が減りました。

旧プラグイン Page Plugin
href 引継
height 引継
width 引継
show_faces show_facepile
stream show_posts
なし hide_cover
show_border 廃止
colorscheme 廃止
force_wall 廃止
header 廃止

まとめ的な

認証マークが少し明るくなったり細かな違いもありますが、機能としてはほぼ同等。オプションを減らして見た目を縛ることで今のFacebookとの統一感がアップしました。貼り付けるだけでも無難な感じにはなるのではと思われます。

しかしカバー画像を非表示にして白背景にすると、左上のページアイコンに黒い境界線がつくのはちょっと・・・。角丸アイコンだったりするととても目立つ。
カバー画像を表示させれば、太めの白ボーダーに、文字の色や太さ、ボタンの位置も微妙に変わります。
カバー画像なしにする時はアイコンが不自然になっていないかチェックがいりますね。