F.Ko-Jiの「一秒後は未来」

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

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

twitter-anywhere-1.gif

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

twitter-anywhere-2.jpg

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

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

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

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

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

2. JavaScriptをコピペ

twitter-anywhere-3.gif

↑ 登録完了するとこんな画面が表示されるので、表示されているコードを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 – ツイフル | 新型インフルエンザの今をチェックするサイト

【関連記事】
» Twitter、サイトにTwitter機能を埋め込める「@anywhere」スタート – ITmedia News

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

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

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