おすすめ記事ピックアップ
Bloggerの記事の最後にFacebookページのいいね！（Page Plugin）を設置する方法を説明します。記事を読んだあとに、気に入った人がいいね！をすることで、Facebookのファンを増やすことができます。記事の終わりに設置すると効果的です。
Like Boxは2015年に廃止されてPage Pluginになりました。Like BoxからPage Pluginに変更したい。BloggerでFacebookページのPage Pluginのコードがエラーが出て貼り付けできない。記事末に表示させたいけど分からない。という場合に参考ください。
ちょっとFacebookの機能説明
その前にFacebookの説明をします。Facebookには、個人が使っているFacebookと、Facebookページというファンサイトを作る機能があります。個人が実名で使う場合はFacebook（個人）を、ブログやメディアの運用にはFacebookページを使う感じです。少し機能が違います。参考：個人ページとFacebookページの違いとは？
http://www.function-t.com/facebook/s1.html
Facebookページのいいね！はフォローと同じ機能になります。いいね！をした人は、そのFacebookページのファンになり、ファンのニュースフィードにFacebookページへ投稿した内容が、 表示されるという仕組みです。
Facebookページのいいね！はTwitterのフォローみたいなものです。まぎらわしいことに、普段のいいね！とは、別のいいね！になります。わかりにくいいね！。さらにFacebook（個人）ではPage Pluginは使えません。
参考：Facebookページに「いいね！」することと、友達の投稿に「いいね！」することの違いは何ですか。
https://www.facebook.com/help/228578620490361
FacebookページをPage Pluginに
ブログやメディアの運用にはFacebookページを作り、フォロアーを集めるにはFacebookページのいいね！（Page Plugin等）を設定する必要があります。Facebookページのいいね！（Page Plugin等）の作り方は、Page Pluginページから、FacebookページのURLを入れて貼り付け用のコードが作れます。
こちらから作れます：Page Plugin
https://developers.facebook.com/docs/plugins/page-plugin
Page Pluginのタグは2箇所に設置
Page Pluginのタグは、2箇所に貼り付ける必要があります。最初に表示されるコードは、BloggerのHTML編集から＜BODY＞のタグの直後に。もう一つは、Page Pluginを表示したいところに貼り付けます。
Bloggerの場合、＜BODY＞と書かれている場合もありますが、多くは＜body expr ***********************************＞ といった書き方が多いかなと思います。ちょっと分かりづらいですよね。
＜BODY＞の直後に、一つ目のコードを貼り付けましょう。レイアウトからHTMLの編集に入り、該当箇所を検索して探しましょう。テンプレートごとに場所は異なります。いろいろ検索して探してみてください。「body expr」で検索してみるのがよいと思います。
そのままコードを貼り付けると、Bloggerではエラーが出て貼れません。下記サイトで変換して貼り付けましょう。Facebookのコードを貼り付けて変換できます。
参考：指定した文字を文字参照します。
http://furimuke.sub.jp/changemoji/
コードの追記や修正は、コメントアウト <!-- コメントアウト --> でメモをしておくと、あとでわかりやすいです。body直下に貼り付けます。
記事末はどこだ
記事末を見つけるのは、とても難しいです。Bloggerのテンプレートによって、場所はさまざまです。自分でどこが、該当のエリアか見つける必要があります。Chromeの要素の検証機能を使うと探しやすいでしょう。参考：Chromeの要素の検証記事の最後に表示されている何かしらのコードを見つけます。そのコードをHTMLの編集で検索をして、記事末のエリアを見つけ出すなどしましょう。個人的には付近の「div class」で探す方法が良いと思います。
http://www.furimuke.com/2014/03/google-chrome-htmlcss.html
ほかには「post-body」とか「data:post.body/」とかの付近にあったりします。テンプレートによって、様々なので、がんばって探してください。めぼしいところにaaa1 aaa2 aaa3 aaa4等の目印を入れて、実際に表示されるか検証してみるとよいでしょう。
該当箇所を見つけたら、そこにFacebookの2つ目のコードを設置しましょう。このコードは変換しなくても貼り付けできます。もちろん変換してもOKです。エラーが出たら変換しましょう。
注意点として、多くのテンプレートの場合、B ifコードを追記しないと全ページに表示されてしまいます。下記のようにB ifコードで挟んで記述しましょう。下記の黄色い部分をコピーペーストで使えます。
忍者ツールのおまとめボタンとかも一緒に設置するのもお勧めです。h2～h4などで見出しや、divタグで装飾しても良いでしょう。
<b:if cond='data:blog.pageType == "item"'> <h4>好きな言葉を入れてもよいでしょう。</h4> <div class="fb-page" data-href="https://www.facebook.com/********" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com*********"><a href="https://www.facebook.com/*********">ふりむけばコウホウ</a></blockquote></div></div> </b:if>
あとPage Pluginだと、横幅がうまくレスポンスしません。それを完璧に修正するには、JavaScriptとFacebook app IDが必要で超難しいのです。普通の人には無理です。私も無理です。そこで、はみ出した横幅を適当にカットしてくれるCSSでも追記しておきましょう。
下記どこからか参考にしたものですが、いまとなっては、出処がわかりません。
/*------------------------------------------------------
facebook 調整
------------------------------------------------------*/
.fb-like-box,.fb-like-box span,.fb-like-box iframe{
width:100% !important;
}
.fb_iframe_widget,.fb_iframe_widget span,.fb_iframe_widget iframe{
width:100% !important;
}
おしまい。下記が実際の設置例です。いいねと思ったらいいねしてくれたらいいね！
