Facebook Like ボックスウィジェットをJetpackを利用して表示する

2014/01/28 2014/11/22

Facebook™ページをブログなどで紹介すると時にはウィジェットを利用すると便利です。
WordPressを利用してブログなどに関連したFacebookページを紹介することができます。

はじめに

Facebookのページは私はこれまで利用していませんでした。
ブログなどのコンテンツの主題が明確で、興味を持ってもらえそうなサイトを運営しているなら、
Facebookのページを利用すると、
さまざまな人にブログを通じてFacebookページにいいね！してもらうことができるようになります。

環境

WordPress: 3.7.1
JetPack: 2.5

2014/01/21現在のJetPackバージョンは2.7ですが、
以下の相性の問題がありましたので、2.5を採用しています。
JetPackのカスタムCSSエディタのACE Code Editorが表示されない場合

利用方法

Facebook Like ボックスウィジェットを利用するには、JetPackを有効化する必要があります。

詳細は以下でご紹介しています。
23.追加ウィジェット－Jetpack by WordPress.com

JetPackを有効化し、追加ウィジェットの機能を有効にすると、
[外観]-[ウィジェット]を選択して「ウィジェット」を表示します。

ウィジェットの使用できるウィジェットのエリアに対して、
「Facebook Like ボックス(JetPack)」が表示されます。

Facebook Likeウィジェットの表示

表示されているウィジェットをサイドバーなどの表示したいエリアに対してドラッグします。

ウィジェットの配置

ドラッグしたウィジェットを編集し設定を行います。

Facebook Like ボックス (Jetpack)

Facebook Like ボックスの概要は以下の通りです。

Facebook ページに読者を誘導する Facebook Like ボックスを表示

Like Box は Facebook ページ専用です。

追加されたウィジェット設定

ウィジェット内に記載されている通り、このウィジェットはFacebookページ専用です。
Facebookページ以外のプロフィールページなどにはリンクできません。

Facebookページの作成方法は以下でご紹介しています。
Facebook™ページの作成方法

今回リンクしているFacebookページは以下のようなテストページです。
技術屋サンドボックス | Facebook

設定

設定項目を順を追って記載します。

タイトル

タイトルではウィジェットのタイトルを指定します。
入力した文字がウィジェットの上部に表示されます。

FacebookページURL

ウィジェットに表示するFacebookページのURLを指定します。
私の場合、https://www.facebook.com/algorhythnnjp　と設定しています。

タイトルとFacebookページのみを設定しウィジェットを表示すると以下のように表示されます。

Likeウィジェット最小構成

幅・高さ

幅と高さは指定したサイズで表示されます。
適宜、表示する項目に合わせてサイズ調整を行いますが、
表示する項目を追加したような場合には、自動で収まるサイズへ修正されます。

配色

配色はライトカラー、ダークカラーから選択できます。

配色設定

顔写真を表示

顔写真を表示を選択すると、Facebookページに割り当てられている
写真、ロゴなどを表示できるはずですが、
以下のように、「友達よりも先に技術屋サンドボックスに「いいね！」しましょう。」が表示されます。

顔写真表示設定

ストリームを表示

ストリームを表示を選択すると、Facebookページに投稿した内容が表示されます。

ストリーム表示設定

ボーダーを表示

ボーダーを表示に関してはウィジェットの周囲にラインが入りますが、
この設定を行っただけでは表示されません。

このボーダーを表示と同時に「顔写真を表示」または「ストリームを表示」が有効である必要があります。

ボーダー表示

ウォールを表示

この設定についてはどうしても有効な状態を確認することができませんでした。
ウィジェットには以下のように記載されています。

友達のアクティビティではなく場所のページのウォールを表示

場所ページなどの紹介などに利用するような感じですが、
一般的に公開されている場所ページなどをリンクしても表示できませんでした。

ご存知の方がおられましたらコメントなどで教えてください。

さいごに

Facebook Like ボックスウィジェットのご紹介は以上です。

Facebookページを作成している必要はありますが、
ブログなどを多くの人に評価してもらえるFacebookページを作成し、
Like ボックスで表示することで、より多くの人の共感を感じることができるでしょう。

参考

Facebook Like Box Widget — Jetpack for WordPress

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。

FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの登録商標です。
登録番号は以下の通りです。
第５０３５５５５号、第５０６２３４４号、第５０６２３４４号防護第１号、第５０８６４２５号
第５１５００５１号、第５４８７９５９号、第５５７６７０９号、第５５８６７５１号
FacebookおよびFacebookロゴは、
フェイスブック・インコーポレイテッドの国際登録商標(１０７５０９４)です。