にっしの日誌: ブログにTwitterのホバーカードを導入してみた

こんにちは。ラボ充してます、にっしーです。
このブログとは別に共同ブログを運営してます。
そのブログのTwitter連携を強化したかったのでTwitterホバーカードを導入しました。

ホバーカード機能

"@username"という文字列にカーソルを乗せた時に、
そのユーザのプロフィールを表示する機能。

Twitter@Anywhereの機能はこちらのデモがわかりやすいです。
>> Twitter の @Anywhere を試す « Where is the truth

Javascriptを使ったTwitter@Anywhereというサービスのほんの一部の機能です。
が、ブログにはこの機能だけで十分だったので、忘れないようにメモ。

1.まずこのページに飛んでアプリケーションを作成。

・Name

なんでもOK。かぶってたらダメみたい。

・Description

これもてきとー。

・Website

導入したいブログURLを記入。

・Callback URL

導入したいブログURLを記入。

下部の「Create your Twitter application」をクリックして次へ。

Accessは「Read and Write」を選択。

で、アプリ作成。

こんな画面出てきたらOK。

以下をブログの<head>内にコピペ。

twttr.anywhere(

function(twitter) {

twitter.hovercards();

}

);

</script>

(key)の部分は上画面の「Consumer key」をコピペ。

エラーが出た場合は&を「&」に変更。

たったこれだけでブログに導入できました。

にっしの日誌