twitterを自分のサイトに超簡単に組み込める@Anywhere ｜ eater blog 黒葛原　道の日記｜宮崎でグラフィックデザイン、Webデザイン制作を行っています。

twitterを自分のサイトに超簡単に組み込める@Anywhere

2010 年 4 月 16 日

4/14にtwitterから発表された「@Anywhere」をさっそく試してみた。

「@Anywhere」は自分のサイトに簡単にtwitter連携機能を組み込めるサービスです。

詳しくはこちら
Twitter機能を自社サイトに数分で組み込める「@Anywhere」スタート (サンプルあり) 【増田(maskin)真樹】

で、出来ることは、

1. @名前へのオートリンクとプロフィールカードの表示
HTML上で「@名前」になっている文字列を自動でTwitterへのリンクに変換する。マウスオーバーすればプロフィールカードがポップアップする。大きなプロフィール欄を作成することもできる。

2. Twitterアカウントによるログインの簡易化
これまでは、安全な認証のためにはOAUTHを使ってその仕組みを構築しなければならなかったが、JavaScriptを貼るだけできるようになった。

3. 投稿できるフォーム「TweetBox」の埋め込み
(未確認の部分あり)Twitter.comの投稿ボックス同等のフォームを埋め込むことができる。

Twitter機能を自社サイトに数分で組み込める「@Anywhere」スタート (サンプルあり) 【増田(maskin)真樹】

さっそく試してみました。以下手順。

@Anywhere Applicationを作る

@Anywhereのサイトから「Start using it now」をクリックすると@Anywhere Application登録画面に移動します。

このページで@Anywhereを利用するための設定を行います。
以下、このサイトで利用するために行った設定。テキトーなので間違ってるかもしれませんので、あしからず。

Application Name→アプリケーション名として表示される名前。テキトーでいいと思います。
Application Website→アプリケーションのサイトURL
お知らせ機能→よくわかりません。
Callback URL→サイトのURLを入れました。

@名前へのオートリンクとプロフィールカードの表示

で、登録が完了するとJavaScriptのコードが表示されます。このコードを<head>タグの間に貼り付けてください。

この状態でページ内にtwitterのアカウント名「@名前」を記述すれば自動的にリンクとプロフィールカードが表示されます。

例）@armytoru

follow meボタンの表示

次にfollow me ボタンを表示してみます。

以下のコードの「twitterapi」の部分を自分のtwitterアカウント名に変更します。

<div id="follow-twitterapi"></div>
<script type="text/javascript">
  function onAnywhereLoad(twitter) {
    // this is the callback function you specified in your initializer
    twitter('#follow-twitterapi').followButton("twitterapi");
  };
</script>

で、followボタンを表示したい場所に貼り付けます。
それだけでfollowボタンが表示されるはず。

公式ドキュメントはこちら（http://dev.twitter.com/anywhere/begin#follow-buttons）

投稿できるフォーム「TweetBox」の埋め込み

※tweetが反映されないので、検証中です！

こちらもJava Scriptのコードを挿入します。
ドキュメントページを参考に、こちらのサイトでは以下のコードを貼り付けました。

<span id="placeholder"></span>
<script type="text/javascript">
  twttr.anywhere("1", function (twitter) {
  twitter("#placeholder").tweetBox({
  counter: false,
  height: 100,
  width: 538,
  label: "twitterで@armytoruに一言",
  defaultContent: "@armytoru "
  });
});
</script>

※↓投稿できないはず。出来ました！
※追記：
TweetBoxでつぶやくには、アプリケーションのアクセス権をRead & Writeに変更しないといけません。
こちらのページにアクセスし（http://twitter.com/apps/）@Anywhereアプリをクリック→「Edit Application Setting」ボタンをクリック→「Default Access type」を「Read & Write 」に変更して保存してください。

公式ドキュメントはこちら（http://dev.twitter.com/anywhere/begin#tweetbox）

いろいろカスタマイズ出来るみたいですねー。
他にも機能がありますが、オフィシャルサイトのドキュメントを参考にしてみてください。

まー英語なんでわからないっすけど、エキサイト翻訳＆英語が出来る彼女のおかげでなんとかできましたわ。

@Anywhere公式（http://dev.twitter.com/anywhere）

@Anywhere公式ドキュメント（http://dev.twitter.com/anywhere/begin）

追記：
なんだかんだ超簡単ではなかったです。TweetBoxでtweetできないし…。すみません。