icoroの記事をTwitterに投稿するボタンを置いてみた

　最近、twitterに記事を投稿できるボタンを設置しているウェブサイトが増えたような気がします。ネタフルなんかは、トップページと記事のページから「はてブ」などのソーシャルブックマークボタンを取り払っちゃって、代わりにtwitterとTumblrにポストするリンクを貼っていたりします。
　というわけで、需要があるかどうか分かりませんが、icoroでも記事をTwitterにワンクリックで投稿出来るボタンを設置してみました。
　利用できたら利用してみてください。てか、もしかしたら自分が一番使うかも？

　気がついてない人の方が多いと思いますが、icoroの記事のタイトル下にtwitterのアイコンが加わりました。4つあるうちの1番左のアイコンがそれです。

　このtiwtterのアイコンをクリックすると、テキストがtwitterの投稿フォームへセットされます。

実装にあたってのあれこれ

　中身は、基本的に以下のサイトで紹介されているものと同じものです。

見ているページをTwitterに投稿するBookmarkletとブログ用ボタン

見ているページをTwitterに投稿するBookmarkletとブログ用ボタン [C!]

　これにちょっと手を入れ、以下のような関数にして外部ファイルに追い出しちゃいました。

function addtw(title, url) {
  var d = document,
  w = window,
  e=encodeURIComponent,
  t=(d.selection)?d.selection.createRange().text:
    (w.getSelection)?w.getSelection():
    (d.getSelection)?d.getSelection():'',
  f='http://twitter.com/home/?status=' + e(t) + '+Surfing:+%22' + e(title) + '%22+' + e(url) + '+%23webclip';
  if(!w.open(f,'surfing'))l.href=f;
}

　この関数をonclickで呼び出しています。このとき、記事のタイトルとURLを関数に渡しています。

<a href="http://twitter.com/home/" onclick="addtw('記事のタイトル','記事のURL');return false;">add twitter</a>

　たとえばWordPressの場合、以下のように書けばタイトルとURLを自動的にセットできます。

<a href="http://twitter.com/home/" onclick="addtw('<?php the_title(); ?>','<?php the_permalink(); ?>');return false;">add twitter</a>

　こんな風に、記事のタイトルとURLを関数に渡す形でセットしているのは、記事の一覧ページでもこのボタンが機能するようにするためです。

　まあ、アーカイブページでタイトルだけ見てtwitterに投稿する人ってのはほとんどいないと思うので、どちらかというと使い勝手よりも見た目の統一感を出すため、という理由が大きいです。。

　あとはJavascriptのコードに圧縮をかけてサイズを小さくするため、とか、出来るだけJavascriptのコードを外部に追い出して、HTMLの見通しを良くするため、とか、そんな理由もあります。
　もっとHTMLのソースをスマートにするためにDOMを利用することも考えたのですが、めんどくさいことになりそうなのでそれは止めました。。