【例あり】FacebookページをWEBサイトに埋め込む方法を紹介!

【例あり】FacebookページをWEBサイトに埋め込む方法を紹介!

FacebookページをWEBサイトやブログに埋め込む方法について紹介します。実際の例を用いて、FacebookページのタイムラインをWEBサイトに埋め込む方法を順番に解説します。Facebookページの埋め込みは簡単に出来ますので、ぜひお試しください。


目次[非表示]

  1. FacebookページをWEBサイトに埋め込みたい
  2. 【例あり】FacebookページをWEBサイトに埋め込む方法
  3. はみ出る場合はレスポンシブにして埋め込む

FacebookページをWEBサイトに埋め込みたい

WEBサイトやブログは色々な方が見てくれるけどFacebookはあまり見てもらえていない、Facebookに「いいね」をたくさんつけて欲しい・・・という方におすすめなのがWEBサイトやブログにFacebookのタイムラインを埋め込むという方法です。

実際にブログにFacebookのタイムラインを埋め込んだ例
これが実際にブログにFacebookのタイムラインを埋め込んだ画像です。

タイムラインをブログに埋め込むことでFacebookを更新するとブログに埋め込んでいるFacebookのタイムラインも更新されます。

でもFacebookのタイムラインをWEBサイトやブログに埋め込むのは難しそう・・・と悩んでいる方もいらっしゃると思います。

ご安心ください、簡単にできます。今回はFacebookページをWEBサイトに埋め込む方法を解説します。

【例あり】FacebookページをWEBサイトに埋め込む方法

それではFacebookページをWEBサイトに埋め込む方法を解説します。

1.コードを取得する

まずはFacebookのタイムラインを貼るためにコードを取得する必要があります。コードは「ページプラグイン」から取得します。下記のリンクから「ページプラグイン」を開いてください。

ページプラグイン
「FacebookページのURL」にFacebookのアドレスを入力
「ページプラグイン」が開いたら「FacebookページのURL」にFacebookのアドレスを入力します。

この時Facebookにログインしてなくてもアドレスさえ分かれば問題ありません。
Facebookのアドレスを入力したらどんな風に表示されるかレビューが表示
Facebookのアドレスを入力したらどんな風に表示されるかレビューが表示されます。

レビューの下にある「コードを取得」をクリックしてください。
コードが記載されている画面が表示されるので「IFrame」をクリック
するとコードが記載されている画面が表示されるので「IFrame」をクリックします。
「IFrame」が開いたらそこに書いているコードをコピーし、WEBサイトやブログに貼りつけ
「IFrame」が開いたらそこに書いているコードをコピーし、WEBサイトやブログに貼ります。

2.WEBサイトやブログ

実際にはてなブログに貼っていきたいと思います。

はてなブログの投稿画面を開き上のタブから「HTML編集」をリックして先ほど取得したコードを貼る
はてなブログの投稿画面を開き上のタブから「HTML編集」をクリックして先ほど取得したコードを貼ります。
FacebookページをWEBサイトに埋め込むことができました
後は通常通りタイトルや文章を入れて投稿すればFacebookページをWEBサイトに埋め込むことができました。

WordPressにFacebookのタイムラインを埋め込むには「外観」>「ウィジェット」の順にクリックしていきます。

「ウィジェット」が開いたら「テキスト」をクリックし貼りたい場所を

  • サイドバー
  • コンテンツ下1
  • コンテンツ下2
の中から選択し「ウィジェットを追加」をクリックします。

「タイトル」に好きなタイトルを入れ「内容」に先ほどコピーしたコードを貼り付けてください。後は「保存」をクリックすれば投稿されます。

3.コードが作成できなかった場合

あれ?「ページプラグイン」でコードが作成しようと思ったらFacebookページがレビューに表示されない・・・というケースがあります。

実は公開範囲、国別制限、年齢制限の3つのうちどれか1つでも制限をかけているとFacebookページは表示されません。

Facebookの「設定」を開き「一般」の公開範囲、国別制限、年齢制限を確認
Facebookの「設定」を開き「一般」の公開範囲、国別制限、年齢制限を確認してください。

公開範囲が「このページは公開されています」国別制限、年齢制限が「誰でも見ることができます」になっているか確認してください。

もしなっていない場合は、右にある「編集する」をクリックして設定を変更してください。

国別制限は「日本」に設定しても駄目なの?と疑問に思うユーザーの方もいらっしゃいますが駄目です。

年齢制限も17歳以上、18歳以上、19歳以上と制限できますが、どの制限を選んでも表示されませんので注意してください。

はみ出る場合はレスポンシブにして埋め込む

折角Facebookページを貼ったのに、はみ出てしまっては見た目的に良くありません。そんな時に便利なのがレスポンシブです。レスポンシブの設定方法なんて分からない・・・という方にも「ページプラグイン」には簡単に設定する方法があります。

コードを作る時「plugin containerの幅に合わせる」にチェック
コードを作る時「plugin containerの幅に合わせる」にチェックをいれてください。これだけでレスポンシブになります。

ただ始め読み込んだ大きさに調整されるので、例えば携帯を横にしても縦の時に読み込んだままの大きさに表示されるので注意してください。


関連記事