【2019年版】Facebookページをサイトに埋め込む3つの手順を解説

【2019年版】Facebookページをサイトに埋め込む3つの手順を解説facebook

Facebookページをサイトに埋め込む手順は、以下の3つです。

  1. facebook for developers の「ページプラグイン」にアクセスする
  2. 埋め込むFacebookページの内容を設定する
  3. コードをサイトに埋め込む

一つずつ画像を交えながらお伝えしていきます。

1.facebook for developers の「ページプラグイン」にアクセスする

まず、facebook for developers の「ページプラグイン」というURLにアクセスします。

facebook for developers ページプラグインはコチラ

2.埋め込むFacebookページの内容を設定する

次に、サイトに埋め込むFacebookページの内容を設定していきます。

FacebookページのURL

サイトに埋め込むFacebookページのURLを入力します。

タブ

デフォルトでは「timeline」が入力されています。

ページ下のプレビューを見れば分かりますが、埋め込んだ際にFacebookページのタイムラインが表示されます。

タイムラインを表示したくない場合は、タブを空欄にしましょう。

タイムラインを表示にすると、サイトの表示速度がガッツリ遅くなる場合があります。

幅・高さ

埋め込むサイトの幅に合わせて調整しましょう。

幅に関しては、以下の「plugin containerの幅に合わせる」にチェックを入れることで、埋め込むスペースの幅に調整されます。

他、4つのチェック項目

  • スモールヘッダーを使用(より小さいヘッダーになります)
  • カバー写真を非表示にする
  • plugin containerの幅に合わせる(レスポンシブ対応になります)
  • 友達の顔を表示する

好みに合わせてチェックを入れましょう。

そしたら下にある「コードを取得」という青いボタンをクリックします。

3.コードをサイトに埋め込む

コードが載ったウィンドウが表示されます。

2019年4月現時点では、なぜかStep2が表示されていません。が、問題ないので気にしなくてOKです。

まず、Step1(上記画像だと①)に表示されているコードを、サイトの<body>タグの下に貼り付けます。

WordPressの場合、使っているテーマによって<body>の位置が異なります。WordPressダッシュボードの「外観」⇒「テーマの編集」から<body>が記載されているphpを探してみてください(たいてい「header.php」に<body>タグはあります)。

またダッシュボードから編集できない場合、ファイルマネージャーから該当phpを編集しましょう。

そしてStep3(上記画像だと②)に表示されているコードを、サイトに埋め込みたい箇所に貼り付けます。

以上です。実際の画面で確認してみましょう。

Facebookページを作成したばかりの場合、表示されるまでに時間がかかる場合があります。幅や高さなどが違和感なく表示されていたらOKです。

お疲れさまでした。

facebook
役に立ったらシェアお願いします!
マーケのじかんをフォローする
スポンサーリンク
ブログ運営者
コピーライター古川

東証マザーズ上場の株式会社トゥエンティーフォーセブンにて、2013年5月から2018年2月末までの約5年、コピーライター兼マーケッターとして経験を積み、その後に独立しました。セールスレター・LP30本以上、メルマガ・ステップメール1400本以上、SEO記事300本以上書いてきました。情報商材やサプリメント系物販、セミナー集客や英会話教室立上げ、オウンドメディアの立ち上げや運営など、企画・開発・販促・顧客対応など経験してます。現在は複数企業のメディアやメルマガなどのコンサルティングやお手伝いをしています。

マーケのじかんをフォローする
マーケのじかん
タイトルとURLをコピーしました