ソーシャルアイコンの吹き出しCSSメモ

こういう吹き出しを表示させたい。

ソーシャルボタン入れておけばいいだろって話なんだけど、はてなのソーシャルボタンはページのURLを指定しても、どうやらJavaScriptが置かれてるページが対象になるらしく、別のところ（例えばブラウザの拡張機能上）に設置すると、ブックマーク数を表示してくれない。これがTwitterのツイートボタンだと、URLを指定してやればそのページのツイート数を表示してくれるのだが。

まあ、変に触れると虚偽の表示にできるのを防いでいるのかもしれない。
ボタンを押せばすぐバレる話ではあるけど...

既に拡張機能上にツイートボタンを設置できていることから（外観的に）後に引けなくなり、どうやったらブックマーク数をボタンに表示できるのかググってみたけどぱっと出てこない。このボタンの挙動を見ながら表示のさせ方を探るよりも、既にはてブAPIでブックマーク数は取得しているので、それを後から突っ込むという方法でいくことにした。

という経緯で、
問題はこの吹き出しをどうやって表示させるかで、一応表示できたのが下記のもの。

<style type="text/css">
.count {
background-color: #FFFFFF;
border: 1px solid #B0C1D8;
border-radius: 3px;
height: 18px;
padding: 0px 4px;
position: relative;
width: auto;
display: inline;
float: right;
color: #2D4C86;
font-family: "Arial";
font-size: 11px;
line-height: 18px;
text-decoration: none;
}

.count:after,  .count:before{
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}

.count:after {
border-width: 3px;
border-right-color: #FFF;
top: 6px;
}

.count:before {
border-width: 5px;
border-right-color: #B0C1D8;
top: 4px;
}

</style>
<div class="count">100000</div>

不要な項目がいくつかありそうだけど、こんな感じに↓

あとは、JavaScriptで動的に数字を入れてやればOK。ボタンの方は数字なしのがあるので、それを左側に設置してやればそれっぽくなる。



PR:CSS3　スタンダード・デザインガイド
PR:ソーシャルインフルエンス 戦略PR×ソーシャルメディアの設計図 (アスキー新書)