ツイートボタンを設置してみました。
PCからのアクセスなら、日付の左側に出てると思います。
一度でいいから、「ブログ更新」のツイートをしてみたくて
つけたんですけど、今後使うかどうか非常に怪しい(笑)
実はデフォルトのツイートボタンはもっと横長のやつで、
http://platform.twitter.com/widgets/tweet_button.html
これをもっとコンパクトなやつにしたかったんですけど、
公式にサポートされてるカスタマイズ項目では、
画像の張替えはできないみたいでした。
そこで、ローカルに保存して無理やり改造してしまいました。。。
以下は小難しい話なので適当にスルーしてください。
----
別の方法として、単純なアンカーで実装する方法もあり、
↓こちらで紹介されていますが
http://firespeed.org/diary2/read/read.php?diary=kenz-1318
これだと、背景画像は自分で用意してカスタマイズできるんですが
Firefoxだと、ツイート画面がポップアップじゃなくて
別タブで表示されてしまうんですよね。
あと、ウィンドウのサイズもデフォルトで、小さくならないし。
そこで、スクリプトとかを自前で改造することにしてみました。
方式としては、上記リンクで紹介されている「Scriptで呼び出す場合」と
同じ分類になります。
スクリプトの場所
http://platform.twitter.com/widgets.js
これをダウンロードして中身を見てみると、
このスクリプトから iframe を生成していました。
iframe の実体は、最初に紹介した tweet_button.html と同じ。
今度は tweet_button.html をダウンロードして見てみると、
スタイルシートで背景に画像を使っているところがありました。
言語ごとにクラスを定義していて、日本語だと以下の部分です。
.ja .tb,.ja .t-count,.ja .t-count a{background-image:url(/widgets/images/tweet_ja.png);}
まず、これを自前の画像にすれば入れ替えられますね。
これだけだと、iframe のサイズが前と同じなので、
今度は iframe のサイズを指定してるところを探しました。
それは、widgets.js の以下の部分です。
z={en:{vertical:[55,62],horizontal:[110,20], ...
言語と、ツイートカウンタ(たて、よこ、無しの3種類)ごとに
iframe のサイズが定義されているので、
ここを新しい画像のサイズに合わせればOK。
今回はカウンタ無しなので、none:[xxx,xxx] とか書いてあるところを
それぞれ 15 に書き直しました。
(用意したアイコンは 15x15 です)
それから、tweet_button.html にも、擬似セレクタで
背景画像をずらしてる場所があるので、ここもサイズ調整。
.tb:hover,.tb-focus{background-position:0 -15px;}.tb:active{background-position:0 -30px;}.ncount .t-count{display:none;}
ローカル環境でテストするため、
修正した tweet_button.html widgets.js と同じ場所に
自前で修正した画像を置きます。
そして、呼び出し元(ツイートボタンを貼るHTML)から、
ローカルの widgets.js を指定して、PC上でテストしてみたら
無事にうまく動きました。
しかし、これをネットワーク上にアップロードすると動きません。
Firebug で確認したところ、
document.domain が不正だ!とか何とか。
場所は、tweet_button.html の中の埋め込みスクリプトで
document.domain="twitter.com";
とやっているところです。
何のためにこの式があるか分からなかったで、思い切って削除したら
問題なく動きました(笑)いいのかこれで。。。
まぁでも、非常にコンパクトなボタンが出来上がりました。
PCからのアクセスなら、日付の左側に出てると思います。
一度でいいから、「ブログ更新」のツイートをしてみたくて
つけたんですけど、今後使うかどうか非常に怪しい(笑)
実はデフォルトのツイートボタンはもっと横長のやつで、
http://platform.twitter.com/widgets/tweet_button.html
これをもっとコンパクトなやつにしたかったんですけど、
公式にサポートされてるカスタマイズ項目では、
画像の張替えはできないみたいでした。
そこで、ローカルに保存して無理やり改造してしまいました。。。
以下は小難しい話なので適当にスルーしてください。
----
別の方法として、単純なアンカーで実装する方法もあり、
↓こちらで紹介されていますが
http://firespeed.org/diary2/read/read.php?diary=kenz-1318
これだと、背景画像は自分で用意してカスタマイズできるんですが
Firefoxだと、ツイート画面がポップアップじゃなくて
別タブで表示されてしまうんですよね。
あと、ウィンドウのサイズもデフォルトで、小さくならないし。
そこで、スクリプトとかを自前で改造することにしてみました。
方式としては、上記リンクで紹介されている「Scriptで呼び出す場合」と
同じ分類になります。
スクリプトの場所
http://platform.twitter.com/widgets.js
これをダウンロードして中身を見てみると、
このスクリプトから iframe を生成していました。
iframe の実体は、最初に紹介した tweet_button.html と同じ。
今度は tweet_button.html をダウンロードして見てみると、
スタイルシートで背景に画像を使っているところがありました。
言語ごとにクラスを定義していて、日本語だと以下の部分です。
.ja .tb,.ja .t-count,.ja .t-count a{background-image:url(/widgets/images/tweet_ja.png);}
まず、これを自前の画像にすれば入れ替えられますね。
これだけだと、iframe のサイズが前と同じなので、
今度は iframe のサイズを指定してるところを探しました。
それは、widgets.js の以下の部分です。
z={en:{vertical:[55,62],horizontal:[110,20], ...
言語と、ツイートカウンタ(たて、よこ、無しの3種類)ごとに
iframe のサイズが定義されているので、
ここを新しい画像のサイズに合わせればOK。
今回はカウンタ無しなので、none:[xxx,xxx] とか書いてあるところを
それぞれ 15 に書き直しました。
(用意したアイコンは 15x15 です)
それから、tweet_button.html にも、擬似セレクタで
背景画像をずらしてる場所があるので、ここもサイズ調整。
.tb:hover,.tb-focus{background-position:0 -15px;}.tb:active{background-position:0 -30px;}.ncount .t-count{display:none;}
ローカル環境でテストするため、
修正した tweet_button.html widgets.js と同じ場所に
自前で修正した画像を置きます。
そして、呼び出し元(ツイートボタンを貼るHTML)から、
ローカルの widgets.js を指定して、PC上でテストしてみたら
無事にうまく動きました。
しかし、これをネットワーク上にアップロードすると動きません。
Firebug で確認したところ、
document.domain が不正だ!とか何とか。
場所は、tweet_button.html の中の埋め込みスクリプトで
document.domain="twitter.com";
とやっているところです。
何のためにこの式があるか分からなかったで、思い切って削除したら
問題なく動きました(笑)いいのかこれで。。。
まぁでも、非常にコンパクトなボタンが出来上がりました。
[2]らむてが
河井さんのは無理にでも休みを作るつもりです。
つるたさんとも暫くお会いしていませんね。
またお会いできる日を楽しみにしています!
※HN変えたのでコメント少し編集させて頂きました
[1]つるた
羨ましいです。
こちらはなかなか諸事情で東京にも大阪にも行けない日々が続いています。
秋山羊子さんも中田真由美さんも一緒に以前見ましたよね。
河井さんの追悼コンサートは平日なので迷っています。
このままだと無理そうかなと思います。