1. ホーム > 
  2. Webサイト集客 > 
  3. Facebookページの作成と運営 > 
  4. facebookページプラグイン(ライクボックス)の設定方法

facebookページプラグイン(ライクボックス)の設定方法

facebookページの情報をWebサイト上に表示するページプラグイン(旧:ライクボックス)の設定方法とWebサイトへの設置方法をご紹介します。ページプラグインでfacebookページをアピールしましょう!

  • 2015/9/6
  • 2012/5/3

右の画像のようなfacebookページの情報が掲載されたものを、見たことがあると思います。これは「ページプラグイン」(2015年6月23日以前はライクボックスプラグイン)と呼ばれているもので、facebookのデベロッパー向けサイトで作ることができます。

facebookページに「いいね!」をしてくれた人数や、facebookページに投稿した内容を表示することもできますので、Webサイトに訪問してくれたユーザーにfacebookページの存在をアピールする助けになります。

もちろんfacebookページがないと作れませんので、まだfacebookページを作っていない場合はfacebookページを作ろう!を参考に、facebookページの作成をしておきましょう。

ページプラグイン(旧:ライクボックスプラグイン)の設定

facebookのデベロッパー向けのサイトのページプラグインの設定ページにアクセスします。

facebookページの項目を設定して、プラグインのソースコードを取得します。
ページプラグインの設定ページでは、選択した設定に応じてサンプル表示が切り替わります。実際にどのような状態になるのかを確認しながら設定を進めていきましょう。

それでは、ページプラグインの各設定項目を詳しくご紹介します。

Facebook Page URL
自分のfacebookページのURLを入力します。

Width
LikeBokプラグインの横幅を決めます。180ピクセルから500ピクセルの間で幅を指定する時に値を入力します。500ピクセル以上のサイズを指定しても500ピクセルより幅を大きくする事はできません。

Height
LikeBoxプラグインの高さを設定します。標準状態だと空欄になっていて、この状態だと500ピクセルで表示されます。

Adapt to plugin container width
HTMLの親要素の幅によって横幅を可変させる場合にチェックを入れておきます。ただし、横幅の最大値である500ピクセル以上のサイズには大きくできません。

Show Friend’s Faces
チェックを入れておくと「いいね!」をした友達のプロフィール写真がサムネイルで表示されます。もしWebサイトに訪問してくれたユーザーの友達が、このfacebookページに「いいね!」をしている事が分かれば、そのWebサイトに訪問してくれた人も「いいね!」をしてくれるかもしれません。

Use Small Header
ページプラグインのヘッダー部分を、130ピクセルから70ピクセルまで縮小することができます。
スモールヘッダーを利用した場合、facebookページのシェアをするボタンが使えなくなります。よほどページの高さに制限がある場合を除いて、利用しない(チェックを入れない)方がいいでしょう。

Hide Cover Photo
facebookページのカバー画像をページプラグインに表示するかどうかの選択です。チェックを入れるとカバー画像が非表示になり、ヘッダー部分の背景が白になります。
これもよほどの事がない限りはチェックを入れないでいいでしょう。

Show Page Posts
ページプラグインにfacebookページヘの投稿を表示するかどうかを選択します。
facebookページの投稿をページプラグインに表示したくない場合は、このチェックを外してください。

ページプラグイン(旧:ライクボックスプラグイン)をWebサイトに設置する方法

必要な設定を済ませたら、「Get Codeボタン」をクリックすると、Webサイトにページプラグインを設置するためのソースコードが表示されます。

ウィンドウ上部に表示されたソースコードは、タグのすぐ後にコピー&ペーストして、ウィンドウ下部に表示されたソースコードは、ページプラグインを表示させたい場所にコピー&ペーストします。

▼ウィンドウ上部のソースコード設置例

<body>
<!-- bodyタグのすぐ後ろにコピーペーストします -->
<div id="fb-root"></div>
…(以下省略)

▼ウィンドウ下部のソースコード設置例

<div id="side">

<div class="fb-page" data-href="https://www.facebook.com/hp-guide" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/hp-guide"><a href="https://www.facebook.com/hp-guide">エルビーエルエブリー(lblevery)</a></blockquote></div></div>

ページプラグインは、Webサイトに訪問したユーザーに、運営しているfacebookページを告知するには最高のツールです。

Webサイト内のコンテンツやサービスを気に入ってもらい、facebookページを経由して日常的にゆるくでも繋がっていれば、Webサイトへの再訪や商品・サービスの購入へと繋がっていく可能性が高まります。

ページプラグインもぜひ活用していきましょう。

このページの情報は、記事を執筆した時点の情報です。facebook側の仕様の変更により、設定できる項目や数値の範囲が変更される可能性があります。

「役にたった」と思ったらシェアお願いします