Twitterの@Anywhereをザックリ見てみる
公式ドキュメントを見ながら、テストページを作ってみました。
ここで登録した情報は後から変更できるので、開発用のテスト環境の情報でとりあえず登録してもかまわない。完了ページでは埋め込み用サンプルコードが自動生成されるので、そのまま使用できるが、中身の実行用のコードは実際に合わせて書いたほうがよいと思います。
ということで、この部分だけ
<script src="http://platform.twitter.com/anywhere.js?id=あなたのキー&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: "你在干什么", 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を会員サイトとかに取り組むことができますね。