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