How to Get Lightning Fast Social Media Sharing Buttons for Your Blog

How to Get Lightning Fast Social Media Sharing Buttons for Your Blog

Nowadays, page load speed is of utmost importance for any respectable website. The time any page on your site takes to load is directly influenced by the number of requests sent and the way they are executed.

At the same time, having different kinds of social media plugins on a blog is desirable so that the readers can share the post. However, this could negatively affect the page load speed.

The approach given below is the approach that we use on ManageWP and has been proven the fastest way of loading social media buttons on a page.

We have Twitter, Facebook, Google Plus, LinkedIn and Pinterest all loading with minimal effect to the loading time of the whole page. The best thing is that it only takes a few lines of code. Simple things are usually the best.

This code should go into the <head> or header.php in your theme. It loads all the scripts we need after the onload event.

This is the code that goes into the single post file (single.php):

Here is the CSS code we use to make our share bar “stick” next to the post:

#sticky-anchor{
    position: absolute;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #FFFFFF;
    border: 1px solid #BBBBBB;
    -webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    -webkit-box-shadow: 0 0 3px #CCCCCC;
    -moz-box-shadow: 0 0 3px #CCCCCC;
    box-shadow: 0 0 3px #CCCCCC;
    font-family: Arial;
    font-size: 10px;
    line-height: 16px;
    padding: 5px 10px 5px 5px;
    text-align: center;
    width: 55px;
    z-index: 9999;
    margin-right: 10px;
    margin-top: 190px;
    border: 1px solid #DDDDDD;
    float: left;
    margin-left:-85px;
    text-align:center;
}
.sticky{

}
#sticky-anchor.stick{
    position:fixed;
    top:50px;
}
#sticky-anchor .fb-like{
    padding:5px 5px;
}

Comments and feedback are welcomed!

Creative Commons image courtesy of Reckless Dream Photography

Vladimir Prelovac

Vladimir is the Founder of ManageWP, and is a frequent contributor to the WordPress community - in the form of numerous plug-ins, tools, WordCamp talks and a book by the title WordPress Plugin Development.

36 Comments

  1. Jee Main

    In Chrome this method no longer works. On this page only the “Email This” icon is visible. IE doesn´t give any problems for a change

  2. Terry

    How do you implement the CSS and how do you go about adding additional social media such as Google +?

  3. Rene

    I like to recommend a very fast static share button plugin mashshare which looks similar to the ones Mashshable is using:
    https://wordpress.org/plugins/mashsharer/

  4. Dave Lawton

    This is really cool and I want to try and manually implement it on all of my websites (whether WP or not). However, after looking at the code for a little while I still don’t understand what exactly is happening here, why is this faster than just using the standard button codes which those services provide? For example, why does this code load the Facebook like button faster than the code that Facebook gives me to use on my sites? Any help or explanation to help understand what this is actually happening here would be greatly appreciated, thank you!

  5. comptabilité

    thanks very match for the tip.the given code is fast th load on the page.

  6. Dany

    There is no code anymore in the section that says: “This is the code that goes into the single post file (single.php):”

    Could you provide me with the code ?

    Thanks

  7. JP

    This seems like it will help a lot. However, I have several pages that I don’t want the share buttons to show up on.

    How would I set this up so that I can turn this off on certain pages?

    Thanks!

  8. Andrew Newey

    Hi, this worked mostly, except for my Static Front Page.

    I copied the first 2 code snippets and left out the CSS sticky sidebar bit. I don’t use posts, but instead use pages for each main page of my website, so I stuck the 2nd code block in my page.php instead of single.php. I did try adding it to single.php just in case, but still no luck.

    Ideas on how to get this to display on static front pages?

  9. Lovely

    very interesting article ,, thank you for sharing

  10. Gautam Doddamani

    implemented your code vladimir but can you tel me how to implement the same techniques for google adsense codes because it is taking the most major time for loading my site..pls advise thanks!

  11. Allii Allee

    i mess up all codes now i am using plugin

  12. Michael Schneider

    This looks very nice. But it contains the counters and supposedly counters slow down the page load quite a bit.

    Is there a way to do just the share-buttons without the counters?

  13. pederhorner

    Thanks for the simple-appearing code.

    I followed your instructions precisely just as you wrote. Without the CSS, the social buttons show up on the left side of the WP posts in horizontal fashion. With the CSS code, nothing shows up at all. Any ideas?

    http://classicjazzcorner.com/denvercx/?p=85

  14. Tin

    This is great! thanks for sharing the code.

  15. Jim

    Am i missing something, but what makes the sidebar scroll up a little and then become fixed on the page? Is that not covered in this post?

  16. JM

    What’s the name of the plugin that is used right now on the site? To the left.

    1. ManageWP

      It’s not a plugin – it’s the code described in the post.

  17. King

    Can you suggest me the way how I can add this to genesis theme framework?

    1. ManageWP

      All instructions are in the post – just follow them.

  18. clare

    Hey this looks great. I am trying to add very simple horizontal buttons to my new blog site, like on this page : http://clarethwaites.com/love-clouds-and-sunsets/ but without the share button with the dropdown of infinite options.

    The oldest, simplest way to do it! I would like facebook, twitter, google plus, stumbleupon and pinterest. possibly linked in.

    i do NOT want it as a share bar that floats on the side of the blog. I too have used all the social sharing plug ins, they ALL load slow, they ALL have formatting errors (ie some will have the big count others the small or no count at all –

    if there is ANY way you could help me to modify your code above to have only the buttons like on my link, that would be AMAZING!!! hope you can help, thanks so much!

  19. Matt

    In Chrome this method no longer works. On this page only the “Email This” icon is visible. IE doesn´t give any problems for a change 😉

  20. Jean Galea

    Could you update this code to include the Back to Top and Email This functionality? Also, where do you enter the profiles for your site?

    1. Noumaan

      I second that. It is really nice and clean, thanks for sharing.

      1. ManageWP

        Email this is a plugin – unfortunately not as simple to do.

  21. Jeff

    Is there a way to add Buffer support to this?
    Thanks for the great tip.

  22. karl_s

    If you are using a lazy loading social media plugin, like Digg Digg, would this do anything for you? I suspect not, but you tell me.

    1. vprelovac

      No, this technique is useful when you want the fastest possible page loading time.

      1. Sabbah

        I agree. I tried almost all (digg digg, addthis, sharethis, etc…) they all load slow.

  23. Sabbah

    I can’t see pinterest button there, although you have it in the code!?

    1. vprelovac

      We removed the Pinterest button eventually as there was little use.

      1. Sabbah

        That’s fine. Now is there a documentation on how to add more buttons? say I wasnt to add reddit, print and email buttons, what do I do?

        1. ManageWP

          Unfortunately that is outside of the scope of the article.

  24. Kristian Primdal

    Another way to do this, it with the help of Socialite.js and then place the code in the footer instead. http://socialitejs.com/

    1. vprelovac

      Very nice library, thanks for sharing it.

  25. Sallie Goetsch

    1) You have a typo in your post title.

    2) What would you do to place the icons above or below the content?

    1. ManageWP

      Thanks for the tip. Just use the code for the post and put it anywhere you wish. The given CSS is what makes it stick on the side, but you do not need to use that.

Leave a Reply

Your email address will not be published. Required fields are marked *

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!

Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!

Over 65,000 WordPress professionals are already using ManageWP

Add as many websites as you want for free, no credit card required. Sign up and start saving time!



Have questions? Get in touch!