Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Wednesday, February 29, 2012

    Add Social sharing Buttons Horizontally

    SOCIALIZE IT →

    Social sharing button
    Social sharing buttons is important tool to have for a blogger Because With social sharing button your users can share things easily and there is every chance of your site getting viral easily.

    Add Facebook Like & Send, Twitter Tweet and Google +1 social sharing button Horizontally in Blogger. Simply remove your existing buttons and add the new code using the following steps:


    How to Add Social sharing Buttons Horizontally:


    1. Go to Design > Edit HTML (New interface: Template > Edit HTML).
    2. Tick the Expand Widget Templates checkbox on top right of the code window.
    3. 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;'>
    <!-- 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>
    <!-- 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>
    
    <!-- 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 -->
    


    4. Button positioning
    To position the buttons at the bottom of post, place the code below (instead of above) <data:post.body/>
    5. Submit it.

    You can also use the Older Code:

    <!-- Scripts Start -->
    <div class='socialshare'>
    <ul>
    
    <li style='margin: 0 0px 0 -19px;'><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
    </li>
    <li style='margin: 0pt 15px 0pt 0px;'><a class='twitter-share-button' data-count='horizontal' data-via='blogger_hacks' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/>
    </li>
    <li style='margin: 0pt 20px 0pt 0px;'>
    <script src='http://platform.linkedin.com/in.js' type='text/javascript'/>
    <script data-counter='right' data-url='http://pinup3.blogspot.in' type='IN/Share'/>
    </li>
    <li style='margin: 0pt 15px 0pt 5px;'>
    <script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
    <g:plusone size='medium'/></li>
    <li style='margin: 0pt 2px 0pt 0px;'>
    <script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
    </li>
    </ul>
    </div>
    <!-- Script End -->
    


    This code excludes Pinterest button.


    2 comments:

    1. You need to remove these lines of code, to ensure that the Pinit button appears on the blogger homepages,

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      [/b:if>]


      You can space out each button by adding margin right to the div style

      [div style='float:left; margin-right: 15px;']

      ReplyDelete
    2. Anyone know how to make sure that the facebook button stay's on the horizontal mines always about 2px lower than the rest ?

      ReplyDelete