jQueryでbit.lyと連携。短縮URLをTwitterに投稿してもらう方法

presented by 役に立つかもしれないBlog

「自分のページをTwitterで宣伝してもらいたいなー」という人は多いでしょう。

ユーザーのITリテラシーが高ければbit.lyのスクリプトレットなどで短縮URL化してツイートしてもらえます。　でも多くの人はそうではありません。

誰にでもできるようにするためには自分のページに短縮URLをツイートしてもらう仕組みを作るのが最善の方法です。　今回はそのテクニックを紹介。

動作サンプル

こんな感じで動作します。

twitterに投稿 ← twitterでこのページをつぶやく！

JavaScriptベースでjQuery + bit.ly を利用する

JavaScriptの人気ライブラリ「jQuery」と、短縮URLの人気サービス「bit.ly」とを連携させてみたいと思います。　特にbit.ly にはスクリプトで投稿できるようにAPIサービスが提供されています。

jQuery + 自作JavaScriptファイル（index.js）の読み込み

まずはファイルの読み込みから。　jQueryの読み込みにはGoogleが提供してくれている「jQuery 1.5.2」を利用します。　次に、HTMLファイルを汚さないように外部JavaScriptファイル（index.js）を新規作成して読み込ませます。

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
  google.load('jquery', '1.5.2');
</script>
<script type="text/javascript" src="index.js"></script>

処理の順番は、１．短縮化　２．Twitterへのポスト

URLを短縮化と一言にいっても、実際はbit.ly サービスに処理を委譲しないといけないのでそのための処理を先に行います。　次に短縮化されたURLと、ページのタイトルを組み合わせてTwitterに投稿する、という流れになります。

bit.lyで短縮化の命令（API）を利用するためには、bit.lyにユーザー登録してログインキーとAPIキーを知っておく必要があります。

bitly_jquery.png

tweetByShortenUrl() 関数を作成

bit.ly サービスはVersion3を利用し、JSON形式で受け取るようにします。　XML形式も選べますが、JavaScriptでデータとしてそのまま活用できるJSON形式がベスト。

これをjQueryの「$.getJSON() 」関数を使ってやりとりさせます。

$.getJSON() では結果を受け取る関数を定義できるので、この中で結果データの「status_txt」が「OK」かどうかで、URL短縮に成功したかどうかをチェックします。

成功していれば、「data.url」に短縮URLが設定されているので、それをページタイトル（document.title）と合わせてTwitter投稿へのパラメーターとして使います。

失敗していれば、しかたないですがそのままのURLを投稿してもらうようにします。

$(function() {
	//URLを短縮化
	function tweetByShortenUrl() {
		
		var url = "http://api.bit.ly/v3/shorten?"
                    + "&login=" + '****Username****'
                    + "&apiKey=" + '****API key****'
                    + "&longUrl=" + encodeURIComponent(location.href)
                    + "&format=json&callback=?";
					
		$.getJSON(url, function(res){
			var url = 'http://twitter.com/home/?status=';
			if (res.status_txt == 'OK') {
				location.href = url+encodeURIComponent(document.title+" "+res.data.url);
			} else {
				location.href = url+encodeURIComponent(document.title+" "+location.href);
			}
		});
	}
	
	$("#tweet").click(tweetByShortenUrl);
});

この関数をHTMLページ上で「id="tweet"」にしているボタンに割り当てます。

ツイート用ボタンを準備

先ほどのJavaScriptで割り当てた「id="tweet"」のボタンを作成します。　href属性は「#」にしておきましょう。「javascript:void()」にしているとうまく動きません。

<a id="tweet" href="#"><img src="/twitter.png" alt="ツイート" /></a>

以上で完了です。　どんどんページを宣伝してもらいましょう！　魅力的なページにすることも忘れずにね！

　 　 このエントリーをはてなブックマークに追加

このページに関連のある記事はこちら

コメントフォーム