Socialize It | Floating Social Sharing Bar for Blogger

Social media is becoming more and more important after each and every day. Now the experts says that social media plays a major role in SEO too...strange right? But its a fact, in simple words, the number of peoples who likes/shares your article will be counted in your ranking. So its your responsibility to make it easy for your readers to share your content.

I have seen some prominent blogs using social sharing buttons at the top of the post as well as at the bottom of the post. Yes their strategy is absolutely right and that will give them some extra likes/shares. But using it at top and bottom is bit nasty, there is where this widget will come handy. This widget which is placed just below the post title will floats along with the screen while the visitors scrolls down. Which makes it easier for the visitors to share the posts whenever they like while reading the post. The widget is created by Ways2Blogging and we just modified it to what you can see in the demo.

Features:

Floats along with the screen so there is more chance for a like.
The widget comes with Facebook like button, tweet button and a +1 button.
Built using modest jQuery in order to load more faster.
Floats till the comment section of the blog.
An additional comment button which directs the visitor to the comment box.

How to Add Floating Social Sharing Bar To Your Blog?

Step 1: Go to your blogger dashboard > Template > Edit HTML > Proceed:

Step 2: Check the 'Expand Widget Template' check box at the left top.

Step 3: Using Ctrl+F, search for </head> and paste the below code above it:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/*<![CDATA[*/
    .horizontalsocial .sharertitle{float: left; border-right: 1px solid #d2d2d2; padding: 3px 10px 2px 0px; margin: 0 0px 0 0; color: #b1a9a5; font-family:'Oswald', Arial, Helvetica, sans-serif;text-transform: uppercase; line-height: 25px; vertical-align: middle; font-size: 14px;}
    .horizontalsocial .fb-like{width: 100px; float: left; border-right: 1px solid #d2d2d2; padding: 3px 0 2px; height: 25px; }
    .horizontalsocial .sharertwitter{float: left; width: 115px; border-right: 1px solid #d2d2d2; margin: 0 15px 0 0; padding: 3px 0 2px; height: 25px;}
    .horizontalsocial .sharergplus{float: left; width: 90px; margin: 0 15px 0 15px; padding: 3px 0 2px; border-right: 1px solid #d2d2d2; height: 25px;}
    .horizontalsocial .sharerbubble{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivotO-i9mTzHWdMz9pJhMTP0_sVnOohc5-JipUteLI_7ey4CExEjpdNiZzimzQ4qlWXrUlX7vb-9gYoX6PKyguOdlPL9y0rDNVYR708Z2ZIbkVRhsttXleGmBdmt2cbdb-Lb4LMGQO6K8/s1600/Commentz.png) no-repeat; height: 25px; min-width: 25px; float: left; margin: 7px 0 0; line-height: 18px; vertical-align: top;}
    .horizontalsocial .sharerbubble a{color: #2d2520; padding: 0px 0 0px 30px; font-size: 18px !important; font-family: 'Lora', Arial, Helvetica, san-serif !important; }
    .horizontalsocial.fixed{ position:fixed; top: -2px; z-index: 99999;}
    #w2bSocialFloat {clear:both;padding: 6px 0;display:block;background:#FFFFFF;}
    #w2bSocialFloat td{padding:4px;margin:0;border:none;}
    #w2bSocialFloat td iframe{max-width:82px;width:82px !important;}
    #w2bSocialFloat.w2bFloatSocial{position: fixed;top:0;z-index:9999999;border-bottom:1px solid #ccc;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);-moz-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Set the Top Offset
$theOffset = 0;

jQuery(document).ready(function(b){var a=b("#w2bSocialFloat");a.wrap('<div id="w2bSocialPlaceholder"></div>').closest("#w2bSocialPlaceholder").height(a.outerHeight());a.width(a.outerWidth());e=a.offset().top-$theOffset;b("#w2bSocialFloat iframe[src*=plusone]").closest("div").css("max-width","82px");b(window).scroll(function(){d=b(this).scrollTop();d>=e?a.addClass("w2bFloatSocial"):a.removeClass("w2bFloatSocial");f=b(".post");if(f.length!=0){c=f.outerHeight()+f.offset().top;d>=c?a.stop().animate({top:"-150px"}):a.stop().animate({top:$theOffset+"px"})}else d>=e?a.css("top",$theOffset+"px"):a.css("top","0")})});
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-blogger-pinit.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    // Twitter
    (function(a,b,c){var d=a.getElementsByTagName(b)[0];if(!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a,d)}})(document,"script","twitter-wjs");
    // Google + (plus)
    (function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://apis.google.com/js/plusone.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();

/*]]>*/
</script>
</b:if>

Step 4: Now using Ctrl+F, search for <data:post.body/> and add the below code above it:

<b:if cond='data:blog.pageType == "item"'>
<div class='horizontalsocial social-buttons' id='horizontalsocial'>
<div class='w2bSocialFloat' id='w2bSocialFloat'>
<table class='w2bSocialFloat' width='100%'>
    <tr>
<td><div class='sharertitle'>Socialize It →</div>
</td>
        <td>
            <div class='sharertwitter'><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
        </td>

        <td>
        <div class='fb-like'>    <iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/></div>
        </td>

        <td>
        <div class='sharergplus'>    <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
        </td>

        <td>
<div class='sharerbubble'><span class='thecomments'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/> </b:if></a>
</b:if>
</span></div>
</td>
    </tr>
</table>
</div></div>
</b:if>

Step 5: Click the orange save button!

That's it! Now you have a cool social sharing bar on your blog! Feel free to share your views through the comment box below!

Tweak Your Blog

Anything and everything about blogger!