公式ツイッターボタンにフォロワー数を表示させる方法」に続いて、妙に不親切なツイッターボタンの補足的解説。



バルーン型のツイートボタンを設置する方法






ツイッターが公式で提供している上記のツイートボタンなのですが、公式サイトの出力オプションに「バルーン型」が掲載されていないんですよね。



スクリーンショット 2013 02 07 6 57 50


Google+、Facebook、はてなブックマークはバルーン型にできるので、デザインの統一感を出すためにも、こやつをバルーン型にしたいところです。

スクリーンショット 2013 02 07 6 59 28

デベロッパー向けのページを見ると、出力されるコードに含まれる「data-count」の値に「vertical」を入れると、バルーン型になるようです(「data-count="vertical"」)。

スクリーンショット 2013 02 07 7 00 55

さらに見ていくと、ページの下ほどに表示に必要なコードが掲載されていました。

スクリーンショット 2013 02 07 7 01 44

上記コードはURL、タイトルなどのカスタマイズがなされていないので、そのまま貼り付けても機能しません。WordPressブログに入れこむ場合はこのようにカスタマイズします。

[html]
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-via="IHayato" data-lang="ja" data-related="anywhereTheJavascriptAPI" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
[/html]




というわけで、当ブログも無事に吹き出しボタンを設置することができました!よかったよかった。