アメブロで@anywhereを使ってみよう！【twitter】

@anywhereはその名のとおり、どこでもツイッターの基本操作を可能にするためのjavascriptAPIです。
従来のようにPHPなどのサーバーサイドを準備しなくても、javascriptを使って認証や書き込みができ、その場フォローボタン付きのクロスブラウザ対応ホバーカードまで簡単に表示できます。
ツイッター好きなら使わない手はないでしょう！

では早速使い方を紹介しましょう！

●アプリケーション登録

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



まずは一番上の『NAME』の欄にあなたのアプリケーションの名前を書きましょう。
今回はwebアプリケーションを作る、というより、ブログの装飾に使うという程度ですので、あまり固く考えないで大丈夫です。
『tweet@ameba blog by 自分のアメーバID』などでよいでしょう。

※追記：平凡君より『Twitterをnameに含めることはできませんというエラーが出ます』との報告がありました。
報告ありがとうございます！

ユニークな名前でないとエラーが出ますので、自分のアメーバIDを一部に使用するのが良いと思います。

次に『Description』の欄に、アプリケーションの説明文を書きます。
『アメブロとツイッターを連携させます』などで良いかと思います。短すぎるとエラーが出るのでご注意を。

次にWebSiteの欄に自分のブログのURL(http://ameblo.jp/自分のアメーバID/)を記入し、callbackURLの欄はとりあえず空白もしくはブログのURLを書きましょう。

記入が終わったら下に進み、I agreeのチェックを入れ、その下の画像認証を入力、『create your twitter application』をクリックします。
これでアプリの登録ができました！

●アクセスレベルを変更する

登録が済むと、次のようなページにジャンプします。

ここでアクセスレベルを変更します。
デフォルトはRead Onlyなので、Read and Writeに変更します。
Settingをクリックして設定画面にジャンプします。
Application Iconの下辺りにAccessの欄がありますので変更してください。
変更したら画面一番下のUpdate this Twitter application's settingsをクリックして設定を保存してください。

●フリープラグインにjavascriptを記述する

次にSettingsタブの左にあるDetailタブをクリックします。
OAuth settingsの欄にConsumer keyという項目があるので、それをコピーします。


※反転させた部分です。

次にアメブロのフリープラグインに次のように書きます。

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
※YOUR_API_KEYの部分はさきほどコピーしたConsumer keyに変更します。

これで準備はOKです！

●ホバーカードを使ってみる

では早速、ホバーカードを使ってみましょう。
フリープラグインにjavascriptを記述します。
今回はサイドバーのプロフィールの画像にホバーさせたときに自分のツイッターカードが出てくるようにしてみましょう。

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script>
<script type="text/javascript">
twttr.anywhere(function(twt){
  twt(".imageLink").hovercards({
    username: function(node) {
      return "あなたのツイッターID";
    }
  });
});
</script>

これだけで表示することができます。超簡単！

ちなみに『.imageLink』の部分はCSSセレクタなので、好きなものに変更が可能です。
例えば前々回の記事で増やしたツイッターボタンにホバーすると表示されるようにするには、『#profileTwitterBtn』に変更すれば大丈夫です。

@anywhereには他にもいろいろな機能がありますが、それはまた今度ということで。
興味のある方は是非お試しを～。