How To Add Facebook Like-Send, Tweet, Google + Button For Blog & Website

Even though Facebook Like & Send, Twitter Tweet and Google +1 social sharing buttons can be added easily enough by following their respective tutorials, aligning them perfectly side by side is a bit tricky. Several readers were having trouble with the alignment and contacted me for help.
Rather than attempting to explain how to align your existing buttons, I think it’s easier to just give you a new set of codes for the buttons with the alignment built in. Simply remove your existing buttons and add the new code using the following steps:

Go to Design > Edit HTML (New interface: Template > Edit HTML).

Back up your template.
Tick the Expand Widget Templates checkbox on top right of the code window.

Find </head> And Paste The Below Code Just Above It.


<script type="text/javascript" src="http://apis.google.com/js/plusone.js"> {lang: 'en-US'} </script>

Next, look for <data:post.body/> tag and paste the following code immediately above it:

<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->

<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='horizontal-social-buttons' style='padding:5px 0 5px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left'>
<g:plusone size="medium" expr:href="data:post.canonicalUrl"/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
</div>
</b:if>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

Button positioning :
To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>.
Preview before saving.