jQuery楽しい＆tweetボタン付けてみました

まさる（高野将、TAKANO Sho） — Thu, 18 Nov 2010 00:50:00 GMT

最近仕事でjQueryを使えるようになったので、いろいろと試してみているのですが、jQueryってよくできてますね。そして面白い♪

ということで、勉強もかねてentryの最後にtweetするためのボタンをつけてみました。

参考にしたのはこちら↓

Twitter/facebookいいね/mixiチェック/GREEいいね/Evernote/はてブのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ | アイトランス株式会社

どんなコードを書いたか、ソースを見ればわかりますが、紹介しておきます。

<script language="javascript" src="http://masaru.wankuma.com/script/jquery-1.4.4.min.js"></script>
<script language="javascript" src="http://masaru.wankuma.com/script/jquery.socialbutton-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('.post').each(function(i,v){
    var postanchor = $(v).find('a')[0];
    var url = postanchor.href;
    var title = postanchor.innerText;
    $('<div class="tweet"></div>').css('margin-top', '5').appendTo(v);
    $(v).find('.tweet').socialbutton('twitter',{
      button: 'none',
      url: url,
      text: 'まさるblog : ' + title
    });
  });
});
</script>

1,2行目：jQueryとtweetボタンを表示するためのscriptタグです。

4行目：Webページのloadが終わったら実行するfunctionを指定します。

5行目：個々のエントリに対して、eachで列挙して指定したfunctionを実行します。

6～8行目：tweetボタンをつけるエントリのurlとタイトルを取得します。

9行目：entryの最後にtweetボタンを設定するためのdivタグを追加します。（margin-topはちょっと隙間を空けるため）

10～14行目：9行目で追加したdivタグにtweetボタンを設定します。

※ちなみに、.Textのスキンは"Hover”を使っています。

jQueryを使うと、blogのカスタマイズもかなり柔軟にできそうです。今後も機会があればいろいろやってみたいと思います。