公式Twitter Button(ツイートボタン)をIFRAMEしか使えない環境に設置する | 王様の耳はロバの耳

王様の耳はロバの耳

ゆがんだかがくしゃのたのしいにっきだよ

公式Twitter Button(ツイートボタン)は便利なのですが、
Google AppsやBlogなど、セキュリティポリシーにより外部のJavaScriptが使えない環境もあります。

白井研のHP(http://www.shirai.la)もGoogle Appsで構築しているので本当に制約が多い!

とはいえホイホイ移行しているわけでにもいかないのでIFRAMEしか使えない環境に設置する方法を開拓。

【情報ソース】http://dev.twitter.com/pages/tweet_button

IFRAMEで構築する場合はこのコードでいけるようです。
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html"
style="width:130px; height:50px;">
Google AppsはIFRAMEが使えないようですが、実は「HTML」直接編集モードにして記述すると部品化され内部でIMGタグに変換してくれます。
#ちなみに、新しいTwitterのUIに移行してからというもの、IFRAMEでtwitter.comを表示すると強制的に新しいウィンドウを開くので非常に危険です。編集できなくなります。

ちなみに、そのままのコードでは「0」が表示されているだけで機能しません。
例えば研究室の私のページ(http://www.shirai.la/members/akihiko-shirai)に貼る場合
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html?url=http://www.shirai.la/members/akihiko-shirai"
style="width:130px; height:50px;">
といった形になります。

いろいろオプションがあるので、細かい設定は公式の資料を読んでみてくださいね!