Add Fixed Floating Share Buttons to Blogger

Previously I had written about animated floating widget for Blogger which was or still is popular. But many didn’t liked it for the animated effect and wanted it to be fixed while scrolling. Many requested for this and after giving a thought I am writing this for you. So let’s get started with it and add a fixed sharing buttons widget that will float to the left (or to right) of the Blogger post section.

Demo

You will find that whenever you scroll the page, the floating share box scrolls to the top along with the page but as soon as it reaches the top of the browser window, it gets fixed to that position.

Step 1: Login to Blogger, go to Template tab > “Edit HTML” and check “Expand Widget Templates”.

Step 2: Find ]]></b:skin> and before it add the below codes.

#flt-box {
 margin-left: -120px;
 background: #eeeeee;
 position: absolute;
 -webkit-border-radius: 3px;
 border-radius: 3px;
}
#flt-box .wdt {
 padding: 5px;
 text-align: center;
}
#flt-box.fixed {
 position: fixed;
 top: 20px;
}

Step 3: Again find ]]></b:skin> and below it add the jQuery library.

<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

If you had already added it (find it if necessary) then you need not to add another one, instead check whether it is the latest or not and replace it if needed.

Step 4: Previously I was using a different plugin about which I was reluctant to share as it required some editing but later I managed some time to build one which will do the job. Find </head> within Blogger template and before it add the following script which will actually make the sharing buttons to remain fixed when scrolled.

<script>
$(function(){
 var $aside = $("#flt-box"),
 $window = $(window),
 $offset = $aside.offset().top-20;
 
 $window.scroll(function() {
  if ($window.scrollTop() >= $offset) {
   $aside.addClass("fixed");
  } else {
   $aside.removeClass("fixed");
  }
 });
});
</script>

Step 5: Here comes the important part, find <data:post.body/> and before it add the below codes to include the share buttons:

<b:if cond='data:blog.pageType == "item"'>
<div id='flt-box'>
<!-- Tweet Button -->
<div class='wdt'><a class='twitter-share-button' data-count='vertical' data-via='User-Name' expr:data-text='data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<!-- Facebook Like (XFBML) -->
<div class='wdt'><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like font="lucida grande" expr:href="data:post.canonicalUrl" send="true" layout="box_count" show_faces="false" width="55"></fb:like></div>
<!-- Plus One -->
<div class='wdt'><g:plusone size='tall' expr:href='data:post.canonicalUrl'></g:plusone><script src='https://apis.google.com/js/plusone.js' type="text/javascript"></script></div>
<!-- Pinterest -->
<div class='wdt'><b:if cond='data:post.thumbnailUrl'><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description=" + data:post.title'>Pin It</a><b:else/><a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=http://your-image.jpg&amp;description=" + data:post.title'>Pin It</a></b:if><script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script></div>
</div>
</b:if>

Step 6: Preview your template if it is giving any XML error or not (I hope not) and then Save it.

Things to note and Customization

• If you are not so familiar with JavaScript then add a simple floating share widget.
• To make the floating widget closer or farther away from post body, increase or decrease the pixels value marked in red in step 2.
• Replace User-Name with your Twitter account and http://your-image.jpg with a image to let Pinterest button work properly.
• In step 5, I have used only the famous sharing buttons. You can always make changes to it.
• Again in the fifth step, the codes are written for newbies (not for developers) so that the buttons can be added with ease. But it requires serious attention and needs to be edited for optimum performance.