ツールハック!

ツールハック!は、ウェブサービス、SNS、アプリなど、流行のツールの便利な活用方法をわかりやすく解説するサイトです。

Facebookページを自分のウェブサイトに埋め込む方法(2015年6月23日以降)

time 2015/11/28
Facebookページを自分のウェブサイトに埋め込む方法(2015年6月23日以降)

Facebookページを自分のウェブサイトに埋め込む方法ですが、
2015年6月23日以降、これまでの「Like Box」が使えなくなっています。

Facebookの公式アナウンス

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

If you did not manually upgrade to the Page Plugin, your Like Box plugin implementation will automatically fall back to the Page Plugin.
(参照:Like Box

 

「Like Box」から、新しくなった「Page Plugin」

Like BoxからPage Pluginになって変更された一番のメリットは、
カバー写真が表示可能になり、見た目がきれいになりました!

 

Facebookpage

Like Box → Page Plugin 主な変更点

  • カバー写真が表示可能になった
  • 問い合わせやシェアボタンが表示可能になった
  • 横幅の最小値、最大値が変更になった
    Like Box: 292px ~ 無制限
    Page Plugin: 200px ~ 500px
  • 縦幅の制限がなくなった
    Like Box: 70px ~ 1460px
    Page Plugin:  130px  ~ 無制限
  • 表示枠の色が薄くなった
  • レスポンシブデザインに対応可能になった

やはりスタイリッシュに表示できるのと、
表示の幅などがある程度自由になったのが良いですね。

Page Pluginの設置方法(設置用コード取得まで)

 

これからFacebookページを自分のウェブサイトに埋め込みたい方は、
以下のデベロッパー(開発者)向けのページから、
コードを埋め込み用のコードを作成&取得する必要があります。

Page Pluginの設置方法も、基本的にはLike Boxのときと変わりませんが、
余計なオプションがなくなって、コード取得が簡単になっています。

▼Facebook Page Plugin
https://developers.facebook.com/docs/plugins/page-plugin

 

Page Plugin 設定項目の説明

pgeplugin2

【1】Facebook Page URL
FacebookページのURLを入力してください。ここが間違っていると、
下のプレビュー画面に「エラー: FacebookページのURLが無効です。

【2】Width
設置するPage Pluginの横幅です。最小幅:280px、最大幅500pxです。
何も設定しなければ、デフォルトでは340pxになります。
もし300pxにしたければ、「300px」と入力してください。

【3】Height
Page Pluginの縦幅です。最小幅が70px(最大幅は制限なし)です。
何も設定しなければ500pxになります。
幅を指定する場合のみ、○○pxと入力してください。

【4】Use Small Header
ここにチェックを入れると、ヘッダーが小さくなります。
カバー写真の下に表示していた「いいね!」ボタンが
カバー写真に重なる形になり、「シェア」ボタンが非表示になります。

【5】Adapt to plugin container width
何のことかわかりにくいですが、ここにチェックを入れると、
ページを読み込んだ時の親要素に合わせて、
自動的に横幅を調整します。
【2】で横幅を設定していないときのみ有効です。
一見便利そうですが、親要素の読み込みをミスると、最小幅180pxで表示される可能性もあるので、
心配であれば一度埋め込んでみて、PC、スマホで検証してみてください。

【6】Hide Cover Photo
ここにチェックを入れるとカバー写真が表示されなくなり、
シンプルな白地になります。

【7】Show Friend’s Face
ここにチェックを入れると、いいね!した友達が1行分表示されます。

【8】Show Page Posts
ここにチェックを入れると、Facebookページの投稿が表示されます。
もし表示させない場合は、【3】の表示縦幅も小さくしてOKです。
項目の設定が終わったら「Get Code」をクリックして、
自分のウェブサイトに張り付ければOKです。

Page Plugin Social Plugins Getcode

 

WordPressに埋め込む場合は、こちらも参考にしてください!
<参考>FacebookページのPage PluginをWordPressに埋め込む方法

 

もし、自社サイトにすでに埋め込まれているものが
旧Like Boxなのかどうか分からなかったり、
Page Pluginの設置方法が分からなければ、
当サイトお問い合わせページか、コメントにてご連絡ください。

down

コメントする




スポンサーリンク

おすすめ商品

Facebookページ

いいね!ありがとうございます!

サイト更新の励みになります!

お買い得アイテム