share facebook facebook twitter menu hatena pocket slack

2016.03.29 TUE

Facebookのウォール埋め込み方式が変わったぞ!

LikeBox、廃止されたってよ

Facebook_Like_Box_-_Social_Plugins

今まで、簡単にFacebookのウォール埋め込みタグを生成するために使われていた、
「Like Box」が2015年6月23日をもって廃止されました。
これからは「Page Plugin」を使ってね、とLikeBoxのページに書いてあります

LikeBoxで作った埋め込みタグがまだ動いてるんだけど

2015年6月22日以前に生成されたタグは自動でPagePluginに変換されているようです。

目標

PagePluginでウォールをサイトに埋め込む

実装

Facebookアプリ作成

初めにDeveloper登録が必要になりますがこれについては以前書きました。
https://developers.facebook.com/quickstarts/にレッツアクセス。

Quick_Starts_-_開発者向けFacebook

Websiteをクリックし、

Quick_Starts_-_開発者向けFacebook_1

アプリ名を入力し、 Create New Facebook App ID。
サイトのURLを入力したら基本情報の設定は完了です。

Quick_Starts_-_開発者向けFacebook1

SocialPluginsをクリックして次に進みます。

PagePlugin設定

Social_Plugins

PagePluginの「Web」ボタンを押して、

Page_Plugin_-_Social_Plugins

表示したいFacebookページの情報を入力し、表示項目やサイズを調整して Get Code。

Page_Plugin_-_Social_Plugins1

アプリを開発モードに設定しているので怒られていますがこれを埋め込めばOKです。

HTMLにタグを埋め込んだ結果がこちら。

スクリーンショット-2016-02-05-21.13.10

うん、できてますね。

ちなみに

Facebookページの指定は、最初のdivタグの data-href 属性で行われています。
data-href="https://www.facebook.com/cloudpack.jp"
ここを書き換えれば他のFacebookページの表示もできます。
(aタグのURLなども更新する必要はありますが。)

やってみた結果

ちょっとめんどくさいですね。
アプリの設定までしたのだから、何かメリットが欲しいところだったのだけど(レポーティングとか)、
何もないようでちょっとがっかりなところはありました。

とりあえず実装に移ろう、な!

追記

scriptタグをそのまま埋め込むと、IE8で動作しないようでした。
もう既にFacebookもIE8は切り捨てているのですが、一応page pluginを動かす方法があります。
初めの