New Floating Social Sharing Bar Widget for Blogger / Blogspot

June 17, 2012   /   Posted by in Blogger Jquery, Blogger Widgets, Bookmarking 149 Comments
New Floating Social Sharing Bar Widget for Blogger / Blogspot

New Fixed / Floating Social sharing Horizontal Bar Widget for Blogger. This widget is requested by one of way2blogging reader, and thanks for requesting this new widget for you as well as for our Readers. :)
Coming to this widget, it is horizontal social sharing bar widget with counter and is displayed in above the post body. while you scrolling this horizontal social bar is fixed to the top of Post. which will give to readers to share the page immediately by the floating bar. This widget comes with Twitter, Facebook, Google plus, Pinterest, StumbleUpon and Digg buttons.

Live Preview

Preview

How to Add Floating Social Sharing Bar Widget?

First,

  1. Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
  2. Select the Template > Click on Edit HTML > Proceed
  3. Check/Tick the Expand Template Widgets checkbox

Just follow 3 Simple steps,

The jQuery Plugin!

As always, it is jQuery based widget, and your blog must have the jQuery plugin. if your blog already have a latest jQuery plugin, then Ignore this step and directly follow the Second step.
If not add the below snippet code before </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

The Social Scripts

This Code contains jQuery calls and Social button scripts and styles, and those are loads only in Post Pages which will decrease, load time when you on home or other pages. ;)
Add the below snippet code before </head> tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
	#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)})();
	// 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>

Adding Social Buttons Widget

Let’s add the final Social horizontal bar widget code.
Add this code before <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>
			<div expr:id="&quot;w2bPinit-&quot; + data:post.id" style="display: none;visibility: hidden;height: 0;width:0;overflow: hidden;" class="w2bPinitButton"> 
				<data:post.body/>
				<script type="text/javascript">
					w2bPinItButton({ 
						url:"<data:post.url/>", 
						thumb: "\<data:post.thumbnailUrl/>", 
						id: "<data:post.id/>", 
						defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg", 
						pincount: "horizontal" 
					}); 
				</script> 
			</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>

Save Template!!!

Save the template and check your blog post pages, a working and awesome jQuery based floating social horizontal bar on your blog.

Hope this widget is helpful to you, Please leave your comments, and share this Widget.
Thanks to Raghav! for requesting this simple and awesome widget.

Update :-

1. I found the tag Three times?

If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines

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

Place the Widget code in between the two tags.

2. How to change the background color of Horizontal bar?

You can change the background color of Horizontal bar.
Solution:
In the Second step (The Social Scripts), search for

background:#FFFFFF;

and change the #FFFFFF with your own Hex Color.

Thanks to All.

Changelog :

18/06/2012
– Updated the Script for showing the floating bar only in Post area section.
Note: This should works in 95% of blogs. because Blogger template designers should use the Post Class as .post.

19/06/2012
– Added the Offset option.
To change the Offset search for $theOffset in the Second step Code and set the value. Initially it is 0 (Zero).

Article written by

I am started my career with Blogger, and now grown as PHP and WordPress Developer. I love playing with Blogger and WordPress.

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

149 Comments on “New Floating Social Sharing Bar Widget for Blogger / BlogspotAdd Comment

  1. avatar

    samantha August 10, 2012 4:50 am #

    HELP! I am getting this error, what is wrong? I followed your instructions perfectly but I must have missed something along the way……??

    TEMPLATE ERROR: Invalid data reference post.title: No dictionary named: ‘post’ in: ['blog', 'skin', 'view']

    • avatar

      Harish August 10, 2012 11:03 am #

      you something done wrong. please try to install again.

  2. avatar

    ar August 11, 2012 12:03 am #

    i’m not getting pinterest button in the bar…weird…plz plz help!

    • avatar

      Harish August 11, 2012 5:57 pm #

      Thanks for info, i will fix it. Stay connected.

  3. avatar

    Ra August 19, 2012 9:48 am #

    Hi.

    How do I delete this table? Thanks.

    Sampe picture here;

    http://img42.imageshack.us/img42/8015/lmsesleriniengellemecou.png

  4. avatar

    Ra August 19, 2012 9:57 am #

    OK fixed problem. Thanks again ;)

  5. avatar

    Ra August 19, 2012 11:27 am #

    Hi again.

    Is it possible to add up to reddit.com address? digg.com change system digg does not now.

  6. avatar

    Roy August 20, 2012 4:53 pm #

    Its not working with mine? please help!

    • avatar

      Harish August 23, 2012 1:15 am #

      may be you already have jquery plugin. try once again without adding the jquery plugin.

  7. avatar

    Nyak Uema August 23, 2012 12:40 am #

    Thanks sob..!
    Worked elegant in mine..!!
    This’s what I’m looking for long time, n I got here accidentally..
    then practice immediately..
    great job..!!

  8. avatar

    Susan Oxnevad August 26, 2012 6:48 pm #

    Thank you very much for these step-by-step directions that work perfectly. I love your floating social sharing bar widget and appreciate you sharing this! Much appreciated.

  9. avatar

    Me, myself and nails August 26, 2012 7:02 pm #

    I want to have this for bloglovin’

  10. avatar

    Susan Oxnevad August 27, 2012 6:29 am #

    Hi,
    Is there any way to customize the tweet that is auto-generated? I think customizing each tweet might be more difficult than just modifying all the tweets.

    Thanks again.
    Susan Oxnevad

  11. avatar

    Mohammed Forhaj August 30, 2012 12:20 pm #

    You Guys Are Just Awesome . Love <3 <3 You Guys .. Thanks For This Post Very Much.. @Harish Bro. (BOSS)

  12. avatar

    irfan korai August 31, 2012 11:52 am #

    for my site i did’t able to find

    what to do ?

    • avatar

      Harish September 1, 2012 3:46 pm #

      Did you followed the 3rd Step?
      Click on the Expand Template Widgets check box while edit HTML.

  13. avatar

    irfan korai August 31, 2012 11:57 am #

    data:post.body

  14. avatar

    Manigandan Arumugam September 6, 2012 5:31 pm #

    Hi harish,

    i used this floating scripts in my website(techsemo.com) but not widgets, instead of these widget — am using sharethis widgets, because these widgets take less time to load than widgets provided by you here.

    thanks for this

  15. avatar

    Ben Racicot September 8, 2012 8:46 am #

    Hello, awesome work here BTW. But my blogger blog is only loading a few social buttons. Missing Pintrest, Linkedin and Facebook buttons.

    Any ideas? Thanks!

  16. avatar

    DJ September 12, 2012 3:02 pm #

    Thanks for all of your great tips. I really like the horizontal subscribe widget you’re using on this site a the top of the page. The RSS, Twitter, Facebook and Google+ tabs with number of followers, as well as a email subscription is exactly what I need and have been looking for. Can you please tell me how to get that widget? Thanks again for your great work!

  17. avatar

    Francisco September 19, 2012 2:37 am #

    Thanks for the tutorial is easy to understand and very useful

  18. avatar

    Guppu Boss September 25, 2012 12:31 am #

    icons are not floatin gon my blog can you do some thing plz

  19. avatar

    Nitin September 26, 2012 1:26 pm #

    Thanx Budy i have installed with widget on my blog :)

  20. avatar

    An September 29, 2012 2:31 pm #

    keep your update, mas Harish^^
    benkyo shimasho..

  21. avatar

    livesmartnaira October 6, 2012 1:34 am #

    I have a question how to make your blog comment box like or want to have their own comment box please help. emailed me wait. thanks

    • avatar

      Harish October 6, 2012 2:41 pm #

      not posible. you are in Blogger.

  22. avatar

    rajeev October 7, 2012 3:39 am #

    Thanx sir, i have installed with widget on my blog..,

  23. avatar

    Odhi Sitohang October 7, 2012 12:32 pm #

    The results of your efforts has been changed by a plagiarism My Blogger Lab. Check on : http://www.mybloggerlab.com/2012/08/floating-social-sharing-horizontal-bar.html now. :)

  24. avatar

    Indraneel October 9, 2012 11:53 am #

    Hey,
    Its not Floating while scrolling, its fixed! Why is that so..?

    • avatar

      Harish October 9, 2012 3:46 pm #

      then don’t add jQuery plugin.

  25. avatar

    syncbo October 12, 2012 11:37 am #

    hey , its not working for me , its not showing up ..
    help?

  26. avatar

    Berita Aneh October 18, 2012 4:18 pm #

    how to make it works if i want to use it for another widget in my sidebar? like a random post. pls help. tks

    • avatar

      blogger freak October 19, 2012 10:34 am #

      i was just wanna ask the same question

      • avatar

        Harish October 20, 2012 2:24 am #

        no it is only for Posts.

        • avatar

          blogger freak October 20, 2012 4:01 pm #

          can you please help us to make a code just like at cracked.com how to make the widget (video on that web) just floating in the sidebar and back to default when other widget come from top. i do believe you can do that. well.. that’s will useful for us. tks harish

  27. avatar

    Thanks. i will now do that. if this working. i tell you soon. thanks. sorry for bad english

  28. avatar

    Euan October 21, 2012 10:36 am #

    Hi Sir. I’ve installed it and I got an error at first.
    jquery script should come after the social script otherwise it won’t work. Because they are both inserted before the . People might get confused on that.

    • avatar

      Harish October 23, 2012 12:14 pm #

      its wrong. may be your blog has a jQuery plugin.

  29. avatar

    mambo October 21, 2012 11:32 am #

    it will be great widget. go for it dude

  30. avatar

    bloggerhero October 27, 2012 8:51 am #

    Thanx working perfect for me but it will be better if you add reddit and share too
    Manchester United any way thanx working perfectly for me

  31. avatar

    Tokotua Forex October 27, 2012 11:46 pm #

    Great trick, I will immediately use it in your blog, thank you

  32. avatar

    Abhimanyu Maini October 31, 2012 5:08 pm #

    This is the best gadget that you have refereed to me as i am a new Blogger i was i need of that and it is working properly in my blog.thanks so much…

  33. avatar

    Neeraj kumar November 8, 2012 11:32 pm #

    how can i facebook subscribe button to it

  34. avatar

    Christian Rock November 9, 2012 5:09 am #

    Thank you i will try it to my blog my blog need a floating social widget

  35. avatar

    Neeraj kumar November 14, 2012 7:14 pm #

    hey,it remains fixed when we scroll page down.moreover how to add other icons

  36. avatar

    Ra November 21, 2012 12:14 pm #

    please fix this problem;

    http://i.imgur.com/4Iw6N.png

  37. avatar

    babingevet November 22, 2012 11:00 am #

    Thanks for updating your js code. Apreciate it!

    regards,
    babingvet

  38. avatar

    Sam November 25, 2012 11:07 am #

    hey it’s not working anymore please check it.

  39. avatar

    Kulwinder Kohli December 2, 2012 6:41 pm #

    not working for me

  40. avatar

    babingevet December 5, 2012 10:51 am #

    Hi Harish,
    I’ve use this awsome widget on my blog for 5 months, very lovely and it is great. but after fixing the problem with updating your java script at github, the widget starting to act weird. Firs the pinterest is not placed like it used to be, and today I found the pinterest button not loaded (gone) and the widget is not floating (i can’t see it floating in the preview blog as well), this caused some of my post can’t be opened, so I removed this widget.
    I would like to use it again, but can you please check if there is a problem and make some fix.

    Regards

    • avatar

      Harish December 5, 2012 6:37 pm #

      Thanks I fixed it.

  41. avatar

    Euan December 6, 2012 11:04 pm #

    I am also having problem with this widget causing an error about googlecode something that needs password. from what I read, it’s your code that causing it. Can you fixed that?

    • avatar

      Harish December 7, 2012 12:08 am #

      yes!. Add updated script code. thanks.

  42. avatar

    Laxmam December 7, 2012 3:06 pm #

    I was searching for this :)

  43. avatar

    Siddharth Srivastava December 7, 2012 7:46 pm #

    Good one. will try this soon. :)

  44. avatar

    rohith December 13, 2012 12:50 pm #

    Thanks aloooooooooot

  45. avatar

    KISHORE KUMAR R December 15, 2012 5:41 pm #

    VERY USEFUL AND NICE WIDGET

  46. avatar

    Saurabh December 26, 2012 11:41 am #

    Very useful plugin. Can you please provide link for WordPress Plugin of the same type ?

    • avatar

      Harish December 26, 2012 6:29 pm #

      http://www.way2blogging.org/download/4/

  47. avatar

    Raghul December 31, 2012 8:34 am #

    Thanks so much works perfectly for me thank you, ur the best :)…..and this is my blog and im using x5 template http://bit.ly/TrKhHv

© 2014 Way2blogging. Designed by +Harish, Powered by WordPress