@Anywhereのスクリプトを読み込む

アプリケーション登録完了時に表示されるコードをそのまま貼る。

<script src="http://platform.twitter.com/anywhere.js?id=APIキー&v=1"></script>

@usernameにアカウントページのリンクを付ける

<ul id="linkifyUsers">
	<li>@rewish</li>
	<li>@5509</li>
	<li>@GachapinBlog</li>
</ul>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	// 全ての@usernameに適用
	twitter.linkifyUsers();
	// CSSセレクタで適用範囲を指定
	twitter("#linkifyUsers").linkifyUsers();
});
</script>

Example

• @rewish
• @5509
• @GachapinBlog

@usernameにHovercardsを付ける

マウスオーバーでプロフィールが表示されるアレ。

jQueryで実装する場合はTwitterのHover Cardを実装するjQueryプラグイン twttrFloatTip :: 5509(+1)がいいですね！

<ul id="hovercards">
	<li>@rewish</li>
	<li>@5509</li>
	<li>@GachapinBlog</li>
</ul>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	// 全ての@usernameに適用
	twitter.hovercards();
	// CSSセレクタで適用範囲を指定
	twitter("#hovercards").hovercards();
});
</script>

Example

• @rewish
• @5509
• @GachapinBlog

アプリケーションを認証するボタン

Welcome to @Anywhereのコードはそのままだと動かない。

twitter.isConnectedを関数実行にして、
$('#twitter-connect-placeholder')をdocument.getElementByIdに変更。

<div id="connectButton"></div>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	twitter("#connectButton").connectButton();
	// 認証済みの場合
	if (twitter.isConnected()) {
		var User = twitter.currentUser;
		document.getElementById("connectButton").innerHTML = [
			'<p><img src="', User.data('profile_image_url'), '"> ', User.data('screen_name') + '</p>',
			'<p><a href="javascript:void(0)" onClick="twttr.anywhere.signOut();">Sign out of Twitter</a><p>'
		].join('');
	}
});
</script>

サインアウトするにはtwttr.anywhere.signOut()を呼ぶ。

<a href="javascript:void(0)" onclick="twttr.anywhere.signOut()">Sign out of Twitter</a>

認証が完了した後やサインアウトした後に処理を行いたい場合は以下のように指定する。

twitter("#connectButton").connectButton({
	authComplete: function() {
		// 認証が完了した後の処理
	},
	signOut: function() {
		// サインアウトした後の処理
	}
});

その場でFollow出来るボタン

この機能を使うにはコネクションとアクセス権限writeが必要です。

<div id="followButton"></div>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	twitter("#followButton").followButton("アカウント");
});
</script>

その場でTweet出来るbox

この機能を使うにはコネクションとアクセス権限writeが必要です。

<div id="tweetBox"></div>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
	twitter("#tweetBox").tweetBox({
		label: "@AnywhereからTweet",
		defaultContent: "@AnywhereからTweetテスト"
	});
});
</script>

雑感

簡単なコードを追加するだけで、Twitterの諸機能を利用することが出来ました。

他にも色々APIがあるみたいなので、JavaScriptだけでTwitterクライアントを作ったりも出来るんですかね。

anywhere.jsの圧縮される前のコードが読みたいです。

このページの設定は/demo/twitter_anywhere/config.jsに記述しています。

参考リンク

• Welcome to @Anywhere | dev.twitter.com
• Twitter 新 API のドキュメント「Getting Started with @Anywhere」日本語訳 - WebOS Goodies
• @Anywhere JavaScript API
• TwitterのHover Cardを実装するjQueryプラグイン twttrFloatTip