TwifluにTwitterの @anywhere を設置してHovercardsを表示できるようにした

2010/4/15 17:39

Twitterの @anywhere が利用できるようになっているというニュースがあったので、試しにTwifluに設置してHovercardsを表示できるようにしてみました。

↑ ユーザーIDにマウスオーバーすると、こんな風に Hovercards が表示されます。

↑ Twifluマップのほうにも設置しました。

というわけで簡単に使い方を。

1. アプリケーションの登録

New Twitter Application | dev.twitter.comからアプリケーション(サイト)の情報を登録します。Callback URLはOAuthを利用する場合は必要になると思いますが、Hovercardsを表示するだけなら不要です。

あと日本語設定でログインしていると項目に変な日本語があてられているので、Twitterを英語設定にしてアプリケーション登録したほうがいいです。

2. JavaScriptをコピペ

↑ 登録完了するとこんな画面が表示されるので、表示されているコードをheadタグ部分にコピペします。

<script src="http://platform.twitter.com/anywhere.js?id=***&v=1"></script>
<script type="text/javascript">
   twttr.anywhere(function(twitter) {
       twitter.hovercards();
   });
</script>

↑ この twttr.anywhere の中身を色々とカスタマイズして使うみたいです。

3. Hovercardsを表示させたい a タグに class=”twitter-anywhere-user” を設定

Hovercardsを表示させるには、サイト上でTwitterのユーザーIDを表示させているリンクに class=”twitter-anywhere-user” というクラス名を追加します。

これだけ。

ドキュメントを見ると、ほかにも「@ユーザーID」の文字列を自動的にリンクにする機能や、フォローボタンの設置、ツイート投稿フォームの設置、ログインといった機能も備えているようです。

» Welcome to @Anywhere | dev.twitter.com
» Twiflu – ツイフル | 新型インフルエンザの今をチェックするサイト

ツイートで共有

コメントを残すコメントをキャンセル

著者について

F.Ko-Ji

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など

コメントを残す コメントをキャンセル

著者について

F.Ko-Ji

コメントを残すコメントをキャンセル