Facebookページプラグインの設定方法を説明します。ホームページをソーシャルメディアと連携させるには「いいね！」ボタンが一般的ですが、今回紹介するウィジェット型のプラグインはさらに連携を強めるために導入すると考えるといいでしょう。
Facebookページプラグインをホームページに設置する事で、Facebookユーザーに対してアプローチする事ができます。Facebookページにはユーザーグループを作れる機能も追加され積極的に活用している人もいるんじゃないでしょうか。ユーザーはホームページから離れる事なくいいねやシェアが可能になりますので、Facebookページを有効活用している方や、これからしていきたい方はにはもってこいの機能です。
この記事は前提としてFacebookページをすでに持っている方が対象になります。
公式サイトへのリンクは一番下にあります。
この記事は加筆修正し再掲載したものになります。
ページプラグインの設定方法
Facebookにログインした状態で上記サイトにアクセスします。ログインしなくても設定ができるようになっていました。
以前はFacebookページのURLや「Width」「Height」「Show Friend’s Faces」入力欄が全て英語だったのですが、現在は日本語対応になっています。
必要箇所に入力及びチェックをつけ、「コードを取得」ボタンを押すとホームページへの貼り付けコードが取得できます。
必要な入力箇所は下の画像の通りです。さほど難しくはありません。チェックを入れたり外したりする事で、下にプレビューが表示されるのでホームページに設定した際に反映されるイメージもわかりやすいです。
FacebookページのURLを入力
まずは事前に設定してあるFacebookページのURLを入力します。正しく入力された場合、下のプレビューが切り替わります。
タブを入力する
タブはページプラグインに出力する情報を変更するためのパラメーターのことです。この値を変える事で表示される内容が変わります。timeline,events,messagesのようにまとめて設定することもできます。
タイムライン、メッセージ、イベントを指定できます。
- timeline：タイムラインが表示されます。デフォルト設定。
- messages：設置したウィジェットからFacebookページへメッセージが送信できるようになります。ユーザーはログインが必要になります。
- events：イベントに参加のボタンが表示されます。イベントのフィールドが表示されます。
以上を英語で入力してください。
幅
幅180pxから500pxまでの範囲で指定する事ができます。
高さ
高さ70pxから500pxまでの範囲でしてする事ができます。
スモールヘッダーを利用
スモールヘッダーを利用すると高さの狭いヘッダー画像に変わります。シェアボタンが非表示になります。コンパクトに表示させたい場合に使うといいでしょう。
カバー写真の非表示
そのままの意味です。カバー写真を設定していない場合はチェックを入れるといいでしょう。
plugin containerの幅に合わせる
これはページプラグインを包み込みコンテナのことです。ここにチェックを入れると最大幅と最大高さの範囲内で、可変します。レスポンシブWebデザインを採用しているサイトが多いと思いますので、チェックを入れておきましょう。最大幅が500pxなのでそれ以上大きく表示されることはありませんが、500px以下になった時可変してくれますので、はみ出すことはなくなります。
友達の顔を表示する
フォローしているユーザーを表示します。
ホームページに設定する方法
上記の内容を設定してプレビューが表示されますので、よければ「コードを取得」ボタンでコードを取得します。
JavaScript SDKで貼り付ける場合
①上部のコードをbodyタグの直後に設置します。
ページプラグインを表示させたい全ページの<body>のすぐ後に貼り付けます。
②下部のコードをページプラグインを表示したい場所に設置します。
以上コピペで貼り付ければ、表示されるようになります。
ただし、WordPressなどを利用している場合は他のソーシャルメディア出力系のプラグインと競合する可能性もあります。
iframe対応のページプラグインを貼り付ける場合
初心者の方はこちらの方が簡単に設置できます。「コード取得」ボタンを押した後に「iframe」を選択します。そして表示されているコードをコピーし、ホームページ内の設置したい場所に貼り付けるだけです。
WordPressを利用している場合
ちなみに、有名なプラグイン「WP social bookmarking light」を利用している場合はbody直後に①のコードが出力されますので、②のコードを表示したい場所に設置すれば表示されます。
WP social bookmarking light は改善されているようですので、body直後にコードを貼り付けてください。
そのほかのソーシャル連携プラグインで、自動的に出力されることもある為、チェックしてみることをお勧めします。
公式サイト：Facebookページプラグイン
以上「Facebookページプラグインの設定方法」でした。
