facebook WEBサービス

ウェブサイトにFacebookページを貼り付ける,埋め込む方法

Facebookページを静的サイトのトップページに貼り付けたいとの依頼を受けたので調査しました。
せっかくなので、備忘録としてポストします。

Facebookをサイトに埋め込む方法 page plugin

App IDの登録をする

PagePluginという、プラグインを作成する必要ようです。なので、まずはFacebook開発者ページへ。
相変わらず、どこから行くのかがよくわからない(苦笑)

fb_link_01

↑ このキャプチャ画面では、既に2個のアプリが登録されています。
右上の「+新しいアプリを追加」ボタンをクリック。

fb_link_02

↑ 「Add a New App」というモーダルウィンドウが表示されるので、右端の「www」(ウェブサイト)をクリック。

fb_link_03

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

fb_link_04

↑ 設定用のモーダルウィンドウが表示されます。途中「あかん」となっているのは、fbの表示設定を大阪弁に変えてそのままだからです(苦笑)

●表示名(必須):任意の名称 tglink-20160512
●ネームスペース:アプリの固有ID
●連絡先メールアドレス(必須):メールアドレス
●カテゴリ(必須): 「ページ用アプリ」を選択

上記内容を入力し、「アプリIDを作成」ボタンをクリック。
表示名に「fb」や「facebook」と付けようとするとエラーになるので、注意。

fb_link_05

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

fb_link_06

↑ 成功すると自動的にダッシュボードに戻るので、新規作成した App ID を確認。これで第一段階終了。

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

fb_link_07

fb_link_08

↑ 上部メニュー「ドキュメント」→製品に関するドキュメントの「Social Plugins」→「Page Plugin」をクリック。

fb_link_09

↑ Page Pluginの「web」ボタンをクリック。

fb_link_10

↑ Page Plugin のページに行き着きます。

fb_link_11

↑ 少しスクロールし、設定フォームを埋めます。

●FacebookページのURL:
個人ページのURLは不可。企業などのFacebokページ(旧ファンページ)のURLが設定可能です。

●タブ:「timeline」

●幅:(最低:180px, 最大:500px)

●高さ:(最低:70px)

fb_link_12

↑ FacebookページのURLに「フェイスブックナビ」のURLのみを入力したところ。リアルタイムで表示されます。

fb_link_13

↑ 「幅」に最大値の500を入力した所

fb_link_14

↑ 「スモールヘッダーを使用」をチェックした所(幅:500)

fb_link_15

↑ 「カバー写真を非表示にする」をチェックした所

fb_link_16

↑ 試しに https://www.facebook.com/fnavigation/?fref=ts 、「幅」を500、「高さ」を300、「スモールヘッダーを使用」にチェックを入れた状態で、下の「コードを取得」ボタンをクリック。

fb_link_17

↑ モーダルウィンドウが表示されるので、アプリIDと言語を設定。
アプリIDは先程作成したものを選択。
「開発モードなので公開されません。」と出る場合は、ダッシュボードにて「公開モード」と変更する必要が有り。

以下のようなコードが取得できますので、とりあえず、テキストエディタ等にコピーしておきましょう。

fb_link_17

(1)のコード(javascript)を <body> タグの直下にペースト。
(2)のコード(html)を、Facebookページを埋め込みたい箇所にペースト。

ソースコード自体はこの2つで完結されており、それぞれを既定の場所にペーストすれば完成です。

fb_link_19

↑ 完成例。

ひとまず、今回はここまで。

-facebook, WEBサービス
-, , ,