【bit.ly対応版】見ているページをReTweetするブログ用ボタン

ブログからTwitterに

前に、見ているページを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をコピーしておきます。
bit.ly

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ですね。

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil