3分で出来る!WebサイトにFacebookページを表示させる方法!

スポンサーリンク

どうも、つぶまめ(@tsubutsubumame2)です。

ブログをやり始めたばかりの方で「Facebookページを表示させられたらいいなあ」と思っていらっしゃる方は多いと思います。

かくいう僕もそうでした^^;

今回は『当ブログを立ち上げる際に設定したことシリーズ』として、あなたのFacebookページをWebサイト内に貼り付ける方法をお伝えいたします。

調べてみると、めちゃくちゃ簡単で3分程度で完了したのでオススメです!

 

Facebookページを貼り付けるためのコードを取得しよう!

それでは、早速見ていきましょう。

Facebookページを実際に貼り付けてみると、このようになります。

 

このように表示させておくと、Facebookページが更新されればそれを表示してくれます。

一度表示させておけば、常にFacebook上の最新ページが表示されるという事ですね。

こちらを上手く活用することで、Facebookの「いいね!」を得ることができ、より多くのアクセス数を集めることが出来ます。

 

さて、こんなに便利なFacebookページのタイムラインを表示させるためには、貼りつけ用の特別なコードを手に入れる必要があります。

そのコードは、下記のページから取得が可能です。

→→ページプラグイン←←

※Internet ExplorerではなくChromeやMicrosoft Edgeで開いてください。理由は後述。

Safariでも問題ありません。

 

ページプラグインの使い方

上記のリンクから「ページプラグイン」に飛べましたか?

それでは続いて、下記の画像を見てください。

上記のリンクから飛んで下にスクロールすると、上記の画像のような項目が出てきます。

記入項目がありますので、それぞれを説明していきます。

 

  • FacebookページのURL
    • 読んで字のごとくですね。表示させたいFacebookページのURLを入力します。
  • タブ
    • この部分は「timeline」と表示されていると思うので、そのままでOKです。
    • 表示させるFacebookページの「横幅」を調節できます。
  • 高さ
    • 表示させるFacebookページの「縦幅」を調節できます。

 

これらの項目を記入していきましょう。

なお、下の画像はプレビュー画像の為、幅と高さの設定を変えるとどのように見えるのかがその場で反映されます。

めちゃくちゃ調整しやすいので、あなた好みの幅と高さに設定してみましょう。

ちなみに、ぼくのタイムラインは「幅:350」「高さ:610」で調整してあります。

良ければ参考にしてみてください。

 

コードを取得する際の注意点

さて、上記の数値を入力し終えたらコードの取得ボタンをクリックします。

すると、

というような画面が出てきます。

この画面が出てきたら、上部の「iFrame」というタブをクリックしましょう。

そうすることでHTMLタグが表示されます。

上述のChromeやMicrosoft Edgeで開く理由はここにあります。

Internet Explorerで開いた場合、ツールバー的なものが「iFrame」という部分に重なって選択することが出来ませんでした。

僕はMicrosoft Edgeで試したところ無事に表示されました。ご注意ください。

 

このように赤枠で囲われた部分に表示されているHTMLタグをコピーしましょう。

これで、後はあなたのWebサイト内のテキストエディタに上記で取得したコードを貼り付けるだけで、Facebookタイムラインが表示されるはずです。

 

まとめ

※僕が参考にしたのはこちらのサイトです。

→→超簡単だった!FacebookページをWebサイトに貼り付ける方法←←

byゆうそうとITブログ

 

上記の手順を踏むことで、あなたのWebサイト上に『常に最新情報を表示してくれるFacebookタイムライン』が表示されるようになります。

Twitterのタイムラインを表示させる方法についても書いておりますので、コチラの記事も併せてご覧ください!

→→【5分で出来る】超簡単にTwitterのタイムラインをブログ内に表示させる方法←←

スポンサーリンク