サイト名を「ブログチップス」から「マーケのじかん」に変更しました(2018.12.6)

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

  • 2019年4月3日
  • 2019年4月3日
  • facebook

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

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

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

広告

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

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

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です。お疲れさまでした。

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える

【2019年版】Facebookページをサイトに埋め込む3つの手順を解説
最新情報をチェックしよう!
広告