Twitter連携機能を自分のサイトに組み込む@Anywhereを試しました
Twitterが@Anywhereというサービスを発表しました。
Twitter、サイトにTwitter機能を埋め込める「@anywhere」スタート
早速、このブログに設定しましたが、この@Anywhereというサービスは、ユーザが自分のサイトにJavaScriptコードを追加するだけでTwitterと連携ができてしまう優れたサービスです！@Anywhereに対応することで、@daisakuというリンクにマウスカーソルを合わせた際にTwitterプロフィールが表示できるようになります。すごく便利ですね！
@Anywhereに対応すれば、
・ページ内のTwitterアカウント名（@で始まるユーザー名）に自動でリンクをはる
・アカウント名の上にマウスを置くとそのアカウントのアイコンと短いプロフィール、フォローボタンをポップアップで表示する「Hovercards」
・フォローボタン
・その場でツイートできる「Tweet Box」
・その場でTwitterにログインあるいはサインアップできる機能
ということができます。
今回は@名前へのオートリンクとプロフィールカードの表示、TweetBoxを導入してみました。以下、その際の手順です。10分もあればできる作業なので簡単ですよー（細かい点はAnywhereの説明ページを参考にしてください）。
1. @anywhereでサイト登録
まず、Anywhereのサイトでサイト登録します。
・Application Name→サイト名
・Application Website→サイトのURL
・Callback URL→サイトのURL
を入力し、登録します。登録後、遷移した画面にAPI Keyが表示されているので、そこだけチェックしておきます。
2. @名前へのオートリンクとプロフィールカードの表示
headタグ内に
<script src=”http://platform.twitter.com/anywhere.js?id=APIKEY&v=1″ type=”text/javascript”></script>
<script type=”text/javascript”>
twttr.anywhere(onAnywhereLoad);
function onAnywhereLoad(twitter) {
twitter.linkifyUsers();
twitter.hovercards();
};
</script>
を追加します。
3. TweetBox （投稿フォーム）の表示
フォームを表示させたい場所に
<span id=”placeholder”></span>
<script type=”text/javascript”>
twttr.anywhere(”1″, function (twitter) {
twitter(”#placeholder”).tweetBox({
counter: true,
height: 100,
width: 400,
label: “@daisakuへTwitterでメッセージを送信”,
defaultContent: “@daisaku ”
});
});
</script>
を追加します。
そしてこれで終わり！！・・・のはずですが、いまのところTweetBoxでの投稿が成功していません。。
うーん、分からないなー。成功したら、追記しておきます。
以下、2010/4/17 追記
TweetBoxでの投稿、できるようになりました！
Twitterの機能をJSで簡単に導入できる「@Anywhere」の使い方メモ
で知ったんですが、TweetBoxを使うためには登録したアプリのアクセス権限を「Read-only」から「Read & Write」に変える必要がありました。
ただ、その変更はhttp://dev.twitter.com/appsではできなくて、http://twitter.com/appsでやる必要がありました。こんなの、分からないよー。
でも、使えるようになってよかったです！
