当サイトには広告が含まれております

サイトにFacebookページを貼り付ける方法がLIKE BOXからPagePluginに

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

新しくつくるサイトにFacebookページを貼り付けようと思いました。以前「簡単!サイトにFacebookページのいいねボタンとタイムラインを表示する」という記事を書いたので、それを見ながら設置しようとしたらFacebookAPIのページで2015-6-23から仕様が変わるという事を知らされました(^_^;。
ということで、Facebookページをサイトに貼り付ける新しい方法について書きます。

記事をざっと見る

FacebookのLIKE BOXが2015年6月23日で廃止の情報

https://developers.facebook.com/docs/plugins/like-box-for-pages

こちらになります。以前はここから貼り付け用のコードを作ることができたのですが、このように、

With the release of Graph API v2.3, the Like Box plugin is deprecated. Please use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

If you do not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin by June 23rd 2015.

自動翻訳したものを若干超訳すると、

グラフAPI v2.3デベロッパーのリリースでは、LIKE BOXプラグインが廃止されました。代わりに新しいページのプラグインを使用してください。ページのプラグインは、あなたのウェブサイトへのページのコンテンツを簡単にフィードを埋め込むことができます。

手動でページプラグインにアップグレードしない場合は、LIKE BOのプラグインの実装では、2015年6月23日に自動的にPage Pluginに戻ります。

となります。自動的にPage Pluginに戻ります、ということなので今まで設置してあったLIKE BOXはそのままにしておいても自動的に新しいプラグインとしてちゃんと動くと期待したいのですが(^_^;、今時点ではどうだかわかりません。ネットで検索をすると「廃止されるので動かなくなるから早めに置き換えを!」という論調が強いので、もしかすると(まだ、楽観的)動かなくなるかもデス。

Page Pluginから貼り付け用のコードを取得する

新しくFacebookページを埋め込むには今はもうPage Pluginしか方法がありませんのでやってみようと思います。

まずPage Pluginを使うにはApp IDの登録をする必要があります。App IDの登録をして、Page Pluginからコードを取得するまでを書きます。

App IDの登録をする

Facebook開発者 ページに行きます。

このように表示されるので右上の、

+ Add a New App をクリック

このように画面がポップアップするので一番右の WWW をクリック

右上の Skip and Create App ID をクリック

Display Name にアプリの名前(任意の名前)し、カテゴリーページ用アプリ を選択して Create App ID をクリックします

セキュリティチェックのために、目視で「xx(何かの名前)」が写っている写真を12枚の中から全部チェックして、送信 をクリック

ダッシュボードに戻り、App ID の作成が終了です。

Page Pluginから貼り付け用のコードを取得

https://developers.facebook.com/docs/plugins/page-plugin

このサイトから貼り付け用のコードを作ります。

FacebookページのURL、幅、高さ を指定します。すると青枠で囲ったところにプレビューが表示されます。オプションが幾つかあるのでチェックを付けたり、外したりして好きな形にします。

これで良ければ、

Get Code をクリック

こういう感じの画面が表示されるので、

アプリID の横のをクリック

先ほど作った App IDの名前を選択します

表示された  の部分のソースコードを <body タグの直下にコピーします。

表示された  の部分のソースコードをFacebookページを埋め込みたい場所にペーストします。

WordPressで埋め込む場合

1の部分は使っているテーマフォルダで<body を指定してるファイルを探します。今回の場合、header.phpというファイルにその場所がありましたので、header.phpの

<body <?php body_class(); ?> style=" <?php echo $bg_style; ?> ">

この行の下に1のソースを挿入しました。大概の場合はheader.phpに <body> があるかと思います。

Facebookページの埋め込みはウィジェットで行いました。

ダッシュボード 外観>ウィジェット をクリックして、

追加したいウィジェットエリアに テキスト を追加し、2のコードを貼り付けて 保存 します。

これで、

こんな感じに、Facebookページが表示されるようになりました(^^)/

↓関連記事
[ryus_blogcard url=https://usortblog.com//facebook-pageplugin-ryusblog/]



この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (7件)

記事をざっと見る