ブログにFacebookのLikeBox（Page Plugin）を設置する方法

今回はブログにFacebookのLike Boxを設置する手順について説明していきます。一応今回はWordPressとseesaaブログ、アメブロでの設置方法ね。

このfacebookのLike Boxは2015年6月23日で廃止されるようで、「Page Plugin」への移行してね！って感じの事が書いてあるので、現在Like Boxを設置している場合にはコードを変更する必要がありそうです。

実際にこのブログでも現在Twitterのウィジェットと一緒に並べて「Page Plugin」を表示させてみました。

Facebookページを作成したらFacebookページの宣伝が必要なのでブログにこの「Page Plugin」を設置しておく事をおすすめします。

新しくなった「Page Plugin」は以前の「Like Box」とほとんど同じような感じですが、注意点としては横幅のサイズが「280pxから500pxまで」という事になっている点ですね。

Page Pluginの設置方法

まずはFacebook DevelopersのPage Pluginのページへ移動。
⇒Facebook DevelopersのPage Pluginのページ

移動できたらちょっと下にスクロールして入力フォームを探して、自分のFacebookページのURLや横幅とかを入力。私の場合は高さは特に指定していません。

横幅についてはこの「Page Plugin」をどこに設置するかをよく考えておく必要があります。候補としては「サイドバー」もしくは「記事下」。もしサイドバーに設置するのであればサイドバーの幅に合わせる必要があるので、事前にサイドバーの幅を確認しておきましょう。記事下も同じ。

それで先ほどの入力フォームの所に3箇所選択できる部分があります。

• Show Friend’s Faces:友達の顔を表示する？
• Hide Cover Photo:Facebookページに設定したカバー写真を隠す？
• Show Page Posts:Facebookページの投稿も表示する？

という感じなのでこれはお好みで設定して下さい。

設定ができたら下にある「Get Code」ボタンをクリック。

するとコードが2種類表示されます。

説明によると上の1番目のコードをHTMLの「body」タグの直後に設置して、2番めのコードを表示させたい場所に設置するという解説になっています。

ただ、1番目のコードに関しては「body」タグ直後でなくても「body内」であれば機能はするようです。一応説明通りにやっておいた方が無難な気がします。

とりあえずこの２つのコードをメモ帳等にコピペしておいて、ここからは各ブログでの設置方法を紹介していきます。ちょっと長くなるのでナビを用意しておきます。特にSeesaaブログは「旧システム」と「新デザインシステム」でやり方がちょっと違うので注意。

• WordPressにPage Pluginを設置する場合はここをクリック
• Seesaaブログ（新デザインシステム）にPage Pluginを設置する場合はここをクリック
• seesaaブログ（旧デザインシステム）にPage Pluginを設置する場合はここをクリック
• アメブロにPage Pluginを設置する場合はここをクリック

WordPressにPage Pluginを設置

それではWordPressにPage Pluginを設置していきましょう。まずは先ほど取得した1番目のコードを「body」タグの直後に設置します。WordPressの場合はテーマによって若干違う部分もあるかもしれませんが、多くの場合は「header.php」に「body」タグがあります。

それとテーマによっては既に1番目のコードがどこかに設置されているテーマもあるので、「header.php」とか「footer.php」を一応確認してみた方がいいかも。旧コードなら書き直しが必要です。

とりあえず「body」タグの下に1番目のコードを入れます。私の場合（Twenty Twelve）ではこんな感じになりました。

これで1番目のコードの設置はOK。変更を保存しておきます。続いてPage Pluginを表示させたい場所に2番めのコードを設置します。

WordPressのサイドバーに設置する場合

サイドバーに表示させたい場合はWordPressの管理画面から外観⇒「ウェイジェット」と進みサイドバーに「テキスト」を追加。Page Pluginのサイズはサイドバーの横幅に合わせたコードを取得しておきましょう。

後はテキストの中身に先ほど取得した2番目のコードを入れて保存したらOK。

WordPressの記事下に設置する場合

続いて記事下に表示させる場合ですが、これはテーマによってかなり違うため説明ができないので省略。一般的には「single.php」に設置しているブログが多いのかな？でもせっかくなんでこのブログ（テーマはTwenty Twelve）の場合での解説をしておきます。

このブログの場合は取得した２番目のコードを「single.php」ではなくて「content.php」と「content-page.php」に設置してます。

「content.php」には「もし個別ページなら」という条件分岐も一応いれています。

<?php if ( is_single() ) : ?>

<div class="fb-box">
ここに取得した2番目のコード
</div>

<?php endif; ?>

「div class=”fb-box”」で囲っているのは後でCSSで位置調整するためにこの部分に名前を付けておきました。これを「content.php」のこのコードの「直前」に入れています。

</div><!-- .entry-content -->

こんな感じになってます。

「content-page.php（固定ページテンプレート）」の方は条件分岐が要らないのでdivで囲った2番めのコードをそのまま追加。追加する場所はこのコードの直前。

</div><!-- .entry-content -->

こんな感じになります。

後はCSSで位置調整等ができますのでCSSでちょっと位置調整をしてみましょう。

Page Pluginの位置調整

先ほど設置したPage Pluginには「div class=”fb-box”」と名前を付けておいたので、こんな感じで位置調整ができます。CSSの一番下に追加すればOK。（中央寄せにする場合）

.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

それからこのブログでやっているようにTwitterウィジェットと横並びにしたい場合はもうちょっと複雑。

Twitterウィジェットと横並びにする場合

先に設置する部分の横幅を調べおいて、「Page Plugin」の横幅をその半分くらいで作成しコードを作成しておきます。それとTwitterのウィジェットのコードを取得しておきます。

Twitterのウィジェットの高さは「250px」で作成。Twitterウィジェットの作成方法はこの記事で以前解説してます。
⇒Twitterのタイムラインをサイドバーに表示する方法

両方のコードを取得できたら、「content.php」と「content-page.php」に追加したコードを書き直します。

「content.php」はこんな感じに書き直し。

<?php if ( is_single() ) : ?>
<div class="sns-box">
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<div class="tt">
ここにTwitterウィジェットのコード
</div>
</div>
<?php endif; ?>

「content-page.php」はこんな感じに書き直し。

<div class="sns-box">
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<div class="tt">
ここにTwitterウィジェットのコード
</div>
</div>

後はCSSで横並びになるようにする。

@media screen and (min-width: 600px) {
.fb-box {
  float: left;  /* 横並び */
  display: block;
  margin-right: 10px;  /* Twitterウィジェットとの間の間隔 */
  height: 250px;  /* Page Pluginの高さ */
  background: #f6f7f8;  /* 背景色 */
}
.tt {
  width:239px;  /* Twitterウィジェットの横幅 */
  float: left;  /* 横並び */
  display: block;
}
.sns-box:after{  /* float（横並び）解除のお約束記述 */
content:"";
display:block;
clear:both;}
}

最後の行が隠れているかも？最後までスクロールしてコピーね。Twitterウィジェットの横幅の部分は自分のブログの幅と相談しながら変更しておくこと。

これで横並びにならない場合はTwitterウィジェットの横幅の部分を小さくするかPage Pluginの横幅を修正してコードを書き換えるかして横幅に合うようにしておけば大丈夫です。

以上WordPressにPage Pluginを設置する方法。ついでにこちらの記事もどうぞ。

• ⇒WordPressカスタマイズまとめ　Check!
• ⇒WordPressでおすすめのプラグインまとめ　Check!

シーサーブログにPage Pluginを設置する【旧デザインシステム版】

それではシーサーブログの旧デザインシステムにPage Pluginを設置してみましょう。自分のブログが新、旧どちらのシステムか分からない場合には画像を比べて見ると分かると思います。管理画面とか違う部分が多いので。

先に大まかな手順だけ書いておきます。

Page Plugin設置のために取得したコードは2種類あります。1番目（上）のコードと2番目（下）のコードね。

これを踏まえて作業手順を書いておくとこんな感じ。

• 2番目のコードをサイドバーもしくは記事下に設置
• スマートフォン用にも設置
• 最後に位置調整

本当は所得した1番目（上）のタグをHTMLの「body」直後に貼り付ける必要がありますが、seesaaブログ（旧システム）のPCページの場合はこの1番目のタグは無くても作動します。多分「いいねボタン」とか元々付いているので1番目のコードは追加しないくても大丈夫っぽいです。

もし設置後に上手く表示されない場合にはデザイン⇒HTMLと進み、HTMLの「body」タグの直後に1番目のコードを入れて試してね。

シーサーブログの場合はPCページとスマートフォンページが別々なんでそれぞれに設置する必要があるのでその点は注意。それではそれぞれ順番にやってみましょう。

シーサーブログのサイドバーにPage Plugin設置する場合【旧デザインシステム版】

サイドバーにPage Pluginを設置するにはサイドバーの横幅を考えておく必要があります。Page Pluginの最小幅が280pxなので280px以上は必要。サイドバーの幅を変更したいという場合には先にサイドバーの横幅を変更しておくといいかも。
⇒シーサーブログのコンテンツやサイドバーの幅を変更するカスタマイズ

さて、話を戻してサイドバーに設置する場合にはシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに自由形式を追加。

自由形式を追加したら「自由形式」をクリックして中身を編集。ここに取得した2番目のコードを入れて「保存」。後で位置調整できるように「div」で囲って名前を付けておきました。

<div class="fb-box-side">
ここに取得した2番目のコード
</div>

こんな感じ。

「保存」できたらこの自由形式の画面は閉じてコンテンツ一覧画面に戻ります。戻ったら念のため再度「保存」。

これでサイドバーに表示されているはずです。それから自由形式にタイトルを付けて表示させたい（Facebookページです！的な）という場合にはこの記事を参考に。
⇒シーサーブログの自由形式にタイトルを表示させる方法

タイトル部分を表示させてこんな感じにもできます。

シーサーブログの記事下にPage Plugin設置する場合【旧システム】

今度は記事下にもPage Pluginを設置していきます。個別記事とトップページの記事下にそれぞれ設置してみます。

先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「コンテンツ」と進み「記事」をクリック。

「記事」をクリックして「コンテンツHTML編集」をクリック。

HTMLが書いてある画面になるので「Ctrl」キーを押しながらアルファベットの「F」を押して検索窓を出現させ、<% if:blog.bookmark_service %>という部分（ソーシャルボタンのコード）を検索してみます。

もし、検索できない場合はタグのハイライトを無効にしてから検索。

するとこのようなコードがあります。

<% if:blog.bookmark_service %>
<div class="bookmark" data-url="<% article.page_url %>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip | html %>"></div>
<% /if %>

これがソーシャルボタンのコードです。設置する場所はソーシャルボタンの下に付けたいので、先ほどのコードの直後に次のコードを追加。

<% if:page_name eq 'article' -%>
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<% /if %>

ここでは「もし個別記事なら」という条件分岐タグと後で位置調整するために「fb-box」という名前を付けています。できたら一度「保存」して「記事」の画面を閉じ、コンテンツ一覧の画面に戻るので再度「保存」。追加したコードはこんな感じ。

それで個別記事の記事下には設置した「Page Plugin」がSNSボタンの下に表示されているはずです。位置調整は後ほど。

続いてトップページの下にも設置します。今度は管理画面から「デザイン」⇒「HTML」と進み、適応中のHTMLを選択。

HTMLの一番下の方にフッターを出力するコードがあります。

<div id="footer">

これがフッターの始まり部分なのでこのコードの下に次のコードを追加。

<% if:page_name eq 'index' -%>
<div class="fb-box-top">
ここに2番目のコードを入れる
</div>
<% /if -%>

先ほど個別記事の下に「もし個別記事なら」という条件分岐で広告を設置したので、今度は「もしトップページなら」という条件分岐。これで保存。これでトップページの一番下（フッター）に設置が完了。位置調整は最後にまとめて書きます。

シーサーブログのスマートフォンページにもPage Pluginを設置【旧システム版】

残りはスマートフォンページ。PCページで設置してもスマートフォンページには反映されないのでスマートフォンページにも設置が必要。

シーサーブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリック。

スマートフォンのコンテンツの中から「記事」をクリック。

挿入テキスト（下部）の「+」をクリック。

開いたテキスト入力部分にPage Plugin設置の「1番目のコード」と「2番目のコード」を両方入れます。

スマートフォンページではHTMLが編集できないので、「body」直前に入れる1番目のコードを入れる事ができないため、ここに２つのコードを両方入れます。

2番目のコードだけでも作動する場合がありますが、時々トップページに表示されない場合があるので、２つのコードを両方ここに入れておきます。

完了したら「保存」を忘れずに。これでスマートフォンページのトップページ、個別ページ両方記事下にPage Pluginが設置できているはずなので、確認しておくこと。

確認する場合にはキャッシュ（以前のデータ）が残っているかもしれないので、再読み込みしてから確認。

Page Pluginの位置調整【旧システム版】

最後に位置調整をしておきます。一応色々なパターンがあると思いますが、簡単な位置調整だけしておきます。

/* サイドバーに設置したPage Plugin */
.fb-box-side{
  text-align:center;  /* 中央寄せ */
  margin-top:10px;  /* 上に余白 */
  margin-bottom:10px;  /* 下に余白 */
}

/* 個別記事に設置したPage Plugin */
.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

/* トップページに設置したPage Plugin */
.fb-box-top{
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

以上でシーサーブログ（旧システム）にPage Pluginの設置が完了。

SeesaaブログにPage Plugin設置【新デザインシステム版】

ここからはSeesaaブログの新デザインシステム版の説明です。

Page Plugin設置のために取得したコードは2種類あります。1番目（上）のコードと2番目（下）のコードね。

これを踏まえて作業手順を書いておくとこんな感じです。

• １番目のコードをHTMLの「body」の直後に追加
• 2番目のコードをサイドバーもしくは記事下に設置
• スマートフォン用にも設置
• 最後に位置調整

シーサーブログの場合はPCページとスマートフォンページが別々なんでそれぞれに設置する必要があるのでその点は注意。それではそれぞれ順番にやってみましょう。

まず、新デザインシステムの場合はまず１番目のコードをHTMLの「body」直下に入れる必要があります。Seesaaブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザイン」をクリックして、「HTMLの編集」のタブを選択。

HTMLの最初の方（デフォルトなら14行目付近）に「body」というタグがあるので、これの直後に1番目のコードを入れます。

これで保存したら準備はOK。後は設置したい場所にコードを入れていきましょう。

シーサーブログのサイドバーにPage Plugin設置する場合【新デザインシステム】

まずはSeesaaブログの管理画面から「デザイン」⇒「コンテンツ」と進み、サイドバーに「自由形式」を追加。

自由形式の歯車のようなマークをクリックすると自由形式の編集ができるので、自由形式の編集部分に次のコードを入れます。

<div class="fb-box-side">
ここに取得した2番目のコード
</div>

こんな感じになるので保存してね。

「保存」できたらこの自由形式の画面は閉じてコンテンツ一覧画面に戻ります。戻ったら念のため再度「保存」。これでサイドバーに表示されているはずです。

それから自由形式にタイトルを付けて表示させたい（Facebookページです！的な）という場合にはこの記事を参考に。
⇒Seesaaブログの自由形式にタイトルを表示させる方法【新システム】

タイトル部分を表示させてこんな感じにもできます。

シーサーブログの記事下にPage Pluginを設置する場合【新システム】

今度は記事下にもPage Pluginを設置していきます。個別記事とトップページの記事下にそれぞれ設置してみるよ。

先ほどと同じようにシーサーブログの管理画面から「デザイン」⇒「デザイン設定」⇒「適応中のデザイン」をクリックして、「HTMLの編集」のタブを選択。

デフォルト(初期状態)のままならHTMLの97行目付近（デザインによって違うかも？）に次のようなコードがあります。

<% if:blog.bookmark_service -%>
<div class="bookmark" data-url="<% article.page_url -%>" data-subject="<% article.subject | remove_emoji | nl2br | tag_strip -%>"></div>
<% /if -%>

これがソーシャルボタンのコードね。設置する場所はソーシャルボタンの下に付けたいので、先ほどのコードの直後に次のコードを追加。

<% if:page_name eq 'article' -%>
<div class="fb-box">
ここに「Page Plugin」の2番目のコード
</div>
<% /if %>

できたら一度「保存」して「記事」の画面を閉じ、コンテンツ一覧の画面に戻るので再度「保存」。追加したコードはこんな感じ。

それで個別記事の記事下には設置した「Page Plugin」がSNSボタンの下に表示されているはず。位置調整は後ほど。

続いてトップページの下にも設置します。

これも同じように「HTML編集」のタブから一番下の方にスクロールして行って次のコードを探します。最後の方にあるよ。

<footer role="contentinfo" class="l-footer">
		<% parts_50 | mark_raw -%>
		<div class="footer">

これがブログのフッター部分の始まりの部分なので、このコードの後（下）に次のコードを追加。

<% if:page_name eq 'index' -%>
<div class="fb-box-top">
ここに2番目のコードを入れる
</div>
<% /if -%>

先ほど個別記事の下に「もし個別記事なら」という条件分岐で広告を設置したので、今度は「もしトップページなら」という条件分岐。これで保存。

これでトップページの一番下（フッター）に設置が完了。位置調整は最後にまとめて書きます。

SeesaaブログのスマートフォンページにPage Pluginを設置【新システム】

Seesaaブログの管理画面から「デザイン」⇒「スマートフォン」⇒「コンテンツ」の順番にクリックし、「記事下」という部分に「自由形式」をドラッグ&ドロップ。

自由形式を追加したら歯車マークをクリック。

テキスト入力部分にPage Plugin設置の「1番目のコード」と「2番目のコード」を両方入れます。スマートフォンページではHTMLが編集できないので、「body」直前に入れる1番目のコードを入れる事ができないため、ここに２つのコードを両方入れます。

2番目のコードだけでも作動する場合がありますが、時々トップページに表示されない場合があるので、２つのコードを両方ここに入れています。

完了したら「保存」。それで自由形式の画面は閉じ、コンテンツ一覧の画面に戻るので再度保存。

これでスマートフォンページのトップページ、個別ページ両方記事下にPage Pluginが設置できているはずなので、確認しておきましょう。

確認する場合にはキャッシュ（以前のデータ）が残っているかもしれないので、ブログを表示させてから「Ctrl」と「F5」を押して再読み込みしてから確認。

Page Pluginの位置調整【新デザイン】

最後に位置調整をしておきます。一応色々なパターンがあると思いますが、簡単な位置調整だけしておきます。

「スタイルシートの編集」に切り替えて一番下の次のコードを追加。数値などはお好みで変更してね。

/* サイドバーに設置したPage Plugin */
.fb-box-side{
  text-align:center;  /* 中央寄せ */
  margin-top:10px;  /* 上に余白 */
  margin-bottom:10px;  /* 下に余白 */
}

/* 個別記事に設置したPage Plugin */
.fb-box{
  text-align:center;  /* 中央寄せ */
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

/* トップページに設置したPage Plugin */
.fb-box-top{
  margin-top:20px;  /* 上に余白 */
  margin-bottom:20px;  /* 下に余白 */
}

以上でシーサーブログ（新デザインシステム）にPage Pluginの設置が完了です。次の記事もどうぞ。

• ⇒Seesaaブログカスタマイズまとめ【新デザインシステム】　Check!
• ⇒アフィリエイトで稼ぐ方法（目次）　Check!

アメブロにPage Pluginを設置する方法

アメブロにPage Pluginを設置していきます。先に注意点を書いておくと、FacebookのPage Pluginは最小幅が「280px」になっているので、サイドバー等に貼り付ける場合にはサイドバーのサイズが最低でも280px必要です。

そのため3カラムのテンプレート等では広い方（300px）のサイドバーに貼り付けをするようにする必要があります。

アメブロのサイドバーにPage Pluginを設置する

まずはアメブロのマイページから右上のメニューボタン「三」みたいなマークをクリックして「基本設定」へ進みます。

「基本設定」の中の項目の「共有ボタンの表示」が「表示する」になっている事を確認。これが「表示する」にしていれば取得したPage Pluginのコードの1番目は不要です。

サイドバーから説明します。アメブロに追加する場合は「マイページ」右上のメニューボタン「三」みたいなマークをクリックして「プラグインの追加」をクリック。

プラグインの追加というページになるので「フリープラグイン」をクリックしてここに取得した2番目のコードをこんな感じで入れます。

<div class="skinMenuHeader">
<span class="skinMenuTitle">更新情報はこちらから</span></div>
ここに取得した2番目のコードを入れる
</div>

「更新情報はこちらから」のテキスト部分は好きな言葉に変更して使って下さい。

それで「新たにプラグインの追加をした方→サイドバーに配置してください。設定はこちら」という表示がでるので「こちら」という部分のリンクをクリック。

それでコードを追加したフリープラグインをサイドバーの好きな位置に移動させれば完了。

本当は記事下にも入れたいと思っていましたが、新しいPage Pluginはなかなか上手く表示できないので保留。もしできたら追記していこうと思います。
⇒Facebookページの作成と連携まとめページに戻る