twitterのシェアボタン設置で「上吹き出し」にしたかったのにつまづいた

photo credit: paz.ca

おはようございますです。

成長する為にすることの第一歩は「真似る」ことだと思ってるナカジです。

先日、拝読させてもらってるブロガーの方々をまねして

シェアボタンの設置方法を変更しました。

ですが

twitterのシェアボタンを「上吹き出し」

にしたかったのにつまづいたのでその部分を共有したいと思います。

以下のシェアボタン作成ページで作成すると

https://twitter.com/about/resources/buttons#tweet

上記の画像のように「横吹き出し」になります。

これを上記のように「上吹き出し」にする方法は

Twitter Developers　サイト

に詳しく書いてありますが、英語です．．．

ではやり方を説明します。

やり方は簡単！！

シェアボタン作成ページで生成した「コードの１行目」に

data-count=”vertical”

を付け加えます。

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</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=”//platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);}}(document,”script”,”twitter-wjs”);</script>

コレだけです。

ただ、落とし穴が．．．

シェアボタン作成ページで作成する時に

ボタン（大）

にチェックを入れると

<a href=”https://twitter.com/share” data-lang=”ja” data-size=”large”>ツイート</a>

とコードがでてくるのですが、なぜか

「data-size=”large”」があると

「上吹き出し」にならなかったんです！！

【OK版】

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical”>ツイート</a>

【NG版】

<a href=”https://twitter.com/share” data-lang=”ja” data-count=”vertical” data-size=”large”>ツイート</a>

わたしだけかも知れませんが、共有しておきたいと思います。