Today I comes with New Floating Social Media Buttons With Cool Hover Effect. You can add floating social media buttons to WordPress and Blogger. You may have seen floating social media buttons on other website and blogs but we try to provide you some unique style widget which you never seen anywhere. I made this into a simple widget so you don’t need to go into your template or theme source just paste code below to your blog.
Only of best feature of this is a hover effect. When you hover your mouse the button comes with a cool background hover. I had included some most used social media sharing buttons like Google+, Facebook Like Buttons, Stumbleupon, Twitter and Digg. Each of them comes with a live counter.You can add more social bookmarking or sharing buttons later if you wish.
Adding Floating Social Media Buttons With Cool Hover Effect
You just need to place a code to your blog widget Follow following steps to add floating social media buttons to WordPress and Blogger.
Adding To Blogger
- Go to Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it under Blog Posts gadget.
- Click Save button (top right hand corner).
Adding To WordPress
- Go to Dashboard > Appearance > Widgets > Available Widgets.
- Drag Text widget into a sidebar.
- Paste in the code.
- Save.
<!-- floating share bar Start AllBloggingTips.com--> <style type="text/css"> .sbutton{ background:#f0f0f0; cursor:pointer; color:#fff; border:none; padding:4px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; margin-left:8px; font:12px sans-serif; } .sbutton:hover{ background:#336699; } #pageshare {position:fixed; bottom:15%; margin-left:-81px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background:#fff;border: 1px solid #f7f7f7; padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 2px 0 5px;} #pageshare:hover {-moz-border-radius:6px; -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);border: 1px solid #ddd;} .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;/*bs-fsmsb*/-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="Get this from AllBloggingTips.com"> <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> <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></a> </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='rt'> <a class='twitter-share-button' data-count='vertical' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></script></div><div style="clear: both;font-size: 9px;text-align:center;"></div><!-- Do not remove this link --> </div><!-- floating share bar End -->
Credits
This New Floating Social Media Buttons With Cool Hover Effect is first shared on AllBloggingTips. Bloggers are requested to link back if they are going to share above widget with there visitors.
If you face any problem in adding this floating social media buttons feel free to drop your comments. Enjoy! Peace
Thanks for quick reply :)Screenshot is over here: www. veebidoktor.ee/wp-content/uploads/2013/10/problem.jpgOr you can just check the same page blog section :)
Hello Kodulehe,
I just looked into your website and found that the problem is with your social sharing plugin. Deactivated it and here is the solution.
Use any other social sharing plugin. Here are 10 plugins you can use any. https://allbloggingtips.com/10-best-social-sharing-plugins-for-wordpress/
I recommend #3 plugin, as it’s too similar to your current plugin. Here is download link: https://wordpress.org/plugins/twitter-facebook-google-plusone-share/
Let me know if you still face any issue. :)
Got third one working!
You have very nice blog.
Thanks for support!
My pleasure, Kodulehe.
Keep visiting my blog, if you ever stuck anywhere, just drop me email. I’d be glad to help you out. :D
Hi,
Every time when I move my mouse next to facebook share icon it changes place. Do you know what can cause the problem?
Thanks,
Could you share screenshot? Let me check
Hi Ammar,
First, thanks a lot for simplifying the bloggers’ lives technically. I tried installing your floating network bar on my blog but it does not show the right count.
I have posts on my home page and the bar stays the same (count wise as well) through out the page. Please see it yourself – http://www.womanatics.com
Please help. Also, I replace the code (instead of margin-left, I used left=-10px) bcoz with margin left, it was showing on the centre of the blog.
Please help.
Wow You have done beautifully. Can you tell me how it will work on non WordPress websites
Very nice piece of article i am using this plugin since a long time but now i have changed to something totally cool , that is a blur and open magical snippet , you can check it out in my page.
i think this tye of plugins are now old fashioned try totally something new . javascript is a great language to make such plugins.I m making my own plugins any one can contact me.
I’ve been looking all over for this. Thanks a lot for This. I need this on my blog. Keep it up Ammar. You’re doing us a lot of good service.
hi Ammar i’ve placed the code as you said , but it appears at the right side of the post , so how can i show the floating widget to the left on posts pages.
Simple search for
float:left;
withfloat:right;
If not try to send me screenshot!smoothly working on blogger
Thanks for creating this! If I create a widget and put this code in there, will the widget and the code show up on my site or does it just become invisible? Do I have to put this widget in each sidebar that I use?
Just put code in sidebar widget (html) only 1 time! :D
nice but will it work properly on wp????
Yes, Give it a try. If it not works :) Just shot me another comment!
hi AMMAR how do we add pinterest and stumbleupon button on the widget?………. anyway thanks for this great widget. i use it in my SHWP blog, works like a charms. thanks
Hey.
Yes, we can add these buttons. Just goto these sites get button code and place them in above widget :D
Hello,
Ammar Ali my name is Fahad Jahandad i want some FAVOR
Can you give me the code of your floating social bar which is on you site exact same
ThankYou
Hi Fahad,
Currently we are using “Sharebar” plugin for wordpress. You can’t use this plugin in blogspot :(
Just give this widget a try. It will convert well
~Ammar
my Facebook count in floating bar is not working pls say me the solution i am looking up for more than one week
Can you please explain what exactly you mean?? :)
Good Try Ammar
Can I Write These Type Of Guest Post For Your Blog ?
I Will Design Far Better Than This :)
Yes. You can write guest post of these types. Make sure to visit write for us page. >>
HI,
How I add thi widget only on internal pages, n not on the home page…can I align it on the left?
To show widget only on post. Download this code and place it in sidebar as widget https://allbloggingtips.com/wp-content/uploads/2012/04/abt-floating-sharebar-new-code.txt
And it is already align to left :)
where? can you give me specific?
Download this code and place it in sidebar as widget https://allbloggingtips.com/wp-content/uploads/2012/04/abt-floating-sharebar-new-code.txt :)
not compatible with blogger templates. i replace this with my previous mbt floating button but is not appearing. and about screenshot it is invisible ;)
Code updated . You can check it now it will work fine
Sorry, but it’s doesn’t work for me :( (Blogspot platform)
It works on almost all blogspot blogs! Send us a screenshot of problem
very god work amar .. floating widget is looking very cool .. “Digg Digg” plugin is done this work very easy on wordpress CMS .
First of all I am AMMAR not “amar” You always do this mistake. And Yes we can, but for a small snippet code you wouldn’t want to depend on plugin. Whereas Plugin also increase number of php calls, hence its an unnecessary load on Server.
Really Awesome Article and very useful for me thanks a lot