Facebookのページプラグインの設置方法 – ホームページに簡単表示!

Facebookページプラグインの設置方法

Facebookページの内容を自分のホームページやブログに簡単に表示させることができる「ページプラグイン」をご存知ですか? 2015年6月頃まではライクボックスと言う名前だった、Facebook公式のいわゆるブログパーツやウィジットと言われているものです。

よくウェブサイトのフッターに表示されているのを見たことがあると思います。Facebookページのタイムラインに投稿したものが文章と写真付きで表示される非常に便利なブログパーツです。

わざわざホームページにお知らせやニュース機能を付けるよりも、Facebookページのタイムラインに投稿して、この「ページプラグイン」を貼り付けておけば、ちょっとした内容ならOKです。例えば、レストランやお店の場合、休業日や新商品入荷のお知らせだったらFacebookの「ページプラグイン」で用が足りるのではないでしょうか?

Facebookのページプラグインの設定

まずはFacebookのページプラグインにアクセスします。そうすると以下のような画面になると思います。

Facebook ページプラグイン

FacebookページのURL

まずは表示させたいFacebookページのURLを入力する
FacebookページのURLを入力

タブ

タイムライン、イベント、メッセージの3種類のタブを表示することができます。複数表示したい場合は、timeline,events,messagesのようにコンマで区切ります。

Facebookページプラグインのタブ設定

埋め込んだ時の表示させたい幅を入力します。表示可能な幅は180~500ピクセルです。

Facebookのページプラグイン幅設定

高さ

埋め込んだ時の表示させたい高さを入力します。最低70ピクセル必要です。

Facebookページプラグインの高さ設定

表示オプション

  1. スモールヘッダーを使用
    ヘッダーの高さが低くなります。
  2. plugin containerの幅に合わせる
    幅が可変するようなレスポンシブデザインの場合は、ティックをいれます。
  3. カバー写真を非表示にする
    シンプルなデザインにしたい場合は、カバー写真を非表示にします。
  4. 友達の顔を表示する
    Facebookページにいいね!をしてくれた人のプロフィール写真が表示されます。

Facebookページプラグインの表示オプション

Facebookのページプラグインの設置方法

左下の「コード取得」ボタンを押します。
コード取得ボタン

HTMLコードが理解できる人向け

ステップ2のコード

ダイアログが表示されますので、まずStep2のコードをコピーして、表示したいウェブサイトのページのHTMLソース内の<body>タグの直後に貼り付けます。理想としては、<body>タグの直後となっているので、次のステップ3と一まとめにしてもOKです。

FacebookページプラグインのコードStep2

ステップ3のコード

次にステップ3のコードをコピーして、表示したいHTMLのソース内に貼り付けます。

ステップ3のコード

コード内のソースが理解できる方は、属性なども直接変更可能です。詳しい属性については、https://developers.facebook.com/docs/plugins/page-pluginをご覧ください。

WordPressや無料ブログに設置したい方

FacebookページプラグインをWordpressや無料ブログに設置する場合は、先ほどのステップ2とステップ3のコードを一つにまとめて、ウィジットやプラグインに貼り付けるだけです。

WordPressの場合だと、ウィジット > テキスト で一まとめにしたコードを貼り付けて保存するだけです。無料ブログなども同様に、コードを貼り付ければOKです。

インラインフレームで設置したい方

HTMLの知識があまりない方には、インラインフレームでの設置も可能です。ダイアログが開いたら、インラインフレームのタブを選択すると、コードが表示されますので、コピーして貼り付けるだけです!

インラインフレームのコード取得

まとめ

Facebookページの内容をウェブサイトやブログに掲載できる「ページプラグイン」の設置方法は意外と簡単なので、是非チャレンジしてみてください。Facebookページを有効活用してウェブマーケティングやアクセスアップに役立てましょう!

ニュージーランドのオークランドに2002年より在住。フリーランスのグラフィックデザイナー。ウェブ制作から印刷物全般デザイン、写真撮影など幅広く行っています。

全世界からのお仕事の依頼を承ります。ホームページ制作、フリーランスのグラフィックデザイナーをお探しなら:Cloud 9 Worksへ!

Webデザイナーのパートナー(外注)スタッフをお探しの、Web制作会社さま・Webシステム会社さま・広告代理店さまからのお問い合わせもお待ちしております。

お見積もり・お問い合わせ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする