Adding social bookmarking sharing

Now, there are so many options for bloggers, like you and me when it comes to ulitizing social bookmarking sharing widget. And, the fixed social bookmarking sharing button which I'm about to show you is one on them.

It looks something like this, placing on the top of every blog post.

Similar to the floating social media widget, but it is displayed horizontally. And it stays visible to readers while they are scrolling to the of the blog post bottom. It's cool, right!.

How to integrate this social bookmarking sharing widget to your blog

Step 1: Go to template > > > edit HTML > > > proceed > > > tick the expand template widget box

Step 2: Add this code before/above < / head > tag (press CTRL + F to find < / head >)

"< script type =" text / javascript "src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js "> < / script >
< b: if cond ='data: blog.pageType == & quot; item & quot;'>
< style type = "text / css" >
/ * #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" >
/ * / / 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://bloggerblogwidgets.googlecode.com/svn/trunk/w2b_blogger_pinit.js "> < / script >
< script type = "text / javascript" >
/ * / / 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)})();
/ / StumbleUpon
(function(){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)})();
/ / Digg
(function(){var a=document.createElement("SCRIPT"),b=document.getElementsByTagName("SCRIPT")[0];a.type="text/javascript";a.async=true;a.src="http://widgets.digg.com/buttons.js";b.parentNode.insertBefore(a,b)})();
/*]]>*/
< / script >
< / b: if >

Step 3: Add this code before/above < data: post.body / > tag.

< b: if cond ='data: blog.pageType == & quot; item & quot;'>
< div id = "w2bSocialFloat" class = "w2bSocialFloat" >
< table width = "100 %" class = "w2bSocialFloat" >
< tr >
< td >
"< a href="https://twitter.com/share "class ="twitter-share-button"expr: data-url =" data: post.url "expr: data - text = ' data: post.title" > Tweet < /a >
< / td >
< td >
< iframe expr: src = "& quot;//www.facebook.com/plugins/like.php?href= & quot;" "+ data: post.url + & quot; & amp; send = false & amp; layout = button_count & amp; width = 80 & amp; show_faces = false & amp; action = like & amp; colorscheme = light & amp; font & amp; height = 21 & quot;" scrolling = "no" frameborder = "0" style = "border: none;" overflow: hidden; width: 80px; "height: 21px;" allowTransparency = "true" > < / iframe >
< / td >
< td >

< data: post.body / >
< script type = "text / javascript" >








< / div >
< / td >
< td >
< div class = "g plusone" data-size = "medium" expr: data-href = "data: post.url" > < / div >
< / td >
< td >
< su: badge layout "1" = expr: location = "data: post.url" > < / su: badge >
< / td >
< td >
< a class = "DiggThisButton DiggCompact" > < / a >
< / td >
< /tr >
< / table >
< / div >
< / b: if >

Step 4: Save template

* Note: If you're using read more function in your blog, paste the code in step 3 in the middle of this 2 lines

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

You might be interested in my other post on how to add floating social bookmarking sharing here.