Google +1 ボタンがふわ〜っと出て来て、Google+ でシェアも出来る Bookmarklet

Google +1 ボタンがふわ〜っと出て来て、Google+ でシェアも出来る Bookmarkletを作りました。

見た目的にはこんな感じのが、画面左からひゅーっと出てきます。( Chrome, Firefox 対応 )

Add +1 ← これをブックマークバーに追加 (ドラッグ & ドロップ )


+1 ボタン上にマウスオーバーで、Google+ でシェアするためのツール
チップみたいなものが出てきて、そのまま画面内から Google+ に投稿できます。(要ログイン)


ソースコード

やっている事を大雑把に解説すると、
まず、画面外で div を作って、その中に +1 button のソースコードを書いたものを設置しています。そして、+1 の解釈用 JavaScript を dom 内に取り込んで、+1 ボタンをレンダリングしつつ、div のポジションを画面内に設定して、CSS3 transition をトリガーして、div を画面内にスライドさせています。