必要な部分(青文字、赤文字)だけ読んでくださ～い♪(≧ω≦。)
「いいね！ボタン」の存在は、あちこちのサイトで見かけててんけど、
全然興味なかったし、Facebookも放置状態やってんけど
Facebookのファンページに、久しぶりに写真をアップしたら、「～さんが、いいね！と言ってます」て
メールが届いて、よう見ると20人ぐらいの人が、いいね！してくれてて
ありゃ！気付かんかった～！で、全員にありがとう♪したいけど、
どーしたらええねん！ってのがきっかけで
うちも「いいね！ボタン」付けよう♪と簡単にできるはずが・・・orz
Twitter のボタンなんかすぐできたから、簡単に考えてたのに、でけへんやん！(；´∀｀)
ちゅうことで、久しぶりにBloggerで悪戦苦闘や！
以前は、2カラムを3カラムにする方法で、めっちゃ大変やってんけど
今は普通に3カラムのテンプレートあるし、
その後、新たにブログを作るのに、あるもん使おう♪で、やってみたけど
どーも気に入らん！それと、これも悪戦苦闘したんやけど、カレンダーが設置でけへん！
設置しても崩れまくる！唯一chromeだけがきれいに表示された！
さすがGoogleやな(笑)
けど、Firefoxならまだしも、chromeなんか使てるの少ないやろうし・・
やっぱしIEがダントツやろな～ってことで、諦めて、
以前からのブログのテンプレートをそのまま使うことにした☆
諦めるのは悔しかったけど、検索しまくったし、某有名ブログにも質問してみたけど
スルーされてしもたし(;・∀・)
まぁ、以前からのブログスタイルが一番お気に入り♪やからええねん(゜∀゜ )
ちゅうことで、なんでこんな前置きが長いねん！
<(￣∇￣)ゞゴメリンコ～♪
ほな、本題の「いいね！」ボタンを設置するまでの経過と結果を☆
また長いんかよっ！(笑)
うん♪長い！長すぎ！もう読みたくないわいっ！(｀_´)
の人は、スルーして青文字、赤文字のとこだけどうぞ♪
「いいね！ボタン」と、OGPを設置してみたら・・・
「いいね！ボタン」は表示されてるのに、ポチッとしても、一瞬反応しただけで
1回もカウントされれへんやん！Σ＼(￣ー￣;)ナンデヤネン
ちゅうことで、検索しまくり！
『仕事にヒント』様サイトの「Facebookの「いいね！」ボタン設置で、はまる」 の記事にあった～♪
うちと全く同じ状態になるて書いてるし！「www」ありで取得したら、できた～♪
ちゃんとカウントされた━━━━ヽ(^∀^ )ノ━━━━♪
けど、この喜びは束の間(笑)
「いいね！」をポチッとして1カウントするけど、全記事に1カウントされてるやんorz
また再度検索しまくり！
色々試すけど、できひんし、大体Bloggerユーザーて、少ないんか分らんけど
検索で出てくるのは、殆どが他のブログ。
Bloggerは少ないん違て、うちみたいに四苦八苦せんでも、みんな使いこなせてるんかも？
そもそも、なんで個別にできひんかが分らん。
「いいね！」の設置方法がアカンのか、OGPの設置が悪いんか・・
で、『仕事にヒント』様サイトの管理人さんなら、うちと同じ不具合もあったし、
何か原因を教えてもらえるかとメールで質問させていただいた。
管理人の池田様より返信をいただいたんやけど、
Bloggerだからかも？ってことで、参考サイト『SE奮闘記』をご紹介していただきました。
池田様、ありがとうございます♪
このサイトにリンクされてた『CURRENTBLIPS』
の Facebook Open Graph protocol For bloggerのタグを丸々コピペしてみた。
これで大丈夫やろ♪と思たけど、やっぱしアカンorz
(´ε｀；)ｳｰﾝ…かれこれ何日掛かってるねん！
もうブログを弄り始めると何も手に付かん！
検索しまくって、やっと辿り着いた『iKnowHow』 様サイトの
「Facebook いいねボタンを設置」を発見♪
同じBloggerやし、今度こそは！と、
うちが記述してた「いいね！ボタン」のタグは、(<は半角で)
＜iframe src="http://www.facebook.com/plugins/like.php?app_id=xxxxxxx&href=http%3A%2F%2Fwww17enjoylife.blogspot.com%2F&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:450px; height:21px;" allowTransparency="true"＞＜/iframe＞
やってんけど、『iKnowHow』様の記述を参考に"+ data:post.url + "を追加して
＜iframe allowTransparency='true' frameborder='0' scrolling='no'
src='http://www.facebook.com/plugins/like.php?app_id=xxxxxxx&href="
+ data:post.url +
"&layout=button_count&width=450&show_faces=false&action=like&colorscheme=light&font&height=21'
style='border:none; overflow:hidden; width:450px; height:21px;'/＞
としてみたけど、やっぱし個別記事にならん！
なんか、カウントが918とかになってるし！Σ(゜Д゜；)アラマッ
やっぱし、OGPの設置が原因なんやろか？
それとも、いいね！ボタンの設置が原因か？
どっちも原因？もう原因すら分からんから(分からんからでけへんねんけど(;・∀・))
『iKnowHow』様サイトの管理人様にメールで質問させていただいた。
管理人のdottore.emmett様より、メールが届いた♪
もう神様的存在の方で、ちゃんと設置できるまで、何度もメールをいただいて
無事に個別記事に設置することができた( ^ω^ )
『Bloggerヘルプのレイアウト データ タグ』
を紹介していただいて、＜iframe ～～ expr:src=" ...＞というふうに、
expr:が必要ということもメールで教えていただき
さらに、以下青文字部分は、dottore.emmett様よりいただいたメールをコピペ
【うまくいかない原因】
exprとする場合、JavaScriptなどに近い形にする必要があり、
リテラル（固定文字列）を"で括って、+で連結させます。
「リテラル① + data:post.url + リテラル②」みたいな形になります。
リテラル①： "http://www.facebook.com/plugins/like.php?app_id=xxxxxxx&"
リテラル②：
"&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21"
また、expr:xxxの後はダブルクォートではなく、シングルクォートにしなければなりません。
上記説明と共に、タグも記述してくれてあって
＜iframe expr:src='"http://www.facebook.com/plugins/like.php?app_id=xxxxxxx&href=" + data:post.url + "&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21"' scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:450px; height:21px;" allowTransparency="true"＞＜/iframe＞
できた━━━━ヽ（＾∀＾ ）ノ━━━━♪
もう、嬉しくて嬉しくて、dottore.emmett様には、感謝・感激♪でした～( ^ω^ )
上記コピペは、実はまだちゃんと理解できてないんですけど、
こういうときは、こうしなさいよということだと受け止めないと
アホなうちの頭ではついていけまへん(;･∀･)
それから、「コメント欄」を設定してたんやけど、「いいね！」がちゃんとできるまで
とりあえず外してあったから、元に戻してコメントも設置した！
(￣□￣;)!!ガーン(￣▽￣;)!!ゴーン(￣○￣;)!!ギーン
今度は、コメント欄が全記事に！ (´･д･`) ﾔﾀﾞ
うちが設置してたのは
＜fb:comments expr:href='data:post.url' num_posts='3' width='500'/＞で
num_posts='3'の「3」は、表示したいコメント数で、
それ以外弄るようなところがないはずやのに、Σ＼(￣ｰ￣;)ﾅﾝﾃﾞﾔﾈﾝ
またまた検索開始！
そしたら、上記タグの上に
＜script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/＞
を付ければいいことが分かって、できた━━━━ヽ（＾∀＾ ）ノ━━━━♪
これで、全部解決♪
のはずが・・・
ここで満足してりゃええのに、「sendボタン」も付けてみよっ♪と思って
単純に考えたのが・・
「いいね！ボタン」で設置した
＜iframe expr:src=～href=" + data:post.url + "&send=false&layout=button_count&width=450&show_faces=true&action=like&～＞
のsend=falseで機能OFFやから、send=falseをsend=trueに書き換えればええやん♪
簡単やん♪と思たのに・・・
工エエェェ（´д｀）ェェエエ工工
またアカン！
「LIKE&SENDボタン」を取得する場合は
「sendボタン」も取得すると、XFBML形式でしかないみたいで、
これが原因か！ってことで、「sendボタン」だけ、取得しよう♪と思て、
＜fb:send expr:href='data:post.url'/＞
を設置してみたら・・・
Σ(゜Д゜；)アラマッ
個別記事には、ちゃんと設置はされてるねんけど
「sendボタン」は、いずこへーーー！(;・∀・)
「いいね！ボタン」の右横に表示されるはずが、
めっちゃ右端に！
もう一難去ってまた一難状態やん(笑)
「aendボタン」を「いいね！ボタン」の横に設置する方法で検索しても
なかなかヒットせず・・・トホホ
検索するのも疲れたし、ちょっと所用もあって、
まぁ、「sendボタン」は設置されてるし♪「いいね！ボタン」から離れてても
見えてるし、表示されてるねんからええかっ！と、とりあえず納得させてたんやけど、
dottore.emmett様より、メールをいただいて
以下、青文字コピペ
＜div id="fb-root"＞ ＜script src='http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxx&xfbml=1'/＞
＜fb:like expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false' width='200'/＞
こんな感じですぐに送信ボタン出てきましたよ?
ja_JP を eu_USにするとLike&sendボタンになります。
もうなんと親切な方なんでしょう♪
ここまで丁寧に教えてくれる方は滅多に居ませんよね！
dottore.emmett様には、本当に心より感謝してます♪
ありがとうございます☆
ちゅうことで「Like&sendボタン」の両方とも、個別記事に表示させるには上記タグを記述してください♪
結果だけやと、ここだけ書けばええねんけど(笑)
四苦八苦した経過から、dottore.emmett様のおかげで、無事に設置できたことを
書きたかったから、超長文になってしもた☆
で、以下は、
うちのBlogger用設置に関する覚え書きなんで、スルーしてください！
まだ書くんかよっ！<(`・ω・´)>
☆FacebookのIDを調べる方法
app_idは、Facebook上で作成したアプリ
adminsは、自分のFacebook ID
page_idは、ファンページID
※Create an Appからhttp://developers.facebook.com/setup/にて、
サイト名、URLを入力して、App IDを取得する
※Facebook IDは、ログインしたらURLのところに表示されるけど
what-is-my-user-id http://apps.facebook.com/what-is-my-user-id/ でも調べられる。
※Facebookにファンページを設置してる場合は、ファンページのURLに表示されるIP
☆OGP（Open Graph Protocol）について
なんでコレを設置したほうがええかは、検索して理解しましょ♪説明でけへん(;・∀・)
＜!-- Start Facebook open graph --＞
＜b:if cond='data:blog.pageType == "item"'＞
＜meta expr:content='data:blog.pageName' property='og:title'/＞
＜meta content='article' property='og:type'/＞
＜/b:if＞
＜b:if cond='data:blog.pageType == "archive"'＞
＜meta expr:content='data:blog.pageName' property='og:title'/＞
＜meta content='article' property='og:type'/＞
＜meta expr:content='data:blog.pageTitle' property='og:description'/＞
＜/b:if＞
＜b:if cond='data:blog.pageType == "index"'＞
＜meta expr:content='data:blog.title' property='og:title'/＞
＜meta content='blog' property='og:type'/＞
＜meta content='ブログの説明' property='og:description'/＞
＜/b:if>
＜meta expr:content='data:blog.url' property='og:url'/＞
＜meta content='xxxxxxx.jpg' property='og:image'/＞
＜meta content='xxxxxxx' property='fb:app_id'/＞
＜meta content='xxxxxxx' property='fb:page_id'/＞
＜meta content='xxxxxxx' property='fb:admins'/＞
＜meta expr:content='data:blog.title' property='og:site_name'/＞
＜!-- End Facebook open graph --＞
※ブログの説明を書いて、xxxxxxxを記述する。
xxxxxxx.jpgは、Facebookのプロフィール写真のプロパティで取得する。
☆HTML編集画面にて
head上の
http://www.google.com/2005/gml/expr'の下に
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'>
を追加する
☆インサイトの登録
http://www.facebook.com/insights/
ここで、ブログを登録する。
うちの場合は、3Blogger持ってて
http://17enjoylife.blogspot.com/
http://sazanamin.blogspot.com/
この2つは登録できてるんやけど、
http://earthquake3.blogspot.com/ が、何回やっても登録でけへん！ 。・゜・(ノ∀`)・゜・。
誰かぁ～愛の手を～教えて～Please♪
☆「いいね！ボタン」のみ設置タグ
＜iframe expr:src='"http://www.facebook.com/plugins/like.php?app_id=&href=" + data:post.url + "&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21"' scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:450px; height:21px;" allowTransparency="true"＞＜/iframe＞
※app_id=xxxxxxxは、自分のapp_idを記述
☆「いいね！ボタン」と「sendボタン」の設置タグ
＜div id='fb-root'/＞
＜script src='http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxx&xfbml=1'/＞
＜fb:like expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false' width='200'/＞
※app_id=xxxxxxxは、自分のapp_idを記述
※ja_JP は「いいね！」と「送信」、 eu_USは「Like」と「send」に表示される。
☆コメント欄(Comments)の設置タグ
＜script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/＞
＜b:comments expr:href='data:post.url' num_posts='3' width='500'/＞
※num_posts='3'の「3」はコメント数。「1」でも良い。
☆URLリンターで確認する。
http://developers.facebook.com/tools/lint
こんだけやったっけ？(;・∀・)
なんか、だんだん頭がこんがらがってきた～
それにしても、なんで1つだけインサイト登録がでけへんやろ(´゜'ω゜`)ショボーン
さらに検索開始☆やにゃ！
※ブログの説明を書いて、xxxxxxxを記述する。
xxxxxxx.jpgは、Facebookのプロフィール写真のプロパティで取得する。
☆HTML編集画面にて
head上の
http://www.google.com/2005/gml/expr'の下に
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'>
を追加する
☆インサイトの登録
http://www.facebook.com/insights/
ここで、ブログを登録する。
うちの場合は、3Blogger持ってて
http://17enjoylife.blogspot.com/
http://sazanamin.blogspot.com/
この2つは登録できてるんやけど、
http://earthquake3.blogspot.com/ が、何回やっても登録でけへん！ 。・゜・(ノ∀`)・゜・。
誰かぁ～うちに愛の手を～教えて～Please♪
☆「いいね！ボタン」のみ設置タグ
＜iframe expr:src='"http://www.facebook.com/plugins/like.php?app_id=&href=" + data:post.url + "&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21"'
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
width:450px; height:21px;" allowTransparency="true"＞＜/iframe＞
※app_id=xxxxxxxは、自分のapp_idを記述
☆「いいね！ボタン」と「sendボタン」の設置タグ
＜div id='fb-root'/＞
＜script src='http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxx&xfbml=1'/＞
＜fb:like expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false' width='200'/＞
※app_id=xxxxxxxは、自分のapp_idを記述
※ja_JP は「いいね！」と「送信」、 eu_USは「Like」と「send」に表示される。
☆コメント欄(Comments)の設置タグ
＜script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/＞
＜fb:comments expr:href='data:post.url' num_posts='3' width='500'/＞
※num_posts='3'の「3」はコメント数。「1」でも良い。
☆URLリンターで確認する。
http://developers.facebook.com/tools/lint
こんだけやったっけ？(;・∀・)
なんか、だんだん頭がこんがらがってきた～
それにしても、なんでインサイトが登録でけへんやろ・・・(´゜'ω゜`)ショボーン
xxxxxxx.jpgは、Facebookのプロフィール写真のプロパティで取得する。
☆HTML編集画面にて
head上の
http://www.google.com/2005/gml/expr'の下に
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'>
を追加する
☆インサイトの登録
http://www.facebook.com/insights/
ここで、ブログを登録する。
うちの場合は、3Blogger持ってて
http://17enjoylife.blogspot.com/
http://sazanamin.blogspot.com/
この2つは登録できてるんやけど、
http://earthquake3.blogspot.com/
が、何回やっても登録でけへん！ ｡･ﾟ･(ﾉ∀`)･ﾟ･｡誰かぁ～愛の手をPlease♪
☆「いいね！ボタン」のみ設置タグ
※app_id=xxxxxxxは、自分のapp_idを記述
☆「いいね！ボタン」と「sendボタン」の設置タグ
-->-->
0 件のコメント:
コメントを投稿