「Web Intents」でTwitterの機能をサイトに埋め込む

先日、AmazonがTwitterやFacebookによるシェア機能に対応したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。

ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイトにTwitterの機能を埋め込む際にはOAuth認証を利用しなくてはいけなかったのですが「Web Intents」を利用すれば簡単に埋め込めるようになっています。

Tweet機能の実装

つぎのようなシェアボタンを簡単に埋め込めます。

このページをシェア

ソースコードは次のような感じになります。

<script type="text/javascript" src="http://twitter.com/intent/tweet?http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/intent/tweet?original_referer=http%3A%2F%2Fblog.webcreativepark.net%2F2011%2F04%2F20-051058.html&url=http%3A%2F%2Fblog.webcreativepark.net%2F2011%2F04%2F20-051058.html&text=%E3%80%8CWeb%20Intents%E3%80%8D%E3%81%A7Twitter%E3%81%AE%E6%A9%9F%E8%83%BD%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80">このページをシェア</a>

jsファイルを読み込み、a要素のhref属性を次のように設定します。

http://twitter.com/intent/tweet?original_referer=a要素を設置するURL&url=シェアするURL&text=シェアしたいテキスト

テキストやURLはURLエンコードしてください。

@Anywareでも似たようなことが出来ますが、API Keyなど煩わしいものを取得してなくてもいいので便利ですね。

Reply , Rtweet , Favorite機能の実装

次のようにWebサイト内に特定のtweetに対するReply , Rtweet , Favorite機能を簡単に埋め込めます。

Reply　Retweet　Favorite

ソースコードは次のような感じになります。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/intent/tweet?in_reply_to=604478362187202568">Reply</a>
<a href="http://twitter.com/intent/retweet?tweet_id=60447836218720256">Retweet</a>
<a href="http://twitter.com/intent/favorite?tweet_id=60447836218720256">Favorite</a>

簡単ですね。jsファイルを読み込み、URLだけ整えておけば自動的にオフィシャルの機能を提供してくれます。OAuth認証はユーザーからすると敷居が高いので認証なしに各種機能が利用できるのはよさそう。

フォローリンクの実装

フォローを促すリンクも簡単に実装できます。

KazumaNishihataをフォロー

ソースコードは次のような感じになります。

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://twitter.com/intent/user?screen_name=KazumaNishihata">KazumaNishihataをフォロー</a>

「Web Intents」を利用することでTwitter とWebサイトの連携をかなり強化できそうです。

関連エントリー

FacebookのLike Button(いいねボタン)の設置
mixiチェックのチェックボタンを設置
twitterでblogの更新情報を配信
topsyのRTボタンのエラーを修正
Twitterでの情報拡散は公式RTで

スポンサードリンク

«Re:犯してはいけないHTMLタグの過ち10個 | メイン | MacのAndroid エミュレータでサイト制作»