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
How to Add Floating Social Sharing Bar Widget?
First,
- Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
- Select the Template > Click on Edit HTML > Proceed
- 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 == "item"'>
<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 == "item"'>
<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="/2012/06/ampquot//facebookcom/plugins/like_href__ampquot__datapost.url____ampquot__ampampsend_false_ampamplayout_button_count_ampampwidth_80_ampampshow_faces_false_ampampaction_like_ampampcolorscheme_light_ampampfont__ampampheight_21_ampquot_.html" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</td>
<td>
<div expr:id=""w2bPinit-" + 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 == "item"'>
<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).
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']
you something done wrong. please try to install again.
i’m not getting pinterest button in the bar…weird…plz plz help!
Thanks for info, i will fix it. Stay connected.
Hi.
How do I delete this table? Thanks.
Sampe picture here;
http://img42.imageshack.us/img42/8015/lmsesleriniengellemecou.png
OK fixed problem. Thanks again
Hi again.
Is it possible to add up to reddit.com address? digg.com change system digg does not now.
Its not working with mine? please help!
may be you already have jquery plugin. try once again without adding the jquery plugin.
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..!!
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.
I want to have this for bloglovin’
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
You Guys Are Just Awesome . Love <3 <3 You Guys .. Thanks For This Post Very Much.. @Harish Bro. (BOSS)
for my site i did’t able to find
what to do ?
Did you followed the 3rd Step?
Click on the Expand Template Widgets check box while edit HTML.
data:post.body
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
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!
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!
Thanks for the tutorial is easy to understand and very useful
icons are not floatin gon my blog can you do some thing plz
Thanx Budy i have installed with widget on my blog
keep your update, mas Harish^^
benkyo shimasho..
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
not posible. you are in Blogger.
Thanx sir, i have installed with widget on my blog..,
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.
Hey,
Its not Floating while scrolling, its fixed! Why is that so..?
then don’t add jQuery plugin.
hey , its not working for me , its not showing up ..
help?
how to make it works if i want to use it for another widget in my sidebar? like a random post. pls help. tks
i was just wanna ask the same question
no it is only for Posts.
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
Thanks. i will now do that. if this working. i tell you soon. thanks. sorry for bad english
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.
its wrong. may be your blog has a jQuery plugin.
it will be great widget. go for it dude
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
Great trick, I will immediately use it in your blog, thank you
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…
how can i facebook subscribe button to it
Thank you i will try it to my blog my blog need a floating social widget
hey,it remains fixed when we scroll page down.moreover how to add other icons
please fix this problem;
http://i.imgur.com/4Iw6N.png
Thanks for updating your js code. Apreciate it!
regards,
babingvet
hey it’s not working anymore please check it.
not working for me
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
Thanks I fixed it.
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?
yes!. Add updated script code. thanks.
I was searching for this
Good one. will try this soon.
Thanks aloooooooooot
VERY USEFUL AND NICE WIDGET
Very useful plugin. Can you please provide link for WordPress Plugin of the same type ?
http://www.way2blogging.org/download/4/
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