Twitterの@Anywhereをザックリ見てみる

公式ドキュメントを見ながら、テストページを作ってみました。

ここで登録した情報は後から変更できるので、開発用のテスト環境の情報でとりあえず登録してもかまわない。完了ページでは埋め込み用サンプルコードが自動生成されるので、そのまま使用できるが、中身の実行用のコードは実際に合わせて書いたほうがよいと思います。
ということで、この部分だけに入れる。

<script src="http://platform.twitter.com/anywhere.js?id=あなたのキー&amp;v=1">
  • 特定のユーザーをfollowするボタンを作る
<span id="follow-placeholder"></span>
<script type="text/javascript">
twttr.anywhere(function (T) {
    T("#follow-placeholder").followButton('leebenny');
});
</script>

こんな感じ↓


  • 「@」文字から始まる単語に自動的にtwitterのリンクを付ける
<span id="linkify-this-content">
    @leebenny <=リンク貼られているよ<br />
    @ura_benny <=こちらも<br />
    @ded, @dsa, @todd, @danwrong, @noradio, 
</span>
<script type="text/javascript">
twttr.anywhere(function (T) {
    T("#linkify-this-content").linkifyUsers();
});
</script>

こんな感じ↓

ちなみに↓こうすると、影響範囲はbody全体を対象とする

T.linkifyUsers();
  • 「@」から始まる単語にリンクと吹き出しを付ける
<span id="hovercards-this-content">
    @leebenny <=吹き出しがでるぞ<br />
    @ded, @dsa, @todd, @danwrong, @noradio,
</span>
<script type="text/javascript">
twttr.anywhere(function (T) {
    T("#hovercards-this-content").hovercards();
});
</script>

こんな感じ↓

言うまでもなく↓こうすると、影響範囲はbody全体を対象とする

T.hovercards();
  • 「@」から始まる単語にリンク付けずに、吹き出しを出す(単語にはすでに別のリンクが付けられた場合は便利ですね)
<span id="target-content">
    @leebenny
    <br />
    ↓これ以降の@単語は全部無視するので、要注意
    <br />
    @ded, @dsa, @todd, @danwrong, @noradio,
</span>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#target-content").hovercards({
      infer: true
    });
  });
</script>

ただし、影響範囲内の初めの@単語にしか効かないよ
こんな感じ↓

ほかにはタグの一部の値をusernameとして指定したりすることも可能です。
例:画像のalt属性をusernameに指定してあげるとか

<img alt="leebenny" src="http://a1.twimg.com/profile_images/446785392/myface_normal.gif" id="myImg" />
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("img#myImg").hovercards({
      username: function(node) {
        return node.alt;
      }
    });
  });
</script>


  • 自分のサイト内にtwitterボックスを入れる
<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox({
      height: 100,
      width: 400,
      counter: true,
      label: "你在干什&#20040;",
      defaultContent: "<これはボックス内のディフォルトメッセージ>"
    });
  });
  
</script>

こんな感じ↓

で、onTweetというcallback関数設定できるパラメータもありますが、どうもうまくいってない、後でもうちょっと試します。

  • ログイン、ログアウトボタンを付ける
<span id="login"></span>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#login").connectButton();
  });
</script>
<button id="signout" type="button">Sign out of Twitter</button>


  • その他

そして、現在のユーザーのログイン状況を判定するメソッド「T.isConnected()」を用意いて、いろいろ自分のサイトでやれることは増えますね。
さらに、現在のログインしたユーザーのObject「currentUser」も用意してあるので、ユーザーの自己紹介とか名前とかフォロー状況とか簡単に表示できるようになっている。

とにかく、@Anywhereを使えば、すごく簡単にtwitterのUIを会員サイトとかに取り組むことができますね。