[み]Twitterのボックス型のツイートボタンを作成する方法

Twitterのボタンが新しくなって久しくなるようですが、今になって変更に気がついたみはら(@masashi_385)です。どこが変更になったかというと、ボタン群がだいぶかわっています。そして、ツイート数が上に吹き出してるやつ(ボックス型?)がなくなっています。このボックス型のツイートボタンは、縦にSNSボタンを並べるときには重宝しますので、なくなってしまってとっても困っていらっしゃる方は多いんではないでしょうか?

そんなこまっているみなさんのために、ボックス型のツイートボタンを設置する方法を紹介します。

ボックス型のツイートボタンを設置する方法

まずは、Twitter / Twitterボタンでコードを取得します。

こんなコードかと思います。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="masashi_385" 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>

このコードを少し弄って次のように変えます。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="masashi_385" 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>

そうです。data-count=”vertical” を追加しただけです。そうすると、こんな風に表示されます。

このままだと、「ツイート」の右側がなんとなく空いているカンジがしますね。ですので、CSSで少し調整します。

iframe.twitter-share-button {
    width: 65px!important;
}

これでキレイなボックス型のボタンができあがりました。



ということで、ボックス型のツイートボタンのつくり方でした。参考になりましたら、このボタンでツイートしてください:)

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup