公開：2015.04.17 / 最終更新：2015.06.21

[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法

今までブログに埋め込んでいたFacebookのLikeBoxが2015年6月23日に廃止となり、新たに「Page Plugin」になることはご存じですか？

実際に今まで使えていたLike Boxの公式サイトを表示してみると確かにもうLike Boxのコードの取得はできないようになり、Page Pluginの導入を促されます。

実際にコードを触り、ブログに埋め込んでみたので今後Page Pluginを実装する方に向けて設定方法を書いてみました。

Like Boxについて

今までのLike Boxはこちらのサイトからコードの取得ができました。

ただし、現段階でページに表示されているのは下画面のように忠告のみとなっています。
Likebox

2015年6月23日から動かなくなるから新しく「Page Plugin」を設置してね的な文章が書かれています。…ということで、Page Pluginを設置していました。

まずは「Page Plugin」の公式サイトを以下より表示します。

ページを開くといくつか入力欄が表示されます。
Pageplugin

まず「Pagebook Page URL」の部分に自分のFacebookページURLを入力します。私の場合は「https://www.facebook.com/akamejoshi」となります。

「Width」や「Height」はボックスの幅と高さを示し、今回から幅の最小280px,最大500px・高さの最小が130pxへと変更されました。

Hide Cover Photo：ページの背景を非表示にする場合はチェックを入れる

Show Friend’s Faces：いいね！している人たちの顔を出す場合はチェックを入れる

Show Page Posts：ボックス内にFacebookページに投稿した内容を表示する場合はチェックを入れる

設定して作ったのがこちらのボックスとなります。（ボックスサイズは任意）
Pageplugin

入力が完了したら左下の青いボタン「Get Code」を押してコードを取得します。

「Get Code」を押すと次のような画面が表示されます。
Pageplugin コード

上枠のコードを<body>の後ろに挿入。下枠のコードはPage Pluginを設置したい場所に入れ込みます。

すると…

上手くコードが読み込まれるとこのように表示されます。
Pageplugin入れ込み

ボックス最大サイズが500pxということで私のブログコンテンツ幅と合わないという事態に…。ここは本当になんとかしたいですね。

色々と無理矢理操作はしてみたのですが、最終的にはiframeの中を強制的に変えることをしなくてはならず断念。Scriptを走らせればなんかできるっぽいのですが、中々いうことをきいてくれず諦めました。

6月23日まではまだ日数があるのでFacebook側の対応、もしくはどなたか有志で素敵なコードを書いてくれることを期待しています。

幅や高さは今のところ制限がありますが、変更は逃れられないのも事実。6月23日になって慌てないうちにやり方だけでも今のうちに確認しておくと良いと思います。

~~私は結局元に戻しちゃいましたが…笑。いつかはやらないといけないことだと思うので時が来たらまた導入してみます。~~ 有効期限が近づいてきたこともあり、当ブログも「Page Plugin」に移行しました。

おしまい。

ブログ運営者をフォローする！

＼この情報を周りの人にも教える／

[Å] Like Boxはもう古い！Facebook 新仕様「Page Plugin」をブログに設定・設置する方法

この記事が気に入った方はいいね！で
更新情報を受け取る！