GoogleBuzzのウィジェットを作ってみた

Twitterなど他のSNSには公式ウィジェットがあるのに、Googleバズにはそれが見当たらないので、海外サイトで出回っていないか探したところ、「MoreTechTips」というサイトを見つけました。

ここのTripleBarを拝借して、ちょっと改造…。

 
 
 

  
loading..
 

ビブルカード風な背景（ここではブログの記事幅に合わせて550×300pxで作りました）をつけて、上下左右を適当にパディング。「username」は自分のIDに置き換えてください。「n:～」の数字はローディングするbuzz数。「show_n:～」は一度に表示するbuzz数です。

loading..

いかがでしょう。
バズがローディングされる度に画面がピクピク動くのが気になりますが、なんとか完成です。

Twitterバッジがつけられないときは…

「ツイッターの旗（バッジのこと）ってどうやったら付けられるの？」

という質問を、年明けに連続3件いただいたのをきっかけに、
このブログにもツイッターバッジ「Follow Me」をつけてみました。→→→


取り付け方は簡単。

「twitter，badge，follow」などの単語を検索にかければ、バッジを配布しているサービスがいくつか出てきます。

その中の気に入ったサイトで、自分のツイッターアカウントを入力し、好みのデザインを選択すれば、タグが吐き出されます。

それを自分のホームページやブログに貼り付けるだけでO.K.。

ところが・・・！
BloggerブログやGoogleサイトで作ったホームページにはバッジが効きません。
理由は、Bloggerはスクリプトを埋め込むにはHTMLエンコードが必要で、Googleサイトはスクリプトを実行できないシステムになっているからです。

そこで、次のような方法はいかがでしょう。


【Blogger】に【go2web20】のバッジを設置する

1. Go2web20で次のように設定する。



2. もらったコードの一部、「<」と「>」を次のように書き換える。



3. このコードを、Blogger管理画面（「デザイン」＞「HTMLの編集」＞「テンプレートを編集」）で、</body>の直前に置きます。最後に「テンプレートを保存」を忘れずに！

【Googleサイト】に【Twitterボタン】を設置する
　※バッジは使えないのでボタンにします。

1. Twitterボタンで次のように設定する。



2. もらったコードをGoogleサイト編集画面（「その他の操作」＞「サイトを管理」＞「サイトのレイアウト」）でサイドバーに貼り付けます。（「サイドバーにアイテムを追加」＞「テキスト追加」＞「HTMLソースを編集」）最後に、「OK」と「変更を保存」を忘れずに！

JavaScriptでTwiる

上記事の続き・・・


statusを使わずに「JavaScriptでtwiる」方法も考えてみました。

<a href="javascript:(function(){f='http://twitter.com/home?status='+encodeURIComponent('他サイトからの引用は、こうすると入力する手間が省けるよ！ http://blog.setoshi.com/2009/08/twi.html ');a=function(){if(!window.open(f,'_blank'))location.href=f};if(/Firefox/.test(navigator.userAgent)){setTimeout(a,0)}else{a()}})()">JavaScriptでtwiる方法…</a>

↑こう記述すると、、、

JavaScriptでtwiる方法…

↑こうなります。

もちろんアイコンを使って、、、

JavaScriptで方法…

↑としても使えます。