ブログにFacebook Like Box(ライクボックス)を設置する方法

ブログにFacebook Like Box(ライクボックス)を設置する方法

ブログ開設と同時に作成したFacebookページ。なかなかアクセスが増えず困っておりました。同じ境遇の方もいらっしゃるでしょうか?

そんなとき発見したのがFacebookプラグインの「Like Box」。こいつをブログに設置すれば自然とFacebookページへ誘導できるって寸法です。

というわけで今回は、ブログにLike Box(ライクボックス)を設置する方法をご紹介:)

※Like Boxを設置するにはあらかじめFacebookページを作成しておく必要があります。

SPONSORED LINK

Like Boxを作成する

まずは以下のサイトにアクセスします。

Like Box(公式サイト)

Like Box詳細設定

ここに細かい設定をしていきます。

Facebook Page URL
FacebookページのURLを入力します。
Width

Like Boxの幅(px)を指定します。

未設定の場合300pxが自動で設定されます。

※Simpleテンプレートを利用中でサイドバーに表示したい人は250pxと設定しましょう。

Height

Like Boxの高さ(px)を指定します。

表示する項目によって高さは自動で変わるので、未設定のままでOKです。

Color Scheme

Like Boxのデザイン(テーマ)を選択します。

明るいテーマ"light"と暗いテーマ"dark"から選びます。

Show Friends' Faces

いいね!してくれた人の顔写真を表示するか選択します。

チェック:表示する

未チェック:表示しない

Show Header

LikeBoxの一番上にある「Facebookもチェック」を表示するか選択します。

チェック:表示する

未チェック:表示しない

Show Posts

Facebookページに投稿された最新記事を表示するか選択します。

チェック:表示する

未チェック:表示しない

Show Border

Like Boxの外側にある枠線を表示するか選択します。

チェック:表示する

未チェック:表示しない

プレビュー確認どコードを取得

下にプレビューが表示されるので問題なければ「Get Code」をクリック。

コードをコピー

「IFRAME」を選択し、表示されたコードをコピーします。

Bloggerに設置する

Like Boxをサイドバーに表示する

「レイアウト」→サイドバー一番上の「ガジェットを追加」をクリック

Blogger管理画面より「レイアウト」→サイドバー一番上の「ガジェットを追加」をクリック。

「HTML/JavaScript」をクリック

一覧の中から「HTML/JavaScript」をクリック

「HTML/JavaScript の設定」画面に設定をする!

ここに細かい設定をしていきます。

タイトル

Like Boxの上に表示する文字を入力します。

何も表示しない場合は空のままでOKです。

コンテンツ
入力エリアの右上が「リッチテキスト形式」となっている状態で、先ほどコピーしたコードを張り付けます。

最後に「保存」をクリックし完了!

表示位置を変更するにはドラッグ

Like Boxの表示位置を変更したい場合は「レイアウト」画面でガジェットを上下にドラッグして移動し、最後に「配置を保存」をクリックすれば簡単に変更できます。

Like Boxを記事の下に表示する

「テンプレート」→「HTML の編集」をクリック!

Blogger管理画面より「テンプレート」→「HTML の編集」をクリック。

ここに貼り付けます!

ソースの中から<b:if cond='data:post.hasJumpLink'>を検索。

その上に先ほどコピーしたコードを貼り付けます。

ただし、このままだとトップページと個別ページ両方に表示されてしまうので、個別ページだけ表示したければ張り付けたコードをこんな感じで囲います。

<b:if cond='data:blog.pageType == "item"'>
張り付けたコード
</b:if>

完成系はこれ!

完成版はこんな感じ!

「テンプレートを保存」をクリック

最後に「テンプレートを保存」をクリックして完了!

まとめ

というわけで、Facebookプラグインの「Like Box(ライクボックス)」を設置する方法のご紹介でした!

まだブログに設置されていなかった方はぜひお試しあれ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)