HackingUniversity - Hacks . Tricks . How-To's

21 August 2013

Social Sharing Button Widget for Blogger Post Sharing

Hey guys today I have another awesome social sharing buttons widget for blogger blogs. Well I found this widget on some other website and I liked it so much that I tried to copy it on the blogger blog, so I tried to get the exact same result but I might lack in something or another but this widget works and look nice. So now to show you what this widget looks like I have applied a demo version below so, just have a look at it and apply it to your blog too.

So now this widget as three major social buttons that are used these days, facebook, twitter and google plus 1 buttons, so now if you like it check below steps to apply it.

  1. Open Blogger > Template > Edit HTML.
  2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.


  3. Now your CSS styling has been placed, now just copy the below code and paste it where ever you want this widget to be rendered.

    <div id='social_box'><div class="fbk"><div id="fb-root"></div>
    <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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-layout="button_count" data-show-faces="false" data-send="false"></div></div><div class="twr"><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div><div class="gps"><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><div class="g-plusone" data-size="medium"></div></div></div>

  4. That's it guys now your widget will work like a charm, well you can remove all the JavaScript's in the above if you already have them in your blog.