Bloggerの記事の最後にPage Plugin(Facebookページのいいね!)を設置する方法

おすすめ記事ピックアップ


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の要素の検証
http://www.furimuke.com/2014/03/google-chrome-htmlcss.html
記事の最後に表示されている何かしらのコードを見つけます。そのコードをHTMLの編集で検索をして、記事末のエリアを見つけ出すなどしましょう。個人的には付近の「div class」で探す方法が良いと思います。

ほかには「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 == &quot;item&quot;'>

<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;
}



おしまい。下記が実際の設置例です。いいねと思ったらいいねしてくれたらいいね!



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Bloggerの記事の最後にPage Plugin(Facebookページのいいね!)を設置する方法
Bloggerの記事の最後にPage Plugin(Facebookページのいいね!)を設置する方法
Bloggerの記事の最後にFacebookページのいいね!(Page Plugin)を設置する方法を説明します。記事を読んだあとに、気に入った人がいいね!をすることで、Facebookのファンを増やすことができます。 Like Boxは2015年に廃止されてPage Pluginになりました。
http://1.bp.blogspot.com/-jd5IEgh3O4M/VizhINnhzSI/AAAAAAAAfiE/FuRiqwKT0Lw/s640/GREEN_iine2-thumb-1000xauto-18642.jpg
http://1.bp.blogspot.com/-jd5IEgh3O4M/VizhINnhzSI/AAAAAAAAfiE/FuRiqwKT0Lw/s72-c/GREEN_iine2-thumb-1000xauto-18642.jpg
ふりむけばコウホウ
http://www.furimuke.com/2015/10/facebook-likebox-blogger.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/10/facebook-likebox-blogger.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy