ウェブのあれこれ
ウェブを活用したいひとのためのブログ
【2016年9月版】Facebookタイムラインを埋め込む方法
2016/03/27 その他

【2016年9月版】Facebookタイムラインを埋め込む方法

けっこう前ですが、仕様変更に伴い2015年6月23日からFacebookタイムラインの埋め込み方法が変わりました。放置している方はLikeboxからPage pluginへと変更しましょう。※facebook for developersの画面が変わっていたため2016年9月9日加筆修正

LikeboxからPage Pluginに


仕様変更に伴い、名称もそれまでのLikeboxからPage Plugin(ページプラグイン)へと変わりました。

埋め込み方法は簡単です。

1.facebook for deveploersへアクセス


まずはfacebook for developersにアクセス

2.アプリIDを作成


※すでにアプリIDを作成済の場合は3.ページプラグインの設定とコード取得へ


ページの右上「マイアプリ」から「新しいアプリを追加」クリック。




ポップアップが出てくるので「ウェブサイト」をクリック。



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




ポップアップ内に情報を入力します。

表示名は誰かに見られるものではないので、分かりやすい名前を入れたらいいと思います。

カテゴリーはタイムラインにしたいFacebookページに該当するものを選択してください。

入力が完了したら「アプリIDを作成してください」をクリック。

セキュリティチェックのポップアップを表示されるので、指示に従って該当する画像を選択してください。

チェックが完了すると、こんな画面が表示されます。




これで「アプリID」の作成が完了しました。

3.ページプラグインの設定とコード取得

 

上部ナビの「Docs」もしくは「ドキュメント」をクリック

https://developers.facebook.com/docs/にアクセスしてもらってもOKです。

 

左端の「製品に関するドキュメント」の中から「ソーシャルプラグイン」をクリック



「ソーシャルプラグイン」の中から「ページプラグイン」をクリック。

※埋め込みたいモノによって該当する箇所をクリックしてください。
いいね!ボタンとかシェアボタンとかも埋め込めます。





ページプラグインを設定するページにたどり着きました。

少し画面をスクロールすると設定する箇所があります。





URL:埋め込みたいFacebookページのURL
タブ:そのままでOK
幅:180〜500の入力
高さ:70〜を入力

チェックボックスは下にプレビューが出るので、
お好みでチェックしてください。

一通り設定したら、プレビュー下にある「コードを取得」をクリック。

 

コードの貼り付け

 

「コードの取得」をクリックするとポップアップが表示されます。

※[開発モード]なんちゃらは無視してください。
タイムラインを表示させるだけならこのままで問題ありません。

公開されたい方はこちらを参考にしてください。


コードは「Javascipt SDK」と「IFrame」の2種類が用意されています。

どちらでもタイムラインは埋め込めるのですが、出来るなら「Javascipt SDK」を選んでください。


コードの貼り付けはhtmlファイルに行います。

よく分からない人は<div>とか<p>とか<h1>とか</>がいっぱい書かれているファイルです。
見たことあると思います。

Javascript SDKの場合

ステップ1で先ほど作ったアプリIDを選択します。
 
ステップ2のコードをタイムラインを「表示したいページの<body>タグ直下」に貼り付けます。


ステップ3のコードはタイムラインを「表示したい箇所」に貼り付けます。

IFrameの場合


ステップ1で先ほど作ったアプリIDを選択します。
 
ステップ2のコードはタイムラインを「表示したい箇所」に貼り付けます。


以上がFacebook ページプラグイン(タイムライン)をサイト内に掲載する方法です。

従来のLikeboxのまま放置している方は動作しなくなっているので、新しい方法ページプラグインに変更しましょう。

実際にタイムライン埋め込んでみました

 

この記事どおりにレボルメのタイムラインを以下に埋め込んでみました。


もし良かったら「いいね!」してあげてください。


Provided by Revolme inc.
revolme.co.jp