今では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」タブをクリックして設定画面にジャンプします。
「OAuth tool」タブをクリックして「Consumer key」を控えておきます。
JavaScriptタグの設置
テンプレート＞HTML の編集から以下のタグを<head>内に設置します。
<script src="http://platform.twitter.com/anywhere.js?id=「Consumer key」&v=1" type="text/javascript"></script><script src='http://platform.twitter.com/anywhere.js?id=「Consumer key」&v=1'/>その下に以下のscriptを設置します。
<script type="text/javascript">
twttr.anywhere(function (T) {
T.hovercards();
});
</script> twttr.anywhere(function(T){
T(".twitter").hovercards({
username: function(node) {
return "ichitaso";
}
});
});組み合わせると
<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タグが生成されます。
InformationのTwitterアイコンにマウスホバーすると、おいらのアイコンが出てくるようにでけた！ http://t.co/FUrDbIFK
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>Blogger（XHTML）以外で利用される場合は、// <![CDATA[ // ]]>の部分を消して下さい。
なんとなく難しく思えるかもしれませんが、やってみると意外と簡単に設置できるので、まだ試していない方は参考にしてみて下さいね！
Newer Post
