• Home
  • Services
  • Facebook
  • Privacy Policy

TricksDaddy

  • Home
  • Services
  • Facebook
  • Privacy Policy

How to Add Floating Social Media Buttons to WordPress Blog without any Plugin

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:

Floating Social Media Buttons

How to add Floating Social Media Buttons to WordPress blog:

  1. Sign in to your Dashboard and go to Appearance -> Editor.
  2. 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;
    }
  3. 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>
  4. Save the file.
  5. 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

Share On
 Previous Article How To Add Multi Level jQuery Navigation Menu To Thesis WordPress Theme
Next Article   7 Best Tutorials For WordPress Theme Options Page

53 Comments

  1. Sathish @ TechieMania
    August 1, 2010 at 11:11 pm

    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.

    • Simrandeep
      August 1, 2010 at 11:14 pm

      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.

  2. suyesh bhandari
    August 2, 2010 at 8:07 am

    hey great article man, thanks, how do i add digg on it

    • Simrandeep
      August 2, 2010 at 8:37 am

      @Suyesh

      I think you didn’t use the code yet. Digg button is already added into this code.

      • suyesh
        August 2, 2010 at 8:48 am

        and also i was not able to add the adsense above the post after adding that code lol, how do i do that

  3. suyesh
    August 2, 2010 at 8:43 am

    huh i already added the code, all i see is stumble twitter and facebook, heres a link

    • Simrandeep
      August 2, 2010 at 9:19 am

      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.

  4. Tanuj Lakhina
    August 2, 2010 at 10:34 am

    Yeah Digg isn’t showing up. Could you please mention what changes need to be made in the third last row. Noob here πŸ™

    • Simrandeep
      August 3, 2010 at 10:43 am

      If you couldn’t find the changes then copy the whole code again and paste it in your blog.

      • Tanuj Lakhina
        August 3, 2010 at 11:51 am

        Worked now. Thanks!

  5. George Serradinho
    August 2, 2010 at 10:43 am

    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.

    • Simrandeep
      August 3, 2010 at 10:45 am

      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.

  6. Shafar
    August 2, 2010 at 4:59 pm

    Thanks Simran. I was looking for this.

    • Simrandeep
      August 3, 2010 at 10:46 am

      Glad that you like it Shafar πŸ™‚

  7. Akshay
    August 2, 2010 at 7:03 pm

    really nice article
    very well explained

  8. Udegbunam Chukwudi
    August 3, 2010 at 6:26 am

    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 :-(.

    • Simrandeep
      August 3, 2010 at 10:50 am

      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.

  9. vijay
    August 4, 2010 at 7:46 pm

    Thanking you for an excellent tricks πŸ™‚ …

  10. Technoblogsite
    August 6, 2010 at 9:27 am

    i had digg digg plugin as i haven’t seen the post before…… otherwise used your code.. well thanx for sharing mate…….

    • Simrandeep
      August 6, 2010 at 9:44 am

      Most of the bloggers are using digg digg plugin.. You should use this code on your blog.

  11. DEN @ Dreamhost Coupon
    August 7, 2010 at 10:53 am

    Well I mostly prefer using plugins for this but the code you have given above is too easy to add. Thanks for the code

    • Simrandeep
      August 7, 2010 at 10:57 am

      Thanks for your comment Den πŸ™‚

      Any specfic reason for using plugins over manual coding ?

  12. Harshit Singhal
    August 7, 2010 at 8:20 pm

    Very nice detailed article. Plugins should be avoided as they put a lot of load on the server.

  13. Stacey Cavanagh
    August 8, 2010 at 1:17 am

    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

  14. Harsh Agrawal
    August 10, 2010 at 3:17 am

    That’s cool tip Simran.. M using this plugin call Smart sharing to achieve this…

    • Simrandeep
      August 10, 2010 at 8:50 am

      Thanks Harsh for your comment here πŸ™‚

      Smart sharing plugin is really nice if you don’t want to manually add the code.

  15. Jay Brown
    August 15, 2010 at 6:40 am

    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

  16. Rajeel
    August 21, 2010 at 5:49 am

    Hey.

    This would be useful for all those who uses the digg digg plug-in, which could easily slows down the page speed

    • Simrandeep
      August 21, 2010 at 8:30 am

      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.

  17. 7stars
    August 24, 2010 at 1:46 pm

    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

    • Simrandeep
      August 24, 2010 at 11:14 pm

      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.

  18. Girish
    August 30, 2010 at 3:43 pm

    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…

  19. Paul MacLean | tbk Creative | Web Design and Web Marketing
    August 31, 2010 at 9:31 am

    Hi there, I have developed a plugin for this using the new official twitter button

  20. Odurinde Finance and Business
    September 18, 2010 at 1:53 am

    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

    • Simrandeep
      September 21, 2010 at 10:45 am

      The buttons are on the left side if the post in my monitor. What is the resolution of your monitor ?

      • Odurinde Finance and Business
        September 21, 2010 at 4:11 pm

        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

  21. techlook
    September 25, 2010 at 11:55 am

    its not working……. r u sure this process or its my error??

  22. Jeny
    September 29, 2010 at 6:28 am

    Thank you, this has been very useful.. I now has social media buttons

  23. Double Glazing Installer
    October 9, 2010 at 9:04 pm

    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

  24. shenoyjoseph
    November 5, 2010 at 2:18 am

    easy way to implement these buttons in our site

  25. Kako
    November 5, 2010 at 4:38 pm

    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 πŸ™‚

  26. rohit
    November 11, 2010 at 9:17 pm

    Hay there is error in script.. but working…..

  27. Mohammed Fouzan @ Geek world
    January 11, 2011 at 6:13 pm

    Great post. Very Useful.
    Thanks for sharing

  28. Jasmine
    January 18, 2011 at 2:39 pm

    Oh, this floating thingy looks cool, and can be done without a plugin! That’s awesome.

    • Simrandeep
      January 18, 2011 at 8:20 pm

      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 πŸ™‚

  29. DJ ARIF
    January 18, 2011 at 9:23 pm

    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

  30. Sybil Nelson
    February 13, 2011 at 9:43 pm

    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?

  31. Harsh Agrawal
    March 21, 2011 at 1:44 am

    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…

  32. Hanif @ DBH MUSIC
    April 18, 2011 at 12:21 am

    i m using Lifestyle template in my wp blog.
    but i couldn’t find any single.php file.

    plz help me@@@@

  33. Ajay | symplyfyd.com
    July 4, 2011 at 2:33 pm

    thnx for sharing..but a facebook share button is must..

  34. Gaurang
    February 7, 2012 at 10:56 am

    Cool plugin. Thanks a lot for share.

  35. Pingback: Tweets that mention How To Add Floating Facebook Digg Twitter StumbleUpon Buttons To Wordpress Blog Without Any Plugin -- Topsy.com
  36. Pingback: How To Add Facebook Like Button To WordPress Blog
Β© Copyright. Theme by BloomPixel.