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

投稿日：2009年6月1日

[2009/06/18：追記]
bit.lyに対応したスクリプトも書きましたので、こちらもどうぞ。
・【bit.ly対応版】見ているページをReTweetするブログ用ボタン [C!]

いしたにさんがブログにTumblrボタン付けて、Twitterボタンもつけたいようなので持っていたBookmarkletから在庫放出しますw

自分のブログのエントリーにTumblrに１クリックで投稿するボタンつけました。
(snip)
twitterボタンお待ちしてます！

via: 自分のブログのエントリーにTumblrに投稿するボタンつけた:[mi]みたいもん！

Tumblrボタンは単純にTumblr純正の bookmarklet をリンクにしているだけなので、Twitterも同じ要領でできます。

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

まずは、元となるBookmarkletから。
Surfing Page to Twitter
ソース中身はこんな感じ（便宜上、改行しています。）

javascript:
var d=document,
w=window,
l=location,
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(d.title)+'%22+'+e(l.href)+'+%2523webclip';
if(!w.open(f,'surfing'))l.href=f;
void(0);

このブックマークレットを実行すると、見ているページの情報が下記のようにTwitterの投稿フォームにセットされます。
Twitter画面
フォーマットは下記の通り。

{(あれば)引用} Surfing: "{ページタイトル}" {URL} #webclip

「Surfing:〜」とか「#webclip」はそんな書き方をしているツールが多そうなので採用しましたが、適宜書き換えてもいいかも。
で、これをブログに設置するには下記のようなコードを挿入します。

<a href="javascript:var%20d=document,w=window,l=location,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(d.title)+'%22+'+e(l.href)+'+%2523webclip';if(!w.open(f,'surfing'))l.href=f;void(0);">add Twitter</a>

こんなリンクボタンができます。
add Twitter
この場合内容的に、「Bookmarked:〜」とかにした方がいいかもですね。

見ているページをReTweetするブログ用ボタン

上でやった方法を応用するとReTweetボタンも作成可能です。
下記のHTMLコードを「yager」になっている部分をご自分のTwitterアカウントに差し替えて、ブログのテンプレートの好きな所に貼付けてください。

<a href="javascript:var%20tid='yager',d=document,w=window,l=location,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)+'+RT+%40'+e(tid)+':+%22'+e(d.title)+'%22+'+e(l.href);if(!w.open(f,'retweet'))l.href=f;void(0);">ReTweet</a>

こんなリンクボタンができます。
ReTweet
フォーマットは（押してみれば分かるのですがw）下記の通り。

{(あれば)引用} RT @{あなたのTwitterアカウント}: "{ページタイトル}" {URL}

@記法を使っているので、だれがReTweetしてくれたのか分かりやすくていいですよね！

まとめ

ちなみにMacのFirefoxとSafariで動作確認しましたが、その他のブラウザは分かりませんw
変だったら教えてください。
あと、分かりづらいかもしれませんがここで紹介したスクリプトは「引用」に対応しています。見ているページの気になる部分を選択してからBookmarkletなりリンクボタンを押すと、選択部分がちゃんとフォームに入ります。Twitterをクリッピングツールとして使うのにも便利ですね。
ちなみに選択範囲の処理はこちらのエントリーで紹介した方法の使い回しですw
・Deliciousでreblog：選択範囲をNOTESにコピーできるブックマークレット [C!]
enjoy!