How to Align Facebook Like, Twitter Tweet and Google +1 buttons

by

Social like and follow button in a website have very much importance for drive more traffic and visitors. When you use facebook like button, twitter tweet button and google+ 1 button then, by default it is not aligned. In this tutorial, i will show you how to align Facebook like, Twitter tweet  and google+1 button to display.

How to Align Facebook Like, Twitter Tweet and Google +1 buttons

Live Demo    Download Script

Also Read:

Create Sticky Social Media Floating Sidebar With CSS

Add Social Share button in WordPress without Plugins

Let us see snippet.

Social Share HTML

<ul class="pclu-social">
<li>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fkumarvikashsingh324%2F&width=51&layout=button&action=like&size=small&show_faces=false&share=false&height=65&appId=280722862458131" width="51" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></li>
<li>
<a href="https://twitter.com/phpcluster1?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @phpcluster1</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<li>
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

<!-- Place this tag where you want the widget to render. -->
<div class="g-follow" data-annotation="none" data-height="20" data-href="//plus.google.com/u/0/104813825395588517565" data-rel="publisher"></div>
</li>
<li>
<link rel="canonical" href="http://www.phpcluster.com" />
    <script src="https://apis.google.com/js/platform.js" async defer>
    </script>
	<div class="g-plusone" data-size="medium"></div>
</li>
</ul>

Social Share CSS

.pclu-social li {
    list-style: none;
    height: 34px !important;
    display: inline-block;
    vertical-align: top !important;
}

Leave a Comment