Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save fabiowitt/9882cdb2bd092ab6f3245caf3d6706c9 to your computer and use it in GitHub Desktop.
Save fabiowitt/9882cdb2bd092ab6f3245caf3d6706c9 to your computer and use it in GitHub Desktop.
Align Facebook Like, Twitter Tweet and Google +1 buttons (Working for newer versions)
<div class="social">
<span class="twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="[your-url-here]">Tweet</a>
</span>
<span class="google">
<g:plusone size="medium" href="[your-url-here]"></g:plusone>
</span>
<span class="Facebook">
<iframe src="https://www.facebook.com/plugins/like.php?href=[your-url-here]&amp;show_faces=false&amp;layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
</span>
</div>
/* This gets Google to fall into place */
.social {
font-size: 1px;
}
/* This gets Facebook to fall into place */
.social iframe {
vertical-align: middle;
}
/* Set an optional width for your button wrappers */
.social > span {
display: inline-block;
width: 110px;
}
/* Adjust the widths individually if you like */
.social .google {
width: 75px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment