facebookいいねボタン設置覚書-4

前回記事で、とりあえず、Tweetボタンと並べて、facebookのいいねボタンを表示することが出来たのですが、各記事ごとのいいねボタンにはなっていませんでした。

facebookいいねボタン設置覚書-2のように、Tweetボタンが持っている記事毎のURL情報をfacebookのいいねボタンに取り込もうとして模索しましたが、反映する仕組みがうまく作れませんでした。

$(this)を使えば、うまくいきそうだと感じて、諦め切れていませんでしたが、下記の手順でようやく完成しました

大雑把な捉え方ですが、$(this)は今選択されている要素(開始タグと終了タグで囲まれている部分）になります。

今回は必要な情報がある場所と、facebookのいいねボタンを配置したい場所が同じでした 下記のHTMLが$(this)で指定したい範囲になります。

<span class="entry-footer-links-twitter">
<script src="<a href="http://platform.twitter.com/widgets.js">http://platform.twitter.com/widgets.js</a>" type="text/javascript"></script>
<a href="<a href="http://twitter.com/share">http://twitter.com/share</a>" class="twitter-share-button" data-url="<a href="https://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html">https://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html" data-counturl="<a href="https://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html">https://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html" data-text="facebookいいねボタン設置覚書-2" data-count="horizontal">Tweet</a>
</span>

ところが、いくら検索しても、イベント（画面操作に伴う処理）発生後の$(this)については記載が見つかるのですが、今回やりたい処理では、イベントが発生せず、思うように記述できません。関数（結果を得る為の別に作る処理）を作っての挑戦も挫折し、うまくいったのがこの記述です。
$('.entry-footer-share').append(function () {return $('a[href]',$(this)).attr('data-url'); });
スクリプト（処理の記述）の中に関数を入れ込んでやったら、記事毎のurlが取り込めました。

次にやろうとしたのが、fecebookのいいねボタンの記述の中に取得したurlを埋め込む処理です。
$('.entry-footer-share').append('テキスト_1'+function () {return $('a[href]',$(this)).attr('data-url'); }+'テキスト_2');
のように記述すると、
テキスト_1function () {return $('a[href]',$(this)).attr('data-url'); }テキスト_2
と表示され、スクリプトに埋め込んだ関数の結果が得られません。

散々悩んだ末に得た結果がこうです。
$('.entry-footer-share').append(function () {return 'テキスト_1'+$('a[href]',$(this)).attr('data-url')}+'テキスト_2'; );
関数の中で、テキストを結合してやることでうまくいきました。

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> //ブログ村用バナー作製 //クリックのお願い var myMe ='<FONT size="-2">　面白かったら、クリックをお願いします。→</FONT>'; //自転車修理・整備バナー設定 myMe =myMe+'<a href="http://cycle.blogmura.com/cycle_service/" target="_blank"><img src="http://cycle.blogmura.com/cycle_service/img/cycle_service88_31.gif"  width="80" height="25" border="0" alt="にほんブログ村 自転車ブログ 自転車 修理・整備へ" /></a>'; //川越情報バナー設定 myMe =myMe+'<a href="http://localkantou.blogmura.com/kawagoe/" target="_blank"><img src="http://localkantou.blogmura.com/kawagoe/img/kawagoe106_24.gif" width="80" height="25" border="0" alt="にほんブログ村 地域生活（街） 関東ブログ 川越情報へ" /></a>'; //facebookいいねボタン作製 //<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fanocora.cocolog-nifty.com%2Fblog%2F2014%2F01%2Ffacebook-3-229b.html&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe> //分割_1 var myFb_1 ='<iframe src="//www.facebook.com/plugins/like.php?href=' //分割_2 var myFb_2='&amp;width=105&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:105px; height:21px;" allowTransparency="true"></iframe>' //twitterボタンの後への追加処理 $(function() { $('.entry-footer-share').append(function () {return myFb_1+$('a[href]',$(this)).attr('data-url')+myFb_2+myMe; }); }); </script>

これで、トップページでも、カテゴリーページでも、月次ページでも、各記事毎のfacebookのいいねボタンになります。

ブログ全体へのいいね、カテゴリーページ、月次ページへのいいねが欲しい方は、設置覚書-3のスクリプトを使えば、表示されているページへのいいねになります。

今回のスクリプトが正しく動いていることは、確認をしました。

＊自分でも読みにくいと感じた為、記事の一部を修正しました。（02/02）