WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

JQ

2015/05/12

FacebookのLike Boxは6月22日で終了!新しいPage Pluginへの変更方法まとめ

投稿者: JQ
カテゴリー: マークアップ >Facebook

eyecatch_20150511

最近、FacebookのAPI関係の仕様変更が立て続けに行われています。
先日は、いいね!ボタンの仕様変更により、4月末で古いいいね!ボタンが使用できなくなりました。
さらにFacebookでは、既存のLike Boxに関しても、6月23日から使用できなくなるとアナウンスを行いました。

今回は、6月22日を最後に使用できなくなる「Like Box」の代わりに登場する「Page Plugin」の設置方法をまとめて紹介します。

ちなみに先日のいいね!ボタンに関する記事はこちらです。

設置方法はLike Boxとほぼ同じ

1.App IDの発行

まずは、FacebookアプリのApp IDを取得する必要がありますので、こちらよりアプリ作成画面に移動します。

新規アプリ作成画面

アプリ作成画面に移動後、右上の「Add a New App」をクリックします。

アプリ種別選択画面

アプリのプラットフォームを選択する画面が表示されますので、「ウェブサイト」を選択します。

AppID生成画面

すでにFacebookアプリを作成されている方は、作成済みアプリの一覧が表示されますが、右上の「Skip and Create App ID」をクリックします。

アプリ設定画面

表示されたダイアログボックスに「アプリ名」「アプリのカテゴリ」を選択して「Create App ID」をクリックします。

アプリ設定画面

アプリ作成が完了すると、作成したアプリの概要ページ(ダッシュボード)ヘと移動します。
画像中の四角で囲まれた部分がApp IDとなります。

2.Page Pluginの設置タグを発行

新規App IDの発行が終わったら、こちらからPage Pluginのタグ発行ページヘと移動します。

アプリ設定画面

少し下にスクロールすると、基本情報を入力する欄が出てきますので、上記の通り入力し、「Get Code」をクリックします。

また、チェックボックスの部分で、カバー写真を隠すか、いいね!した人の写真を表示するか、ページヘの投稿を表示するかを自由に選択することができます。

※現在はPage Pluginの横幅が280px〜500px、高さが130px以上のサイズしか指定することができません。

3.発行されたコードを設置

コード発行画面

Get Codeボタンをクリックすると、このような画面が表示されます。

この通り、body開始タグの直後に記述するものと、実際にPage Pluginを表示したい位置に記述するコードの2つが生成されるので、両方をご自分のWebサイトのコードに埋め込んでください。

以上で、Page Pluginの設置が完了です。

まとめ

今回はこれまでのLike Boxに代わる「Page Plugin」というものの設置方法についてご説明しました。
先日のいいね!ボタンと同様に、仕様変更について知らなかったでは済まされない事態になりかねませんので、一度ご自分のサイトや、担当しているお客さまのサイトの現状を、ぜひもう一度見直してみてください。

では、次回もよろしくお願いします。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ