One of the best ways to get more exposure and more traffic to your blog posts is via Social Networking Websites. Social Networking Websites can easily boost your traffic. Users will easily share your posts on Social sites like Facebook, Digg, Twitter and StumbleUpon if you add social media buttons to your blog posts.
These days most of the bloggers are adding floating social media buttons to their blog posts. Floating buttons stay on a fixed position even if you scroll down or up the page which gives your blog readers the more flexibility to easily share your posts.
In this tutorial you will learn How to add these floating icons to your WordPress blog.
Have a look at the screenshot below:
How to add Floating Social Media Buttons to WordPress blog:
- Sign in to your Dashboard and go to Appearance -> Editor.
- Copy and paste the following code in style.css file.
#sharebox { background-color:#fff; border:1px solid #ccc; bottom:50px; left:30px; position:fixed; } #sharebox .float { padding:5px; }
- Now open single.php file and search for something like <div class=”entry”> and paste the following code after it.
<div id="sharebox"> <div class="float"> <script type="text/javascript"> tweetmeme_source = 'tricksdaddy'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div> <div class="float"> <script>var fbShare = { url: <?php the_permalink() ?>, size: 'large', badge_text: 'fff', badge_color: '3b5998', google_analytics: 'true' }</script> <script src="http://widgets.fbshare.me/files/fbshare.js"></script> </div> <div class="float"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class="float"> <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script>
<a class="
DiggThisButton DiggMedium"
></a>
</div> </div> - Save the file.
- Now open any of your blog post and see the new floating social media buttons.
If you face any problem in adding these buttons to your blog, just leave your comment here and I’ll be available to help you out.
You might also be interested in:
- How To Add Facebook Like Button To WordPress Blog
- Add Google Buzz Button To WordPress Blog
- How To Add Orkut Share Button To WordPress Blog
Ho. Thanks for this article mate. I have searched for a working code madly. And now i am here and your code is working. I have done some editing to your code. Hope you dont mind it.
Glad you like the article mate.
I don’t mind if you change the code. You can change it according to your requirements and you taste.
hey great article man, thanks, how do i add digg on it
@Suyesh
I think you didn’t use the code yet. Digg button is already added into this code.
and also i was not able to add the adsense above the post after adding that code lol, how do i do that
huh i already added the code, all i see is stumble twitter and facebook, heres a link
Hey please update the code in third last row. Actually the code got executed while updating this post.
I tried to put the Adsense ads with this code and its working fine for me. Put the Adsense code above or below my code and it will work.
Let me know if you have any further issues.
Yeah Digg isn’t showing up. Could you please mention what changes need to be made in the third last row. Noob here π
If you couldn’t find the changes then copy the whole code again and paste it in your blog.
Worked now. Thanks!
Althought your instructions are nice, it would of been better to add the code into one’s functions file. It’s safer to do it that way as if you ever get a new theme, you just have top copy your functions file and not try and remember where all you made changes to what files, etc.
Thanks for your suggestion George but I don’t think that we can use the same functions file in every WordPress theme. Some themes offer theme functions and some don’t. All the coding for theme functions is saved in functions.php file so I don’t think that we can use the same file everywhere.
Thanks Simran. I was looking for this.
Glad that you like it Shafar π
really nice article
very well explained
I just removed the floating buttons from my site because one of my readers complained that it was blocking the content. Apparently on monitors with Lower resolutions, it blocks the content :-(.
I totally agree with you Udegbunam. Floating buttons don’t do well on lower resolution monitors. They look great only if you have wide-screen monitor.
Thanking you for an excellent tricks π …
i had digg digg plugin as i haven’t seen the post before…… otherwise used your code.. well thanx for sharing mate…….
Most of the bloggers are using digg digg plugin.. You should use this code on your blog.
Well I mostly prefer using plugins for this but the code you have given above is too easy to add. Thanks for the code
Thanks for your comment Den π
Any specfic reason for using plugins over manual coding ?
Very nice detailed article. Plugins should be avoided as they put a lot of load on the server.
I’m pretty phonic of coding… largely because I have the technical capabilities of a goldfish! That’s why I use plugins for pretty much everything but I might actually be tempted to try this out.
Thank you
That’s cool tip Simran.. M using this plugin call Smart sharing to achieve this…
Thanks Harsh for your comment here π
Smart sharing plugin is really nice if you don’t want to manually add the code.
Great info. Thanks I’m goin to add this now. Perfect timing for this post I’m just redoing my blog. Check it out and tell me what you think
Hey.
This would be useful for all those who uses the digg digg plug-in, which could easily slows down the page speed
You got it right Rajeel. This tutorial is specially for those who are using digg digg plugin. Using a plugin slows down the page load speed, so this tutorial may be helpful for bloggers.
Hi there, π
thank you very much for this tutorial. How to add the bar also for the posts in homepage, and not only single posts?
Regards
If you want to show the buttons on homepage too then copy and paste the code in index.php file also. But the buttons will then link to homepage only.
Thank you very mcuh.
Works good for me on firefox (stays on the down left part of the screen as one scrolls down).
But on IE, it is seen in a box above the comments section.
May be it works in the newer versions…
Hi there, I have developed a plugin for this using the new official twitter button
Dear Simrandeep,
I have added the Floating Social Media Buttons to my blog, but I having some problem on the placement. It appear on the top of all post, when it suppose to appear by the side. I use the blog URL for this post, you can see what I mean when you open any of the post on the blog.
I will be very happy if you can tell me what to do, to move the floating button to the left sidebar. Thanks
The buttons are on the left side if the post in my monitor. What is the resolution of your monitor ?
15.6″ HD Widescreen UltrabrightΓ’βΒ’ LED-backlit Display (1366 x 768 resolution, 16:9 aspect ratio)
The floating icon just seat on top of all my post. It is on the lift side, but just seat on the post. I think it suppose to be on the outside lift, so that it can move as we scroll the page up and down, it is not in my case.
Thanks
its not working……. r u sure this process or its my error??
Thank you, this has been very useful.. I now has social media buttons
Thanks for the excellent tutorial. Works perfectly.
Is there a way to add a facebook share count like on the twitter share button?
Thanks
Ryan
easy way to implement these buttons in our site
This is great! I’ve always wanted to add something like this.
It was a lot easier than I expected and now I have a nice floating button on my website. Thank you π
Hay there is error in script.. but working…..
Great post. Very Useful.
Thanks for sharing
Oh, this floating thingy looks cool, and can be done without a plugin! That’s awesome.
Plugins make your blog load slow. That’s why I have written a manual method for these floating buttons. You can add these to your blog if you like π
Thanks for the helpful post. In this post you have provided only twitter, stumble upon and digg floating buttons code. I would like to request you to share how to add floating facebook share button to blog
This was very helpful. Thank you. Just one thing. The buttons are appearing vertically. Any idea how to make them horizontal in order to save space?
Thanks Simran for this post. I had a floating buttons for social networking site but don’t have social bookmarking buttons.. Though I have been worried about will it look same in different browser, I will be adding it and will see how it works…
i m using Lifestyle template in my wp blog.
but i couldn’t find any single.php file.
plz help me@@@@
thnx for sharing..but a facebook share button is must..
Cool plugin. Thanks a lot for share.