How To Add Social Like and Share buttons to your site or blog

The internet is going social and if there's a free easy way to get more publicity and attract more people then why not?!

To get a good coverage of social sharing you'll need three most important buttons
provided by Google, Facebook and Twitter social networks
So, to get a social buttons stripe just like that:

Tweet

 You'll need the following code:

Google plusone

Code:

<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>
    <g:plusone size="medium"></g:plusone>


for more info and more versions of the Google plusone button see: http://www.google.com/webmasters/+1/button/

Twitter Tweet Button

Code:
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" >Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>


for more info and more versions of the Tweet Button see: http://twitter.com/about/resources/tweetbutton

Facebook Like Button

Code:
<div id="fb-root">
</div>
<script src="http://connect.facebook.net/en_US/all.js#appId=155577994527327&amp;xfbml=1">
</script>
<fb:like layout="button_count" send="true" show_faces="false"></fb:like>


for more info and more versions of the Facebook Like button see: http://developers.facebook.com/docs/reference/plugins/like/

The Complete Code:


<div class="social_buttons">
<!-- Facebook -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=155577994527327&amp;xfbml=1"></script>
<span><fb:like layout="button_count" send="true" show_faces="false"></fb:like></span>


<!-- Twitter -->
<span><a class="twitter-share-button" data-count="horizontal" href="http://twitter.com/share">Tweet</a></span>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


<!-- Google -->
<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>
<span><g:plusone size="medium"></g:plusone></span>

</div>