TAGS :,

Webページ上にTwitterの「ツイートする」ボタンを設置することは
今では手軽に出来るようになっていますが
その場で自由にツイートできるテキストエリアをページ上に配置することは
意外と面倒だったりします。

そんなTwitterのツイートボックスを、「jTweetsAnywhere.js」プラグインを使って
ページ上に設置するサンプル（…ただの実験サンプル）を作ってみたので紹介してみます。

使用するjQueryプラグイン「jTweetsAnywhere.js」はこちら。
≫jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support

まずサンプルから。

jQuery TWEET BOX

テキストエリアにつぶやくテキストを入力した後、「Tweet」ボタンをクリックすると、
自分のTwitterアカウント（連携承認が必要）でつぶやくことが出来ます。

ツイートボックスをページ上に設置するにはTwitter APIを使用することになるので
まず、アプリケーション登録をして、API KEYの申請が必要になります。

アプリケーションの登録はこちらから
≫Twitter Developers

登録が完了するとAPIキーをもらうことができ、
ツイートボックスを使用するページで、SCRIPTと一緒にコードに埋め込みます。

そしてここから、APIキーと「jTweetsAnywhere.js」を使って
ページ上にツイートボックスを埋め込んでいきます。

まずHTMLから。

◆HTML
<div id="tweet_box"></div>

HTMLはツイートボックスを設置するエリアに
任意のIDをつけたボックス要素を配置するのみ。
（今回は特にCSSは必要にならないので省きます。）

そしてスクリプトは以下になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jtweetsanywhere-1.2.1.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=【ここにAPIキーをコピーします】&v=1"></script>
<script type="text/javascript">
$(function(){
	$('#tweet_box').jTweetsAnywhere({
		showTweetBox:{
			counter: true,
			width: 500,
			height: 100,
			label: '<span style="color: #D1C7BA">つぶやく</span>',
			defaultContent: '#TweetTEST',
			onTweet: function(textTweet, htmlTweet){
				alert('You tweeted: ' + textTweet);
			}
		}
	});
});
</script>

スクリプト部分では、テキストボックスの幅と高さに加えて、
テキストボックスの上に表示するキャプションテキスト、
テキストエリアにデフォルトで記載しておくテキスト（ハッシュタグなど）
つぶやきが完了したことを告げるアラートボックスのテキスト
など、設定が可能となっています。

設置についての記述はこれだけで
画面上にツイートボックスを実装することができます。

今回はただページ上につぶやき用のボックスを設置する方法でしたが
これを応用させることで、画面上からつぶやいた内容を、
同じページ上に表示したツイートリストに反映させたり、
いろいろ仕掛けを組み込むことが出来ると思います。

ページ上にツイートできるエリアを設置する際に是非。。。

※今回のサンプルデータのダウンロードは「jTweetsAnywhere.js」プラグインの再配布にもなるので
ファイルの中身を確認したい方は「CONTACT」ページよりご連絡ください。