FacebookのLike Boxパーツをブログやサイトに設置している人へ!2015年6月23日までにPage Pluginに乗り換えないと使えなくなるよ

Facebook Page Plugin

先日、モバイルテーマを作り替えた時、SNS関連のパーツ作り直しも行った。

その時に知ったのだけど、FacebookのLike Box(ライクボックス)が2015年6月23日で廃止されるらしい。

↓Likeboxはこんなやつ
Facebook Likebox

このブログパーツを使ってるブロガーの人やサイト持ってる人は結構多いと思う。

この廃止でFacebookページへ集客する方法が無くなるワケではなく、代わりに「Page Plugin(ページプラグイン)」ってやつを取り付ければOKらしい。

Page Pluginとは?

PagePluginはほぼLike Boxと変わらないけど、シェアボタンが加わり、カバー画像の表示にも対応していて、今っぽい感じに進化しているやつ。

Page Pluginの例

カバー画像の設定をしていない場合は真っ白に表示される。このブログのFacebookページはサボってカバー写真を設定していないので、真っ白に表示されている。

キャッチーな画像に変えたら結構映えるかもしれない。

SPONSORED LINK

Like BoxをPage Pluginに切り替える手順

切替自体はすごく簡単。

Facebook Developersページの「Page Plugin」に行って、貼り付けたいFacebookページのアドレスを入力するとパーツが作られる。

Page Plugin パーツの作り方

そしたら「Get Code」クリックして、出てきたコードをPage Pluginを埋め込みたいサイトに貼り付けるだけで完了。

ちなみに、

1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

の部分にあるコードは、設置したいサイト(ブログ)にある

</body>

の手前に書く。

WordPressだったらfooter.phpにあると思います。

2. Place the code for your plugin wherever you want the plugin to appear on your page.

は、Page Pluginパーツを表示させたい所に書くと正常に表示させる。

Width(横幅)とHeight(縦幅)の入力もできるけど、省略できた。

今回はスマートフォン用のテーマの方をPage Pluginに切り替えたのだけど、WidthとHeightを省略したからか、画面の解像度が違ってもその大きさに合わせてパーツの大きさも変わってくれて、すごい助かった。

パーツ切替にあたって上手くいかなかったところ

これだけでPage Pluginへの切替は終わる。以前はFacebookのパーツを作るのに一苦労した記憶があるけど、結構分かりやすいUIになった気がする。

が、しかし、他の部分で設置にかなりつまづいた部分があった。

入力したURLのFacebookページが表示されず、コードが取得できない

まずはコレ。

「Facebook Page URL」の部分にFacebookページのURLを入力したのに、プレビュー画面のFacebookページがFacebook公式のモノから変わらない。

そんなもんなのかとコードを取得してみたけど、やっぱりFacebookのFacebookページのまま(ややこしい)。

これはSafari(Yosemiteの場合)が悪さをしているようで、ブラウザをGoogle Chromeにしてみたら上手く行った

『This app is in Development Mode and not available publicly.』の警告が出る

お次はコレ。

「This app is in Development Mode and not available publicly. 公開モード can be enabled in the App Dashboard.」

という、ルー大柴の逆みたいなエラーが出てしまった。

Page Plugin 警告

これは、「開発モードになってるから使えませんよー」的な警告で、これを解決しないと使えない。

大抵の人はこの問題は起こらないはず。

というのも、この問題は「アプリID」を新しくしていたのが原因だからだ。

この警告が出た時は、このアプリIDを持ってるアプリの設定を更新してやる必要がある。

画面上の『My Apps』から、警告が出ているアプリIDを選択→[Settings]→[Contact Email]にメールアドレスを入れて[Save Changes]で保存する。

※連絡用メールアドレスなので、ちゃんと使ってるメールアドレスを入れること

Facebook アプリID更新

これで警告が消えてPage Pluginを使えるようになる。

手間だけど、やっといて悪いことはないので早めにやっときましょう。

SPONSORED LINK

この記事を読んだ人にオススメの記事