前に、見ているページをTwitterに投稿するBookmarkletとブログ用ボタンというエントリーを書いたのですが、もう少し機能改善したものを紹介します。
以前のサンプルでは、自分のTwitterアカウントに向けてReTweetしてもらうようにBookmarklet形式で簡易実装したのですが、見ているページのURLは特に加工せずそのままtwitterのフォームにセットしていました。
（長いURLはtwitterが自動的にbit.lyに変換してから送信される）
ですが、このURL短縮は送信後に処理されるため入力中の文字数カウントでは長いURLのままカウントされており、引用などをくっつけてRTしたい場合は、使用可能文字数が少なくなってしまっています。
ですので、もうちょっとJavaScript側で処理を追加し、bit.lyのAPIを使って短縮化したURLをセットするようにします。
bit.lyのAPIでURLを短縮化
bit.lyのAPIを使うためには、無料のアカウント登録をしてAPIキーをゲットする必要があります。
・bit.ly, a simple url shortener
上記URLからアカウント登録して、Account画面にあるAPI Keyをコピーしておきます。
URLを短縮化するAPIは下記のフォーマットでリクエストします。
http://api.bit.ly/shorten?version=2.0.1&format=json&callback={コールバック}&longUrl={元のURL}
JavaScriptから呼び出すのでJSONPを使いたいところ。fortmat=json と callback がちゃんと使えます。
さらに、bit.lyのAPI認証はBASIC認証とパラメータによるリクエストの2種類サポートしていますが、今回はJavaScriptから処理したいのでパラメータに渡す方法をとります。下記パラメータも追加してやります。
&login={bit.lyアカウント}&apiKey={APIキー}
ソースにそのまま書くのでAPIキーはバレバレになりますが、ログインパスワードとは別なのでとりあえず大丈夫かな？
bit.ly対応版 ブログからReTweetするボタン
で、完成版です。以前はAタグの中に全部書きましたがJSONPを使う事もあるので関数化してあります。
まずは、JavaScriptを定義します。
function retweet() {
var bitly_id = '{bit.lyアカウント}';
var bitly_key = '{APIキー}';
api = 'http://api.bit.ly/shorten'
+ '?version=2.0.1'
+ '&format=json'
+ '&callback=retweetCallback'
+ '&login=' + bitly_id
+ '&apiKey=' + bitly_key
+ '&longUrl=';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = api + encodeURIComponent(location.href);
document.body.appendChild(script);
}
function retweetCallback(json) {
var tid = '{Twitter のアカウント}';
var d = document;
var w = window;
var l = location;
var e = encodeURIComponent;
var sel = '';
if ( d.selection ) {
sel = d.selection.createRange().text;
} else if ( w.selection ) {
sel = w.selection.createRange().text;
} else if ( d.getSelection ) {
sel = d.getSelection();
} else if ( w.getSelection ) {
sel = w.getSelection();
}
var f = 'http://twitter.com/home/?status='
+ e( sel+' RT @'+tid+': "'+d.title+'" '+json.results[location.href]['shortUrl']);
if( !w.open(f,'retweet') ) {
l.href = f;
}
}
あとは、ボタンを貼付けたいところに、
<a href="javascript:retweet();">ReTweet</a>
とすればOKですね。
