バシャログ。のソーシャルボタンを変更してみました

お知らせ

2011.07.12

イメージ

腕時計を100円ショップのものから980円CASIO製にグレードアップしたishidaです。
どう見ても980円に見えないので、いい買い物をしたぞよ。

なかなか時間がとれず、このブログ自体のデザイン変更ができてませんが
facebookのいいねボタンすらついてないーぞってことで、ソーシャルボタン一式だけをプチプチリニューアルしました。

このブログは、MovableTypeで管理してまして埋め込んだタグは以下となります。

XHTML

<div class="unitSocialBtn">

<div class="hatebu">
<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>" class="hatena-bookmark-button" data-hatena-bookmark-title="<$MTEntryTitle$>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="" width="20" height="20" style="border: none;" /></a>
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
</div><!-- /.hatebu -->

<div class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<$MTEntryPermalink$>" data-text="<$MTEntryTitle$>" data-count="horizontal" data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</div><!-- /.twitter -->

<div class="facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=164210536981654&amp;href=<$MTEntryPermalink$>&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>
</div><!-- /.facebook -->

</div><!-- /.unitSocialBtn -->

twitterとはてブのボタンについては、aタグ＋scriptタグで、さほど設置は難しくないのですが、facebookのいいねボタンはiframeでwidthおよびheightが決め打ちです。

facebookの開発者向けページで、Likeボタンを作成すると、widthがデフォルト450pxとなっています。他のソーシャルボタンと横並びにする場合は、widthを小さくする必要があります。今回、バシャログではwidthを110pxとしました。

CSS

.unitSocialBtn {
}
.unitSocialBtn .twitter {
	display: inline;
}
.unitSocialBtn .hatebu {
	display: inline;
}
.unitSocialBtn .facebook {
	display: inline;
	margin: 0 0 0 -7px;
}

各ボタンを囲むdivをすべてdisplay:inlineにしています。
また、いいねボタンの左にちょっと余白が出たのでネガティブマージンを使って、調整してます。