超簡単だった！FacebookページをWebサイトに貼り付ける方法

Facebookページは会社やお店、イベントなどの宣伝をするのに大変効果的です。またFacebookページのタイムラインをWebサイトに貼り付けることで、Facebookページの「いいね！」を増やしたり、Facebookページだけで発信している情報をWebサイト上でも見てもらうことができるので宣伝には良い方法だと思います。
以前から何度かこのFacebookページをWebサイトに貼り付ける方法を書いてきましたが、一番簡単にFacebookページをWebサイトに貼り付ける方法をまとめてみました。

FacebookページをWebサイトに貼り付けるためのコードを取得する

FacebookページのタイムラインをWebサイトに貼り付けるためには、貼り付け用のコードを取得する必要があります。コードは ページプラグイン から取得できます。

Facebookにログインしていなくても、大丈夫*1なようです。

FacebookページのURL に貼り付けたいFacebookページのURL*2を入力するとこのように、そのページのタイムラインの埋め込むどどういう風に見えるかがプレビューされます

コードを取得 をクリックします

この画面が出ますが、

IFrame というタブをクリック

このコードが表示されるので、

コピーします。これがFacebook貼り付け用のコードです。

WordPressサイトにFacebookページを貼り付けるには

WordPressで作っているWebサイトにfacebookページのタイムラインを貼り付けるには、

ダッシュボード　外観＞ウィジェット　をクリック

ウィジェットの　テキスト　をクリックして、貼り付けたい場所（この場合はテーマtwentysixteenのサイドバー）を選んで、ウィジェットを追加 をクリック

タイトルは任意ですが、Facebookページ とか入力して、内容: に先ほどコピーしたコードを貼り付けて、保存 をクリックします。

これでWebサイトを見ると、このようにFacebookページのタイムラインが表示されるようになりました。とても簡単です(^^)/

HTMLに貼り付けてもタイムラインは表示されます

WordPressサイトでなくても

こんな感じにコピーしたコードを貼り付けて　test.html　みたいな感じでHTMLファイルとして保存して、ブラウザで表示させれば、

こんな感じにちゃんとタイムラインが表示されます！このコードならどこにでも簡単に貼り付けることができます。

まとめと反省

まとめますが、FacebookページをWebサイトに貼り付けるには

1. ページプラグインを開く
2. 貼り付けたいFacebookページのURLを入力する
3. コードを取得をクリック
4. IFrameタブをクリックして表示されるコードをコピー
5. 好きなところに貼り付ける

という、超簡単な5ステップの手順だけでできることがわかりました。

今までずっとJavascript SDKを使う方法でしか貼り付けていませんでしたので、もっと手順が面倒でJavascriptを扱ったことがない方などにはハードルが高かったことと思います。自分でもiframeを使うこの方法があることに気がつかなくてすみませんでしたm(_ _)m。

大概の場合、簡単な方法と難しい方法がある場合は簡単な方法だと○○のときにうまくいかない、ということがあります。今回も

facebook埋め込み javascript iframe

で検索して、いくつかは問題があるみたいなことも書いてありましたが試してみたWebサイトではどこでも問題がないので「場合によって」うまくできないかも？です。やってみてうまく表示されれば、簡単なのでこちらの方法がいいのではないかと思います。

補足：ちょっと補足してみました

ちょっと書きたかったことで、本文に入れると煩雑かなーと思うことを注釈として書いてみました。

*1 このFacebookデベロッパーズページはFacebookにログインしていてなおかつFacebook開発者として登録をしていないと使えないかと思っていましたが、今回このページプラグインを作るにはログインすら必要ないということがわかり、驚愕しました。

*2 FacebookページのURL は、ページを見ているときの、

赤矢印の部分です。

[amazon_searchlink search=”facebook”]