FacebookのLikeBox仕様変更の調査報告。Page Pluginへの移行(2015/6/24改訂)

Publish2015/03/30(月)

Update2016/01/02(土)

FacebookのLikeBox仕様変更の調査報告。Page Pluginへの移行(2015/6/24改訂)

先日から少しニュースになっているので知っている人も多いかと思いますが、FacebookのLikeBox(サイトにFacebookページの情報を埋め込むための仕組み)の仕様がかわり、2015年6月23日から使用しているLikeboxが使えなくなります。
名称もLikeboxから「Page Plugin」に変更になります。
本件のまとまった情報はすでにあるかと思いますが、改めて内容の確認と対応策を確認しておきましょう。
※追記時点の2015/6/24現在ではすでにLikeboxは使用できませんのでご注意ください。

仕様変更の内容について

仕様変更に関する表示は、Like Boxのページに記載が以下のようにあります。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

Google翻訳に通した文章を読みやすい感じにするとこんな感じです。

グラフAPIのバージョン2.3のリリースにより、Likeboxプラグインは廃止されます。
新しいページプラグインは2015年6月23日に動作が停止されます。
Likeboxは、あなたのウェブサイトにfacebookページの投稿内容を簡単に埋め込むことができます。

書いてあるとおりなんですが、2015年6月23日からはPage Pluginじゃないと動きませんよということです。
Likeboxは簡単にサイトに埋め込むことが出来て、サイトで「Facebookをしています」ということが一目で分かるので比較的多くの人が使っています。
ということも考えると、今回の変更の影響は比較的広範囲になると思います。

Page Pluginのタグ取得方法

では新しいPage Pluginのタグを実際にサイトに埋めなおしてみましょう。
埋め方は以前と同じで、「Page Plugin」のページで必要情報を入力して出力されるタグを埋め込むだけです。

情報を入力したあとは「get Code」をクリックすると、Likeboxと同様に埋め込むタグが表示されます。
あとはこのタグを自身のサイトに適用させるという手順です。
この大きな流れは以前と同様です。

基本的な流れは以前と同じ

ただし、以前のlikeboxからPage Pluginになるにあたって変わった部分があります。
それは「横幅の最大値が500pxになった」という点。
これについては後ほど書きますが、僕は改悪ではないかと思っています。
また、最新のバージョンでは最小サイズが280pxから180pxに変更になっています。
あと、「Adapt to plugin container width」「Use Small Header」という2つの要素が追加になっています。

2015/6/24現在

Page Pluginのレスポンシブ対応について

さて、タグを埋めるだけでPage Pluginの導入はできるんですが、このままだと一部で問題が出てきます。
それがなにかといいますと、「モバイルでの表示の問題がある」という事。
導入した人はすでに気付いていると思いますが、例えば横幅を500pxにした場合、iPhoneで見ると見事に画面サイズに合わずにそのまま表示されています。
デバイスのサイズに合わせて自動的にサイズを取得して表示はされますが、横幅の500px分の余白は残ったままになるので、横にスライドする形で空白が出来てしまいます。

先日Googleからモバイルフレンドリーの発表があったように、モバイルでの表示の最適化は今のWebサイトで気をつけなければいけないポイントです。
ということで、モバイルでも表示が崩れないようにするために、以下のようなcssの記述を追加しましょう。
見る人がみたら分かりますが、このコードは以前のLikeboxでの対応時のコードと全く同じです。
Facebook側でも基本的な部分を同じにして少しでも対応作業の負荷を下げようとしている努力が垣間見えます。

以前の状態では、cssでスタイルを上書きする事で対応できましたが、本番公開時には対応できなくなっていました。
また、リリース直後だからという事なのかも分かりませんが、表示が異常に遅いですね…。
これらは今後改善するのでしょうか。
リリース直後なので不可が予想以上にかかったとかはまだ理解できますが、モバイルでの対応の不備は現状のサイトを取り巻く環境を考えると全くいけてないですね。
技術的に難しいのかも知れませんが、Facebookくらい世界のインフラともいえるようなサービスであればちゃんとしておいてほしいなと思うのです。

Facebookとかの外部ファイルについて思うこと

さて、一連の流れを確認しながら思ったのは、「なんてめんどくさいんだろう」という事。
一つのサイトだけならいいですが、これを何十個もしないといけない人もいると思うので、その事を考えると心が痛いです。
そしてこう思うんですよね。
「仕様変更で利用者に負担をかける対応方法をしないように設計すること」が大切だということに。
今回の場合だと、基本的な構造は変わってないわけで、対象となっているスクリプトを上書きしたらいいんじゃないのかと思うわけです。
(たぶん実際はもっと複雑な事情があったりすると思うのでそういう事にならなかったであろうことは理解していますが、あくまで心情としてという風に考えてください。)

これが毎回する作業になるというのは辛いですし、サービス提供側としてそのへんを考慮していてくれると嬉しいなとは思います。
あと、モバイルフレンドリーの件もそうですが、提供される時点でレスポンシブ対応にしてくれていれば余計な作業を利用者側がする必要ないという事もあるかと思います。
モバイルでの表示の重要性はFacebookでも理解しているでしょうし、モバイルだけじゃなくアプリ内での表示のこともFacebookであれば十分認識しているはずです。
おそらく今後は対応されるであろうと期待はしますが、その辺の配慮があるだけでユーザーは何も考えずに導入が行え、より多くの人がサービスを使えると思います。
その結果、自分たちのサービス利用者数が増えてくることも考えられますし、そういう視点を持っておくことが必要なんじゃないかなと思った次第です。

最後は本当に蛇足な感じになりましたが、2015年6月23日からはLikeboxが使えなくなるというのはほぼ確実だと思うので、、現在ではLikeboxは使用できません。
まだ埋め込みコードが残っている場合は、削除もしくはPagepluginのコードへの差し替えを行ないましょう。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month