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

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

最近、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」をクリックします。

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

すでに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」というものの設置方法についてご説明しました。
先日のいいね！ボタンと同様に、仕様変更について知らなかったでは済まされない事態になりかねませんので、一度ご自分のサイトや、担当しているお客さまのサイトの現状を、ぜひもう一度見直してみてください。

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