ホームページ制作

【とっても簡単!】Facebookをサイトに埋め込む方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
Facebookを利用する人

Facebookをサイト内に埋め込むためには

個人はもちろん、今では多くの企業もFacebookページを運用しています。WEBサイト/Facebookと別々に運用するのではなく、Facebookのタイムライン(投稿)をWebサイトに貼り付けることで、Facebookページの「いいね!」を増やしたり、Facebookページだけで発信している情報をWebサイト上でも見てもらうことができるので宣伝・集客には有効です。

Facebookページをサイトに埋め込むために、Facebookが非常に簡単に埋め込めるようにしてくれています。今回はそのやり方をご紹介します。

Facebook developers

Facebook Page Plugin(ページプラグイン)

まず、Facebookページをサイトに貼り付けるためには、貼り付け用のコードを取得する必要があります。
Facebook Page Plugin(ページプラグイン)というページへアクセスします。Facebook developersという、本来はFacebookアプリを開発する人向けのサービスなんですが、その中にサイトへ埋め込むための機能も備わっています。アプリを開発するためにはFacebook developersに登録をしなければいけませんが、ページプラグインの利用であれば、登録の必要もありません。また、Facebookにログインしていない状態でも使用することができます。

アクセスしたページで少しスクロールしていくと…

Facebook Page Plugin2

上記のような画面が表示されます。この項目を入力していくだけで、サイトに表示される部分を決定できます。

  • FacebookページのURL:表示したいFacebookページのURLを記載
  • タブ:Facebookページのタイムラインを表示(空白で非表示)
  • 幅:横幅を設定します(180px〜500px)
  • 高さ:横幅を設定します(70px)

まずは左上の「FacebookページのURL」に自分(自社)のFacebookページのURLを入力します。もし自分のFacebookページのURLがわからないという場合は以下の画像を参考にしてください。

Facebook Page Plugin3

このURLが自分のFacebookページのURLです。

URLを入力すると、下の欄にそのページを埋め込むと、どのように見えるかがプレビューされるのでわかりやすいですね。。
あとは「タイムラインを表示するのか」「サイトに表示する際の幅や高さ」を設定していきます。入力欄に文字や数字を入れていくとしたのプレビュー画面も変わっていくので、自分のサイトにどのように表示させたいかを決めていってください。

4つの入力欄に入力し終わったら、次の①〜④の項目を決めていきます。

①スモールヘッダーを使用

チェックをいれないと、通常の表示ですが、

FacebookページプラグインーUse Small Header

チェック入れると、少し小さくなります。

FacebookページプラグインーUse Small Header2

②plugin containerの幅に合わせる

親要素の横幅(width)に合わせて可変しますので、基本的にはチェックをいれたままでOKです。

③カバー写真を非表示にする

チェックを入れると、ヘッダーカバーの背景が白色になります。

FacebookページプラグインーUse Small Header2

④友達の顔を表示する

いいねをしてくれた人の写真を表示させるかどうかの選択します。

FacebookページプラグインーUse Small Header2

ここまで設定が終わったら、プレビュー画面左下にある『コードを取得』をクリックします。
クリックをすると、下図のような画面がポップアップ表示されます。
Facebookページプラグインーコードを取得ボタン

通常であれば、「ステップ2」のコードをbodyタグ内に記述し、Facebookページプラグインを表示させたい箇所に「ステップ3」のコードを記述すればいいのですが、WordPressではもっと簡単に埋め込むことができます。

WordPressに埋め込む方法

ウィジェットに貼り付ける

ほとんどの場合、Facebookを貼り付けるのはウィジェットを活用してサイドバーやフッターに表示させるかと思います。ウィジェットに表示させたい場合は、「テキスト」ウィジェットに「ステップ2」「ステップ3」の両方ともをペーストしてください。

Facebookページプラグインーテキストウィジェット

タイトルは入力しなくても構いません。
ここでは投稿ページのサイドバーに貼り付けてみました。実際のページを見てみると、

サイドバーにFacebookページ貼り付け

サイト内に埋め込みができました。

2017/6/27追記:WordPress本体のバージョンが4.8になりウィジェットの操作性が大きく変わりました。Ver.4.8のWordPressではテキストウィジェットにも投稿/固定ページの編集画面のようなビジュアルモードとテキストモードでの入力ができるようになりました。コードを貼り付ける際は必ず「テキストモード」にしてから貼り付けをしてください。

2017/6/20追記:新機能<iframe>タグ

この記事を書くために久しぶりにFacebook Page Plugin(ページプラグイン)のページへいったのですが、新しい埋め込み方法が追加されていましたのでご紹介させていただきます。

Googleのサービス(マップやカレンダーなど)を埋め込むときにも使用されている<iframe>タグでの埋め込みが出来るようになっています。

<iframe>タグ

先程のやり方だと、2つのコードを貼り付けなければいけませんでしたが、これは1つだけです。サイドバーやフッターにウィジェットを使って表示させる場合は、先程と同様に「テキストウィジェット」の「テキストモード」で貼り付けてあげれば同じように表示されます。

2つコードを貼り付けるやり方は、SNSのリンクボタンのように、すべての記事のページ内に表示させる場合は有効ですが、”サイドバーに表示されていればいい”とか、”フッターに設置できればいい”のであれば、<iframe>を使ったやり方の方がシンプルでよさそうですね。

※2017/6/20の追記ですが、以前利用してからかなりの日数アクセスをしていなかったので、この機能がいつ実装されたのかは定かではありません。

まとめ

以上が自分(自社)のサイトへFacebookページを埋め込む方法です。
そう難しくはないと思いますので、Facebookをはじめ各種SNSを上手く使ってビジネスチャンスを広げていただくきっかけになれば幸いです。

ぜひご活用ください!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る