Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ

16 Apr 2010
Technology

Twitterの諸機能をサイトに導入するためのJavaScriptフレームワーク「@Anywhere」がリリースされましたね。

その場でフォローしたりサイト上から直接Tweetしたり、Twitterがナチュラルに様々なサイトに組み込まれるようになるんですかね。

と言うわけで僕も軽く試してみたので、使い方のメモと雑感を書いてみます。

まずはアプリケーション登録

New Twitter Applicationでアプリケーション登録を行う。

Application Name: @AnywhereでTweetした時に表示されるアプリケーション名。</dd>
Application Website: Application NameにリンクされるサイトのURL。
Organization: 組織名？とりあえず空白で。
Callback URL: コネクションの許可などで一度Twitterにアクセスした場合に戻るURL。（locationから取ってるので指定しても反映されません）
Application Icon: アプリケーションのアイコン。

登録が完了するとAPIキーが発行され、スクリプト読み込み用のサンプルコードが表示されるので、コピーしてサイトに貼り付ける。

これで準備完了。後は使いたい機能を呼び出すだけ。

サイトに機能を導入

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

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

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

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

<ul>
  <li>@rewish</li>
  <li>@twj</li>
</ul>

<script>
twttr.anywhere(function(twitter) {
  // 全ての@usernameに適用
  twitter.linkifyUsers();

  // CSSセレクタで適用範囲を指定
  twitter("#linkifyUsers").linkifyUsers();
});
</script>

@usernameにHovercardsを付ける

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

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

<ul>
  <li>@rewish</li>
  <li>@twj</li>
</ul>

<script>
twttr.anywhere(function(twitter) {
  // 全ての@usernameに適用
  twitter.hovercards();

  // CSSセレクタで適用範囲を指定
  twitter("#hovercards").hovercards();
});
</script>

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

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)">Sign out of Twitter</a>

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

twitter("#connectButton").connectButton({
  authComplete: function() {
    // 認証が完了した後の処理
  },

  signOut: function() {
    // サインアウトした後の処理
  }
});

その場でFollow出来るボタン

この機能を使うにはConnectionとアクセス権をread & writeに変更する必要があります。

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

その場でTweet出来るbox

この機能を使うにはConnectionとアクセス権をread & 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の圧縮される前のコードが読みたいです。

Rewish