How To Add Floating Sidebar Social Share Buttons In Blogspot WordPress Site

Social media is one of the best way to earn more visitor to your site and important SEO optimization steps. The more visitor the more popularity to your site, that means more money. If a visitor get helps from your site he or she will definitely try to share it with his friends. Now if you have a easy way to share your contents to social media like Facebook, Twitter, stumble upon, Digg, Linked In and Definitely Google Plus One you will get more visitor.

Though this blog is on WordPress, I previously blogging in Blogspot. There are many Plugins to add Floating Social Share Buttons in wordpress. But in Blogspot you have to do a little things. Blogspot is also a good blogging platform. See here the preview  or here in my another blog of Floating Social Share Buttons.

 

Add Floating Social Share Buttons In Blogspot Blog

Just follow these simple steps:

Step 1. Go to Your Blogspot site
Step 2. Then Design> Add a gadget (add any where it doesn’t matter)
Step 3. Copy the Code ( Alternate From Pastebin. You Can Customize the code there if you want, I consider not to change value)

For WordPress Website:

1. Go to Appreance
2. Then Widget
3. Add Text. Grab it and put on sidebar.
4. Copy the below code and paste it there. No need to give title.

<!–SideBar Floating Share Buttons by http://howto.medinfo24.com/ 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>
<br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://goo.gl/TsZZ4" target="blank"><font color="red">Get This<font></font></font></a></div></div>
<!–SideBar Floating Share Buttons by http://howto.medinfo24.com/ Code End–>

 

How to Set or Use on other side:

Search for this: #pageshare {position:fixed; bottom:15%; right:10px;

Change it to this: #pageshare {position:fixed; bottom:15%; left:10px;

Note: Changes applied from right to left.

If you only want to use the Share button and remove the like button, search for this code and remove it:

<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>

Now see your Blog, Isn’t it Beautiful

Code Backup

Tagged as: add like buttons or share buttons to socialengine forum, adding share buttons, aol share buttons, Blogspot Tips, buttons blogger, embed share buttons into web site, facebook share count buttons for blogger blogger widgets, Floating Social Media, Floating Social Media Buttons Blogger, free social media share buttons, media buttons blogger, share buttons, share buttons ha facebook just schooled the internet again, social media, social media buttons, social network share buttons, social share buttons, social share buttons for wordpress

Revised on 29 March, 2013