twitterAnywhereを導入してみたよ

投稿者: | 2011/02/01

はじめに

・この記事は、@goryugo さんのこの記事 *01Twitter Anywhereで@名前リンクを簡単自動生成 で気になっていたtwitterAnywhere の導入について、更に @nori510 さんのこのツイートに触発されて書いたものです。
・この記事は、WordPress 3.x 、Themes:neutral での内容です。
・この記事の内容を実行した結果に、当方は一切責任を負いません。 *02定番の逃げ口上ですが、勘弁して下さい。

twitterAnywhere って何よ?

ひとことで言うと、
記事内のTwitterアカウントに自動でリンクを貼ってくれるブログ拡張機能。
ちょー楽ちん。

それだけじゃないぜ twitterAnywhere

Twitterアカウントにリンクを自動で貼ってくれるだけなら、
書き手が楽なだけです。

が、それだけじゃありません。
リンクを貼ったTwitterアカウントの上にマウスカーソルを持って行くと、
そのアカウントの情報がポップアップ表示されるのです!

まあ実際に見るのが早いよね

百文は一見に如かず。
まあ、実際にどんな感じか見てちょーよ。 *03なんとなく名古屋人気どり

下のTwitterアカウントの上に、マウスカーソルを合わせてみて下さい。

@uma_blue

どうです?
ちゃんとポップアップが表示されたでしょう?
ポップアップの「more…」をクリックすれば、より詳細な情報を見る事もできます。
「フォローする」ボタンだって、ちゃんと付いています。

前置きはいいから

例によって長い前置きでしたが、ここからが本番です。
twitterAnywhere の設置手順を説明しましょう。

大まかな流れ

だいたい、以下の様な感じで進行します。

  1. API-Keyを入手する。
  2. HTMLヘッダーを書き出すファイルを探す。
  3. JavaScriptを書き込む。
  4. 終了!

1.API-Keyを入手する

twitterAnywhereを利用するには、
まずAPI-Keyというヤツを入手しなければなりません。 *04「API-Key」って何?という人は、Google先生に聞いてみてね。
API-Key は、ここから入手します。

詳しい入手方法は、@goryugo さんのこの記事 *05Twitter Anywhereで@名前リンクを簡単自動生成 に書いてあるから、
そっちを見てくれ! *06 手抜きじゃないよ。参照だよ。

2.HTMLヘッダーを書き出すファイルを探す。

twitterAnywhere はJavaScriptを利用するのですが、そのJavaScriptはHTMLヘッダーに埋め込むのが手っ取り早いです。
んで、WordPressなんかだと、HTMLヘッダーを書き出すPHPプログラムのソースコードファイルがあるはずなので、そいつを探します。
だいたい、header.php とか言う名前のファイルがそうです。

ただし!ここで注意。

WordPressはブログデザインを「テーマ」という機能で変更可能です。
「テーマ」によっては、独自の header.php ファイルを持つ場合があります。
その場合は、そちらが目的の「HTMLヘッダーを書き出すファイル」の可能性があります。 *07 つか、その可能性の方が高いです。

実際、私の場合は以下の場所にある header.php が目的のファイルでしたが、
他の場所にもheader.phpファイルがあって、少し悩みました。
⁄ wp-content ⁄ themes ⁄ あなたの使っているWordPressテーマ ⁄ header.php

3.JavaScript を書き込む

見つけた「HTMLヘッダーを書き出すファイル」に、
以下のJavaScriptを書き加えます。

<script src="http:⁄⁄platform.twitter.com⁄anywhere.js?id=ここにAPI-Key&v=1"><⁄script>
<script type="text⁄javascript">
twttr.anywhere(function(twitter) {
	twitter.hovercards();
});
<⁄script>

書き加える場所は、header.php ファイルの中の <⁄head> の手前あたりが無難です。

header.php ファイルにJavaScriptを書き加えたら、サーバーにアップロードして、動作確認です。 *08 ダッシュボードから直接編集可能な人はそのままでOKです。

4.終了!

どうですか?
うまく行きましたか?

駄目だった時は、以下の点をチェックしてみましょう。
・<head><⁄head>内に、書き加えたJavaScriptはちゃんとありますか?
・API-Keyは発行されたものを設定しましたか?
・他にheader.phpファイルはありませんか?

くどいようですが、再度の逃げ口上

とりあえず、気になっていた機能をてきとーに導入しただけなので、内容的に正しいかどうかは全く保証しかねます。
特にheader.phpファイルの編集は事前にバックアップを取っておく事をおすすめします。


脚注

脚注
01, 05 Twitter Anywhereで@名前リンクを簡単自動生成
02 定番の逃げ口上ですが、勘弁して下さい。
03 なんとなく名古屋人気どり
04 「API-Key」って何?という人は、Google先生に聞いてみてね。
06 手抜きじゃないよ。参照だよ。
07 つか、その可能性の方が高いです。
08 ダッシュボードから直接編集可能な人はそのままでOKです。

twitterAnywhereを導入してみたよ」への2件のフィードバック

  1. ピンバック: Tweets that mention twitterAnywhereを導入してみたよ | 極上の人生 -- Topsy.com

  2. ピンバック: [link]こする女がポケべガに覚醒とかEvernoteはだいたいでいいっていう話 | goryugo, addicted to Evernote

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください