ちょいと和洋風のスマホ版のソーシャルボタンの配置を変更しました。より押しやすくするために、広告の隣に配置するのをやめて、ボックスタイプを横並びにするというカタチを取りました。
しかし、その際、Twitterで1からツイートボタンを作成しようと思ったら、ボックスタイプがつくれなくなっていました・・・。
「もうボックスタイプは設置出来ないのか・・・。」
と思ったらスタイルシートとHTMLをいじれば出来る様になりましたので、その方法をメモしておきます。
ツイートボタンのCSSとHTMLをいじる！
［み］Twitterのボックス型のツイートボタンを作成する方法 | みはら.com
ボックスタイプのツイートボタンを作成する方法は、この記事を参考にしました。ただ、これだけではボックスタイプにならなかったので、僕なりの対策も添えて以下にメモしておきます。
これが通常のツイートボタンのカタチですね。
<a href="https://twitter.com/share" class="twitter-share-button" data-via="wayohoo" data-lang="ja">ツイート</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>
HTMLはこのようになります。
このHTMLのclass="twitter-share-button"の部分をclass="twitter-share-button twitter-count-vertical"に置換し、そしてaタグ内にdata-count="vertical"を追加して以下のようなHTMLにして下さい。(注意: wayohooの部分はあなたのTwitterアカウントに置換してください。)↓↓
<a href="https://twitter.com/share" class="twitter-share-button twitter-count-vertical" data-via="wayohoo" 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>
上のHTMLを設置すると、下のようなボックスタイプのツイートボタンが使えるようになります。
ソーシャルボタンのボックスタイプの縦幅はほぼ同じ。
いままでソーシャルボタンは縦並べにしていましたが、横並びにしてみると意外にTwitterもフェイスブックもGoogle＋もはてなブックマークも大体同じ縦幅となっていて使いやすいことに気づきました。
なかなか綺麗にソーシャルボタンがそろわないとお嘆きの方は、横並びで配置してみてはいかがでしょうか？結構ビシッと決まりますよ！