JavaScriptで『Twitter @Anywhere』を実装してみた

今ではWebに欠かせない存在となったTwitter、ブログを書く上でもTwitterの情報を元に記事を執筆することが多々あることかと思います。

今回は、@ユーザーIDと書くだけで自動的にTwitterアカウントのリンクが挿入される『Twitter Anywhere』をBloggerに導入する方法とその他Twitter関連のサービスを利用した時に便利なTipsを紹介致します。

Twitter Anywhereの導入方法

https://dev.twitter.com/apps/new

まず、こちらから自分の作るアプリケーションを登録します。

「Create a new application」をクリック

このような感じで情報を入力します。

記入が終わったら下に進み『Yes, I agree』にチェック
画像認証を入力し『create your twitter application』をクリックします。

これでアプリの登録ができました。

アクセスレベルの変更とConsumer keyの取得

「Setting」タブをクリックして設定画面にジャンプします。

デフォルトはRead Onlyなので、Read and Writeに変更します。その後、画面下の『Update this Twitter application's settings』をクリックして設定を保存します。

「OAuth tool」タブをクリックして「Consumer key」を控えておきます。

JavaScriptタグの設置

テンプレート＞HTML の編集から以下のタグを<head>内に設置します。

<script src="http://platform.twitter.com/anywhere.js?id=「Consumer key」&v=1" type="text/javascript"></script>

ただし、BloggerではXHTMLベースのため以下のように変更します。

<script src='http://platform.twitter.com/anywhere.js?id=「Consumer key」&amp;v=1'/>

「Consumer key」は控えておいたものに書き換えてください。

その下に以下のscriptを設置します。

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards();
  });
</script>

このままでも動作しますが、自分のブログの場合「Information（画面右上）」の部分にTwitterへのリンクを掲載しているので、そこにマウスホバーしたとき動作するようにします。

  twttr.anywhere(function(T){
    T(".twitter").hovercards({
      username: function(node) {
        return "ichitaso";
      }
    });
  });

これは、指定した要素（IDやCLASS）に指定したTwitterIDを表示させる時に使用します。

組み合わせると

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T.hovercards();
    T("指定した要素").hovercards({
      username: function(node) {
        return "ユーザーID";
      }
    });
  });
</script>

このような形になります。これで設置が完了です！実際に確認してみましょう。

動作の参考→@ichitaso @Blogger

「もっと読む」をクリックすると詳細な情報が見れますよ！

※ただし、ホバーした時のアイコン（アバター）をクリックすると反応しなくなるようです

逆にホバーさせたくない場合は、aタグで記述してあげると動作しません。

@ichitaso

その他にも様々なことが出来るようになるので、興味のある方は以下が参考になるかと思います。

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

Demo | jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support

また、純正でも色々とブログやサイトに利用できる機能が充実してきているので、そちらを利用する方が簡単にできるためオススメです。

Twitter / 素材

Twitterのツールを利用した際のaタグにtarget="_blank"を追加する

Twitterの個別ページ（詳細→このツイートをサイトに埋め込む）からツイートを掲載することができるようになりましたが、アンカータグにtarget属性が付いていないため同じウインドウで開くようになっています。

InformationのTwitterアイコンにマウスホバーすると、おいらのアイコンが出てくるようにでけた！ ichitaso.blogspot.com
— いち☠さん (@ichitaso) 4月 5, 2012

『Twitter Anywhere』でも同様で、記事の冒頭に記載した場合に誤ってリンクをクリックした時に、ウインドウが切り替わってしまうため不便に感じていました。

以前にも「Bloggerを便利に利用する方法 Tipsまとめ」で紹介しましたが、「BlackBird bookmarklet」も同様で、新しくブックマークレットを修正して使用していました。

下記Linkをブックマークバーにドラッグ＆ドロップし、個別のTweetページでブックマークレットを実行するとHTMLタグが生成されます。

BlackBird JP

InformationのTwitterアイコンにマウスホバーすると、おいらのアイコンが出てくるようにでけた！ http://t.co/FUrDbIFK2012年4月5日 12:34 via TweetDeckいち☠
ichitaso

ただし、最近のTweetでは上手く作動しないものもあるため、純正の埋め込みタグを使って記事を執筆することもあり、今回『Twitter Anywhere』を導入したこともあるので、Twitterで生成された純正のものでも、JavaScriptを使ってaタグにtarget="_blank"を追加するようにしました。

<script>
// <![CDATA[
function blankLinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if (anchor.getAttribute("href") && ((anchor.getAttribute("class") == "twitter-anywhere-user") || (anchor.getAttribute("class") == "screen-name url") || (anchor.getAttribute("class") == "link") || (anchor.getAttribute("class") == "view-details") ||  (anchor.getAttribute("class") == "vcard") || (anchor.getAttribute("class") == "permalink"))) anchor.target = "_blank";
    }
}
window.onload = blankLinks;
// ]]>
</script>

これを、『Twitter Anywhere』で導入したコードの下あたりに追記してあげると、誤ってリンクをクリックしても新しいタブ（ウインドウ）で開くようになります。（ただし、IEとWindowsのSafariでは上手く動作しません）

Blogger（XHTML）以外で利用される場合は、// <![CDATA[　// ]]>の部分を消して下さい。

なんとなく難しく思えるかもしれませんが、やってみると意外と簡単に設置できるので、まだ試していない方は参考にしてみて下さいね！