Add Floating Share Widget in Blogger.

Apart from working on traffic and search engine optimization (SEO), it is very important to integrate your blog with popular social networking websites. So, in this post I am presenting how to add floating share buttons (social bookmarking) widget by the right or left of every page. It is just one of the gadgets you must have to add to your blog if you intend to get free traffic from facebook, twitter, Stumble upon, Google plus and Digg.


Having floating share widgets in either side of the websites an easy way to engage your visitors to share your knowledge with others on those social networks. So let’s talk how to add it. 





How to Add Floating Share Buttons On the Sidebar:


1. Log in to your blogger account and click on Design

2. Then, Click on Add a Gadget on the sidebar.

3. Select HTML/Java Script.

4. Paste the code below into the box and save. There's no need for a title.





<!-- Floating Share Buttons Code Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://www.learningitech.com/2011/11/add-floating-share-widget-in-blogger.html" ><font color="black">[Get This]<font></font></font></a></div></div>


<!-- Floating Share Buttons Code End-->


5. Save the widget and preview your blog.

If you want to add it to Right Side then change this float:left; to float:right;

If you already have a Google plus button above or below your posts, the one in the widget might not appear. It seems you can't have two +1 buttons on a page.

That's it now you have a floating share widget in your Website's Sidebar. 
Wants to get further gadgets and widgets for blogger?



3 comments:

phan mem crm said...

Thank you so much. I could make it succesfully. Have one more query. In my blog, it just show the “Like Button” and no supporting script like “be the first of your friends to like it” is given. Can you please guide?

Muhammad Usman said...

Thanks for visiting Phan mem

To add the text “be the first of your friends to like it” in your template just get the HTML code and paste it along with the LIKE button code and paste in ther template where you want to display that code also you can set after and before the Button.

Comment Express said...

Thank you :) This helped me a lot :) www.commentexpress.com

Post a Comment

Important - If you are asking a question click the 'Subscribe By Mail' link below the comment form to be notified of replies.

Note:If you add a link to your comment it will not be published.