« 店頭展示 | トップページ | facebookいいねボタン設置覚書-番外編 »

2014年2月 1日 (土)

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="http://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html">http://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html" data-counturl="<a href="http://anocora.cocolog-nifty.com/blog/2014/01/facebook-2-43-1.html">http://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'; );
関数の中で、テキストを結合してやることでうまくいきました。

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

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

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

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

« 店頭展示 | トップページ | facebookいいねボタン設置覚書-番外編 »

ココログ画面カスタマイズ」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1550682/54744540

この記事へのトラックバック一覧です: facebookいいねボタン設置覚書-4:

« 店頭展示 | トップページ | facebookいいねボタン設置覚書-番外編 »

スライムパンク防止剤は、こんな悪さをする

川越市周辺の自転車屋MAP

埼玉県内出張修理店情報

カテゴリー

川越市自転車シェアリング

Active Safety Project

最近のトラックバック

ブログランキング

無料ブログはココログ