Twitter、Google+1、はてなブックマークボタンのカウント数をボタン上にする方法

表現の方法が分かりませんけれど、Twitterやはてなブックーマークなどでは、下の画像にあるようにボタンの上にカウントした数字を表示することができます。
share_button5

Tweet Buttonのカウント数を上にする方法

Tweetボタンのカウントボックスをボタンの上にするには、取得したコードにdata-count=”vertical”を追加します。横に表示するには、data-countの値にhorizontalを設定します。
※参考ページ:Tweet Buttonのドキュメント
上:vertical
横:horizontal

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-url="<?php the_permalink(); ?>" data-lang="ja"   data-width="300px">ツイート</a>

はてなブックマークのカウント数を上にする方法

はてなブックマークボタンページを開きます。

「1.ボタンのタイプを選びましょう」で右のボタンにチェックを入れます。
「2.ボタンの設定をしましょう」の「ブックマーク数」を「表示(バーティカル)」にします。

上記の設定でカウント(数字)をボタンの上にすることができます。

hatena_button

また、既存のコードがある場合、data-hatena-bookmark-layout=”vertical-balloon”と設定することでも表示方法を変更できます。
上:vertical-ballon
横:standard-balloon

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加">

Google+1のカウント数を上に表示する方法

Google+1(グーグルプラスワン)ボタンのカウント数を上にするには、+1ボタンにある「サイズ」を「tall」にして、「+1情報」をバルーンに変更するとできます。

google_plusone_button

また、コードにあるdata-sizeの値をtallに変更することでカウント数を上に表示できるようになります。さらに設定が紛らわしくなるので「data-annotation」や「data-width」がタグにあるときは、それらを削除します。
「data-size=”tall”」

コメントを残す

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