Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

  • Facebookのタイムラインをブログに埋め込む方法が知りたい!
  • Facebookプロフィール?それともFacebookページ?
  • Facebookページをブログに埋め込むとどんなメリットがあるの?

『ブログ上にもFacebookタイムラインが埋め込めるらしい!?』といったことが巷で言われていますが、厳密に言うと『Facebookページの内容であれば、ブログに埋め込むことができます。』

Facebookを活用して あなたの活動をより多くの方に知ってもらいたかったり、Facebookページをビジネスの後方に使っている方には非常にオススメです。

ポイント

Facebookページの『タイムライン』や『いいね!』ボタンは、ブログのウィジェットやブログ記事本文にも埋め込むことができます。

今回は私が実際に埋め込んでいるFacebookページの見え方やブログ記事本文にFacebookページのタイムラインを表示させていきます。

また、今回お伝えしていく内容はWordPressでブログ運営されていることを前提でお伝えしていきますから、Woredpress以外でブログ運営されている方は参考程度にしてみてください。

記事は下に続きます。
スポンサードリンク

Facebookページをブログ記事に埋め込む方法

『facebook for deveploers』へアクセス

まずは『facebook for developers』というサイトへアクセスします。

チェック ⇒  facebook for developersはコチラです。

アプリIDを作成

リンク先へ移動すると、コチラのような画面が表示されます。

まずはブログに埋め込みたいFacebookページを管理しているFacebookアカウントでログインします。

右上に表示されている青色の『ログイン』というボタンをクリックします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

Facebookアカウントでのログインが完了すると、『ログイン』と表示されていた部分が『マイアプリ』と表示が切り替わります。

その部分をクリックすると、メニューが表示されるので『新しいアプリを追加』というボタンをクリックします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

続いて、アプリの『表示名・連絡先メールアドレス・カテゴリ』を設定していきます。

『表示名』はあなたしか確認することはできませんから、判別しやすい名称を設定しておいてください。

また、『カテゴリ』はFacebookページの内容とマッチするものを選択しておきます。

すべての項目の設定が完了したらが、右下に表示されている『アプリIDを作成してください』というボタン区をクリックします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

そうすると、新規作成されたアプリのIDが作成されて設定画面へ移動します。

まずは左に表示されている『ダッシュボード』頭囲項目をクリックしてください。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

そうすると、以下のような新しいアプリの基本情報を確認することができます。

この中に『アプリID』が表示されています。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

プラグインの設定&コードの取得

続いては、Facebookページを埋め込むためのプラグイン設定とコードの取得を行っていきます。

まずはこちらのリンクにアクセスしてください。

そうすると、以下のようなページに移動するので『製品に関するドキュメント』という項目に表示されている『ソーシャルプラグイン』という項目をクリックします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

ソーシャルプラグインの画面に移動すると、『ページプラグイン』という項目があるのでクリックします。
Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

そうすると、Facebookページの埋め込み方をカスタマイズする画面に移動します。

この画面上で埋め込みの幅や高さなどを変更することもできますし、カバー写真の表示・非表示といった詳細設定までまとめて行えます。

 

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

さらに、修正内容は画面内でリアルタイムにプレビューを確認しながら設定ができてとても便利です。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

しっくり来るデザインや幅・高さが設定できたら、画面左下に表示されている『コードを取得』というボタンをクリックします。

そうすると、以下のようにhtmlコードが表示されます。

JavascriptとiFrameという2種類の方式でコードを取得できますが、WordPressブログの場合には『iFrame』の方を選びましょう。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

WordPressブログでタイムラインを埋め込みたいブログ記事の編集画面を開いたら、テキストウィジェットであることを確認して先ほどコピーしたhtmlコードをペーストします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み
そうすると、このようにFacebookページをブログ記事内に埋め込むことができます。


Facebookページをウィジェットに埋め込む方法

続いては、FacebookページをWordpressブログのウィジェットに埋め込む方法について分かりやすく解説していきます。
ポイント

ウィジェットにFacebookページを埋め込むためには、Wordpressプラグイン『Facebook Page Plugin』というものを使います。

『Facebook Page Plugin』をインストール

まずはプラグインメニューの『新規追加』をクリックします。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

そして、検索窓に『Facebook Page Plugin』と入力して検索すると、以下のようなアイコンのプラグインを見つけることができます。

このプラグインをインストールして有効化すると、ウィジェット設定画面から『Facebook Page Plugin』という項目をサブコンテンツなどに追加できるようになります。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

あとは、サブコンテンツに追加してからPage URLや幅、高さなどを先ほどと同じ要領で設定していけば完了です。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

そうすると、以下のようにブログのウィジェット部分にFacebookページを表示させることができました。

Facebookタイムライン, ブログ, 埋め込む方法, 埋め込み

最後に

今回のブログ記事では、私が実際に埋め込んでいるFacebookページの見え方やブログ記事本文にFacebookページのタイムラインを表示させるほう法について分かりやすく解説していきました。
ポイント

今回お伝えしていく内容はWordPressでブログ運営されていることを前提でお伝えしていきますから、Woredpress以外でブログ運営されている方は参考程度にしてみてください。

ただし、個人Facebookアカウントのタイムラインなどは表示させることはできないので注意してください。

Facebookを活用して あなたの活動をより多くの方に知ってもらいたかったり、Facebookページをビジネスの後方に使っている方には非常にオススメですから、ぜひ実践してみてください。