twitter @anywhereをブログに導入する方法
06/1
JavaScript, twitter @Anywhere No Comments
twitter @anywhereについて前に記事を書いた。
今回は、自分の日記用ブログにこれを導入してみた。案外簡単だったけど、ちょっとだけクセがあるので、メモ程度に書こうかなと思う。
1.APIキーを取得する
Register an @Anywhere Application に必要事項を記入して、APIキーを取得。
2.scriptタグを埋め込む
<script src="http://platform.twitter.com/anywhere.js?id=アナタのAPIキー&v=1" type="text/javascript"></script>
準備完了。次に、スクリプトを記述する。
3.スクリプトを記入して、読み込ませる
var myTwitter; // Twitter オブジェクト用変数。
<pre> // @Anywhere を初期化。初期化完了後は onAnywhereLoad をコールバック!<code>
</code>
twttr.anywhere(onAnywhereLoad /*, ウインドウコンテキストも指定可能 */);<code>
</code> // @Anywhere 初期化コールバック。初期化はここで行う。<code>
</code>function onAnywhereLoad(twitter){<code>
</code>myTwitter = twitter; // @Anywhere から授けられた Twitter オブジェクトを保存しておく。
myTwitter.linkifyUsers();<code>
</code>myTwitter('.hovercards-target').hovercards();<code>
</code>myTwitter('.follow-kz').followButton("kzxtreme");<code>
</code>/*お好みの初期処理を記述 */<code>
}
</code>
これをon loadさせる。
4.ログインボタンを付ける。
<code>
</code>myTwitter('#signin-anywhere').connectButton({<code>
</code>authComplete: function(signedInUser){ // コネクト/サインイン完了後のコールバック<code>
</code>/* 好きなことができます */<code>
</code>}});<code>
myTwitter(…)は、jQueryとおなじで、適用させたい要素を「…」に記述するとあとは
自動でボタンが生成される。
ログアウトボタンは・・・
<code>obj.anywhere.signOut();</code> //objは、オブジェクト用変数を定義
こんな感じ。これをクリックイベントを定義するとログアウトボタンができちゃう。
5.tweetboxの設置
ログインしている状態でいるとブログから直接つぶやく機能が実装可能だ。
<pre><code>myTwitter("#tweet-box").tweetBox({
counter: true, // あと何文字ですよの表示の有無
height: 100,
width: 620,
label: 'レッツツイート!',
defaultContent: 'ツイートボックスに予め入力しておく文字列',
onTweet: function(tweet, renderedTweet){
//処理したいプログラムを入れる
});</code></pre>
予め、ブログのタイトルとURLを「defaultContent」にいれておけば、
コンテンツ情報を含めた状態でツィートできるようになる。bit.lyと組み合わせても面白いと思う。
この他にもいろいろとできる。
hovercard機能や コンテンツに@nameがあると自動的にリンクを作っている機能もある。
これによって、どこでもtweetができるようになるね。
実装サイトはこちら
参考にしたサイト
やってみると面白いし、どこでもつぶやく場を用意したtwitterは、巨大なメディアとして成長するかもしれない。
Twitter
RSS