Align Google +1, Tweet, Like And Pin It Buttons Horizontally


Even though individual Facebook Like & SendTwitter TweetGoogle +1Pinterest Pin It, and social sharing buttons can be easily added to Blogger post 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.
twitter google  1 like send pinterest buttonsRather 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 Template > Edit HTML > Proceed (old UI: Design > Edit HTML).
  2. Back up your template.
  3. Tick the Expand Widget Templates checkbox on top right of the code window.
  4. Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it:
    01<!-- Scripts Start -->
    02<b:if cond='data:post.isFirstPost'>
    03<!-- Facebook -->
    04<div id='fb-root'/>
    05<script>(function(d, s, id) {
    06var js, fjs = d.getElementsByTagName(s)[0];
    07if (d.getElementById(id)) {return;}
    08js = d.createElement(s); js.id = id;
    09js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    10fjs.parentNode.insertBefore(js, fjs);
    11}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    12</script>
    13<!-- Google +1 -->
    14<script type='text/javascript'>
    15(function() {
    16var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    17po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    18var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    19})();
    20</script>
    21<!-- Twitter -->
    22<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>
    23</b:if>
    24<!-- Scripts End -->
    25<!-- Horizontal social buttons Start -->
    26<div class='horizontal-social-buttons'style='padding:10px 0 10px;'>
    27<!-- Twitter -->
    28<div style='float:left;'>
    29<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>
    30</div>
    31<!-- Google +1 -->
    32<div style='float:left;'>
    33<g:plusone annotation='bubble' expr:href='data:post.url'size='medium'/>
    34</div>
    35<!-- Facebook Like+Send -->
    36<div style='float:left;'>
    37<fb:like colorscheme='light' expr:href='data:post.url'font='' layout='button_count' send='true'show_faces='false'/>
    38</div>
    39<!-- Pinterest Start -->
    40<b:if cond='data:blog.pageType == &quot;item&quot;'>
    41<div id='pin-wrapper' style='display: inline;'>
    42<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>
    43<a href='javascript:void(run_pinmarklet())'style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
    44</div>
    45<script src='http://assets.pinterest.com/js/pinit.js'type='text/javascript'></script>
    46<script type='text/javascript'>
    47function run_pinmarklet() {
    48    var e=document.createElement(&#39;script&#39;);
    49    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    50    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    51    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    52    document.body.appendChild(e);
    53}
    54</script
    55</b:if>
    56<!-- Pinterest End -->
    57</div>
    58<div style='clear: both;'/>
    59<!-- Horizontal social buttons End -->
    Note: Pin It button will only appear on post pages. We place this limit  because the button only pins the page on which it appears. As such  on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
  5. Buttons 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!

No comments:

Post a Comment