Facebookページをブログ（ワードプレスなど）に埋め込みする方法、超簡単な手順を図解！
Facebookを自分のブログに埋め込み、つまり表示させる方法について、私が実施したことをまとめます。
Facebookをブログの記事やサイドバーに埋め込むって、よく見かけたりしますね。
埋め込みすると、ブログの訪問者さんたちにクリックして外部に行ったり、また戻ってきたリする手間をかけなくて済むので便利。
※記事内への埋め込みでは、こんな感じですね。
。
また、埋め込み元の画像を使いたい時も、この方法なら著作権の心配をしなくてすむ、というメリットもあります。
覚えておくと便利ですので、まだ実施したことのない方もトライするといいですよ＾＾
Facebookページをブログに埋め込む手順
今回、私のワードプレスでは花火大会の記事の終盤に、実行委員会の公式フェイスブックのタイムラインを埋め込んでみました。
このブログもそうですが、記事やサイドバーにフェイスブックを埋め込むって、実は簡単だったんです
これなら、最新投稿だけでなく、右サイドのスクロールバーを使うと、過去の投稿まで見ることができます。
パソコンでもスマホでも、タブやウィンドウを開いたり閉じたりの手間がかかりません＾＾
その手順とは
埋め込みたいページのURLをコピーしておく
埋め込みたいフェイスブックページにアクセスして、アドレスバーに表示されたURLをコピーします。
この時、コピーコードをメモ帳に貼り付けておくと便利ですよ。
Facebookのページプラグインにアクセスする
次のリンクをクリックして、ページプラグインにアクセスします
（この時、ご自身のフェイスブックにログインしている必要はないようです）
次の画面が開きます
デフォルトでは、FacebookページURL欄には、フェイスブックのトップページURLが表示されています。
その右の「タブ」欄には、「timeline」と表示されています。
ページURLを入力する
「FacebookページURL」欄に、埋め込みたいページのURLを入力、またはペーストします
下方に、フェイスブックのプレビューが表示されます
※ここでオプションとして、表示されるフェイスブック部分の高さや幅、お友達の表示非表示などがカスタマイズできます
埋め込みコードを取得する
次に、プレビュー左下の「コードを取得」をクリックします。
次の画面がポップアップします
ここで一番簡単な方法は、「IFrame」タグを利用することです。
その手順は
画面左上の2つのタブからIFrameタブを選択、クリックします。
次の画面に移ります。
ここで表示されたコードを、コピーして
ブログの目的の場所に貼り付けます。
（私は前もって、Facebookディベロッパーのページにアクセスしてアプリを作成しましたが、必要ないようです）
埋め込みコードを貼り付ける
ブログの新規記事作成画面を開きます。
・ワードプレスの場合
投稿画面をビジュアルモードではなく、テキストモードにします。
Facebookを埋め込みたい場所に、コードをペーストします。
投稿画面をビジュアルモードに変えると、埋め込んだフェイスブックが表示されます。
これで埋め込みは終了しました。
心配でしたら、記事のプレビューでも確認しましょう。
あとは記事を公開するだけです。
アメブロ、ライブドアブログに埋め込む場合
投稿画面をHTMLモードにして、埋め込みコードをペーストします。
シーサーブログ、はてなブログ、ソネットブログに埋め込む場合
シーサーやはてなでは、デフォルトでhtmlタグが表示される形です。
なのでそのままの画面で、コードをペーストしてください。
Facebookをブログのサイドバーに表示させたい
ワードプレスの場合は、自由な書き込みができる、テキストウェジェットを使用します。
テキストウィジェットへの埋め込み方は
左メニューの【外観】⇒【ウィジェット】
ウィジェット一覧から、【テキスト】を選択
ウィジェットをサイドバーの任意の位置にドラッグする
テキストウィジェットをダブルクリックすると、入力画面が開きます。
そこに埋め込みコードを貼り付けます。
ウィジェットのタイトルは、自分でわかるものを付けておきましょう。
無料ブログの場合
それぞれ、名前は違いますがブログパーツを使います。
アメブロではフリープラグイン
ライブドアブログでは、ブログパーツの内、フリースペース
シーサーでは、自由形式
FC2では、ブログパーツ⇒フリープラグイン
と呼ばれています。
それぞれの貼り付け方について詳しくは、また後の機会にご説明か、この記事に追加しますね。
