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」ページよりご連絡ください。

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

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでページ内にツイートできるテキストエリア(テキストボックス)を設置する実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner