ソーシャルボタンの設置

2011-08-25 　カテゴリー：Web備忘録

今回は、Google+1，facebookのいいね！ボタン，twitterのツイートボタン，はてなブックマークボタンの設置とそれらの“横並び”CSSについての備忘録です。
これらは遂次増えていく事が予想されるので、できるだけ柔軟性のある組み方を心がけたいです。

●Google+1
http://www.google.com/webmasters/+1/button/index.html
※余白があらかじめ確保されている為、CSSで width:60px; ほどを指定すれば標準サイズで余白がなくなると思います、あとは margin 等で調整。

●facebookのいいね！ボタン
http://developers.facebook.com/docs/reference/plugins/like/
※全部英語ですが、雰囲気でフォームを入力して、「Get Code」を押すとOKです。

※「Only verified developers can be added as listed developers of this app.」が出てしまった場合は、ブラウザをころころ変えるとタグ取得できます。ちなみに、自分はfirefox→Chrome→Safariでやっとできました。

※入力フォームの「Width」は余白やボタン横の文字を含むサイズなので、デフォルトは450pxになっていますが、余白がなくなるサイズはだいたい90pxぐらいだと思います、あとは margin 等で調整。

●はてなブックマークボタン
http://b.hatena.ne.jp/guide/bbutton

■横並びCSSについて

まずHTMLは、あまり好ましくないですが、下記のように細かくclass指定しました。

<div class="socialbtn">
<div class="google">タグ</div>
<div class="facebook">タグ</div>
<div class="twitter">タグ</div>
<div class="hatena">タグ</div>
<div>

リストを使わず、divを用いたのはタグにいくつかブロック要素があった為です。

また、この書き方を使って自由なコーディングをするには、クラス.clearfixが必須です。

次にCSSは、下記に加え、細かくタグごとに指定したクラスで余白を調整すればOK。

.socialbtn{　float: right;}
.socialbtn div{　float: left;}

自分のクセが露骨に出ている為、あまり人様にはお見せできるようなソースではないです。

自分なりには修正がしやすい書き方を意識しました。

adaptable：トータルWebクリエイト