FacebookページをWEBサイトに埋め込みたい
WEBサイトやブログは色々な方が見てくれるけどFacebookはあまり見てもらえていない、Facebookに「いいね」をたくさんつけて欲しい・・・という方におすすめなのがWEBサイトやブログにFacebookのタイムラインを埋め込むという方法です。
これが実際にブログにFacebookのタイムラインを埋め込んだ画像です。
タイムラインをブログに埋め込むことでFacebookを更新するとブログに埋め込んでいるFacebookのタイムラインも更新されます。
でもFacebookのタイムラインをWEBサイトやブログに埋め込むのは難しそう・・・と悩んでいる方もいらっしゃると思います。
ご安心ください、簡単にできます。今回はFacebookページをWEBサイトに埋め込む方法を解説します。
【例あり】FacebookページをWEBサイトに埋め込む方法
それではFacebookページをWEBサイトに埋め込む方法を解説します。
1.コードを取得する
まずはFacebookのタイムラインを貼るためにコードを取得する必要があります。コードは「ページプラグイン」から取得します。下記のリンクから「ページプラグイン」を開いてください。
「ページプラグイン」が開いたら「FacebookページのURL」にFacebookのアドレスを入力します。
この時Facebookにログインしてなくてもアドレスさえ分かれば問題ありません。
Facebookのアドレスを入力したらどんな風に表示されるかレビューが表示されます。
レビューの下にある「コードを取得」をクリックしてください。
するとコードが記載されている画面が表示されるので「IFrame」をクリックします。
「IFrame」が開いたらそこに書いているコードをコピーし、WEBサイトやブログに貼ります。
2.WEBサイトやブログ
実際にはてなブログに貼っていきたいと思います。
はてなブログの投稿画面を開き上のタブから「HTML編集」をクリックして先ほど取得したコードを貼ります。
後は通常通りタイトルや文章を入れて投稿すればFacebookページをWEBサイトに埋め込むことができました。
WordPressにFacebookのタイムラインを埋め込むには「外観」>「ウィジェット」の順にクリックしていきます。
「ウィジェット」が開いたら「テキスト」をクリックし貼りたい場所を
- サイドバー
- コンテンツ下1
- コンテンツ下2
「タイトル」に好きなタイトルを入れ「内容」に先ほどコピーしたコードを貼り付けてください。後は「保存」をクリックすれば投稿されます。
3.コードが作成できなかった場合
あれ？「ページプラグイン」でコードが作成しようと思ったらFacebookページがレビューに表示されない・・・というケースがあります。
実は公開範囲、国別制限、年齢制限の3つのうちどれか1つでも制限をかけているとFacebookページは表示されません。
Facebookの「設定」を開き「一般」の公開範囲、国別制限、年齢制限を確認してください。
公開範囲が「このページは公開されています」国別制限、年齢制限が「誰でも見ることができます」になっているか確認してください。
もしなっていない場合は、右にある「編集する」をクリックして設定を変更してください。
国別制限は「日本」に設定しても駄目なの？と疑問に思うユーザーの方もいらっしゃいますが駄目です。
年齢制限も17歳以上、18歳以上、19歳以上と制限できますが、どの制限を選んでも表示されませんので注意してください。
はみ出る場合はレスポンシブにして埋め込む
折角Facebookページを貼ったのに、はみ出てしまっては見た目的に良くありません。そんな時に便利なのがレスポンシブです。レスポンシブの設定方法なんて分からない・・・という方にも「ページプラグイン」には簡単に設定する方法があります。
コードを作る時「plugin containerの幅に合わせる」にチェックをいれてください。これだけでレスポンシブになります。
ただ始め読み込んだ大きさに調整されるので、例えば携帯を横にしても縦の時に読み込んだままの大きさに表示されるので注意してください。