TwitterやFacebookなどのソーシャルボタンを横や縦に並べて設置する方法

Twitter や Facebook などのソーシャルボタンを横に並べて設置するためのスニペットをメモ。

■ HTML

<ul class="socialButtons">
<li>Twitter Button</li>
<li>Facebook Like Button</li>
<li>Google+1 Button</li>
</ul>

■ CSS

●横並び

.socialButtons {
  overflow: hidden;
}
.socialButtons li {
  float: left;
  margin-right: 10px;
}
.socialButtons iframe {
  margin: 0 !important;
}

●縦並び

.socialButtons {
	list-style-type: none;
	padding-left: 0;
}
.socialButtons li {
	margin-bottom: 4px;
}
.socialButtons iframe {
	margin: 0 !important;
}

・[参考] TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS – hostingjedi はてなブックマーク - TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS - hostingjedi

関連記事