How to Make a Neat Horizontal Bar with Social Buttons

Just a few days ago, I changed the theme of my blog, with my own one. While designing my own theme, I was kind of stuck with one thing. If you came to this post, searching through Google, then I think even you are finding the same problem.

PROBLEM -  Making a neat horizontal bar with all the social-sharing buttons inline.

Well, I am not a coding expert. But, somehow I wrote a code which is simple and easy. So, I thought I would share the code here on my blog.

I scratched my head for a lot of time over this problem. But, later I came to know that I was not really looking at the problem. Okay, now first let me give you the code.

<div> 

<!-- tweet button -->  
<div style="float:left;"> 
<a href="http://twitter.com/share" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"> </script>
</div> 
 <!-- tweet button --> 

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

<!-- Google +1 button -->  
<div style="float:left;">
<!-- Place this tag where you want the +1 button to render -->  
<g:plusone size="medium" annotation="inline" width="60"></g:plusone> 

<!-- Place this render call where appropriate -->  
<script type="text/javascript">   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })();  </script>
</div>
<!-- Google +1 button --> 
</div>

One another thing-  This is the code I wrote. It is very simple and easy. But, still this code didn’t work in the beginning. Notice the highlighted part of the code above. By default, the Plus one button width will be450px or something, which makes it not possible to keep them inline. That’s why it didn’t work. But, after sometime I found the problem and fixed it. I am just giving a heads up so that you don’t do the same problem.

Also, the code I wrote is only for three buttons, but you can extend it. Just add the code of the button in between the following tags.

<div style="float:left;"> 
Paste the code for the button here 
</div>

That’s all. You can see my code in action at the beginning of this post. Please don’t hesitate to comment if you have any problems or suggestions.