Home / ネットワーク・IT / SNS / Facebook / Facebookのタイムラインを自分のウェブサイトに埋め込みする方法

Facebookのタイムラインを自分のウェブサイトに埋め込みする方法

※本ページにはプロモーション(広告)が含まれています

その次は https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP のページに直接飛びます。

Facebook Page URLは自分のもの Widthと言う横幅とHeghtと言う縦幅は300が妥当のようなので、両方とも「300」で記入します。そして「Get Code」と書かれた青いボタンをクリックします。すると2つに分かれて妙な英文が出ますが、これが「Page Plugin」コードです。

ちなみに上のコードはWebページで言うタグの中にコピペして下さい。下のコードはつまりボタンそのもの。自分のWebページの表示したい場所に入れて下さい。これで、あなたのWebページに自分のFacebookの投稿が現れるはずです。

実際にコードを埋め込んでみよう

カスタマイズできる内容

カスタマイズ

  • 幅・高さ
  • タブ
  • 表示オプション

幅・高さ

「幅・高さ」ではタイムラインのサイズを指定できます。

幅は180~500px、高さは70pxからとなっています。設置予定の空間と相談しつつ決めると良いでしょう。

タブ

「タブ」は「timeline」「events」「messages」を入力することができます。

3つとも入力する場合はタイムライン、イベント、メッセージを簡単にタブ切り替えできるようになります。

サイト訪問者がサイト上からFacebookアカウントにメッセージを送ることも可能になるため、非常に利便性が高い機能となっています。

タイムラインだけを利用する場合は「timeline」のままで大丈夫です。複数使いたい場合はカンマ(,)で区切って入力を行ってください。

例:「timeline,events」

表示オプション

4つの「表示オプション」が用意されています。

表示オプション

  • スモールヘッダーを使用:ヘッダーの高さが低くなり、よりコンパクトになる
  • plugin containerの幅に合わせる:自動的に横幅を調整する機能。レスポンシブに対応
  • カバー写真を非表示にする:カバー写真を非表示にする
  • 友達の顔を表示する「いいね!」した友達のプロフィール写真を表示する

これらのカスタマイズはプレビュー画面にリアルタイムに反映されています。どのような変化があるのかチェックしながら行うとより分かりやすいと思います。

「JavaScript SDK」と「IFrame」

全ての入力を終えて コードを取得 をクリックすると サイトへ埋め込むためのコード が発行されます。この時「JavaScript SDK」と「IFrame」の二つが提供されます。

使用するのはどちらか一方となっており、機能的な差はありません。埋め込む際の手順に若干の違いがありますので詳細は次項で詳しく解説いたします。

WordPressの場合

それでは実際に埋め込む方法を見ていきましょう。まずはWordPressの場合からです。

WordPress

  1. WordPressサイト編集画面を開く
  2. 左側のメニューから ウィジェット をクリック
  3. ウィジェットを追加 をクリック
  4. テキスト をクリック
  5. タブを ビジュアル から テキスト に変更する
  6. テキストボックスに発行されたコードを貼り付ける

「JavaScript SDK」の場合はコードを二つ。「IFrame」の場合はコード一つを貼り付けるようにしてください。

以上でWordPressへのタイムライン埋め込みは完了です!実際に埋め込みされているか確認してみましょう。

ホームページの場合

続けてホームページの場合です。htmlに直接埋め込んでいく方法を見ていきましょう。

JavaScriptSDK

  1. 一つ目のコードを の直後に貼り付け
  2. 二つ目のコードをタイムラインを表示したい位置に貼り付け

IFrame

  1. コードをタイムラインを表示したい位置に貼り付け

以上となります!IFrameならワンステップで完了してしまうので問題ないようならIFrameの方が便利そうですね。

自分を積極的にアピールできます。

文章にすると長いですが、簡単なことが伝わったと思います。この方法を通してこれからもっと積極的に自分をアピールする方法を学べば良いのではないでしょうか?

1 2

Check Also

Facebookのプロフィール写真の変更をタイムラインに表示させない方法

プロフィール画像を更新すると、 …