Align Google +1, Tweet, Like and Pin It buttons horizontally

Update Feb. 2012: Added Pinterest Pin It button.

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:

1. Go to Design > Edit HTML  (New interface: Template > Edit HTML).
2. Back up your template.
3. Tick the Expand Widget Templates checkbox on top right of the code window.
4. 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 -->
   <script type='text/javascript'>
   (function() {
   var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
   po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
   var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
   })();
   </script>
   <!-- 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 -->
   <div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
   <!-- 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 annotation='bubble' expr:href='data:post.url' size='medium'/>
   </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>
   <!-- Pinterest Start -->
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div id='pin-wrapper' style='display: inline;'>
   <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
   <a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
   </div> 
   <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
   <script type='text/javascript'>
   function run_pinmarklet() {
       var e=document.createElement(&#39;script&#39;);
       e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
       e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
       e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
       document.body.appendChild(e);
   }
   </script>  
   </b:if> 
   <!-- Pinterest End -->
   </div>
   <div style='clear: both;'/>
   <!-- Horizontal social buttons End -->
   

   All buttons will appear on all pages with the exception of Pinterest Pin It button, which will appear only on post pages.

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

Enjoy!

p.s. If you wish you can also align share buttons vertically on the side of your blog.