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
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
Terry
How do you implement the CSS and how do you go about adding additional social media such as Google +?
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/
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!
comptabilité
thanks very match for the tip.the given code is fast th load on the page.
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
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!
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?
Lovely
very interesting article ,, thank you for sharing
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!
Allii Allee
i mess up all codes now i am using plugin
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?
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
Tin
This is great! thanks for sharing the code.
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?
JM
What’s the name of the plugin that is used right now on the site? To the left.
ManageWP
It’s not a plugin – it’s the code described in the post.
King
Can you suggest me the way how I can add this to genesis theme framework?
ManageWP
All instructions are in the post – just follow them.
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!
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 😉
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?
Noumaan
I second that. It is really nice and clean, thanks for sharing.
ManageWP
Email this is a plugin – unfortunately not as simple to do.
Jeff
Is there a way to add Buffer support to this?
Thanks for the great tip.
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.
vprelovac
No, this technique is useful when you want the fastest possible page loading time.
Sabbah
I agree. I tried almost all (digg digg, addthis, sharethis, etc…) they all load slow.
Sabbah
I can’t see pinterest button there, although you have it in the code!?
vprelovac
We removed the Pinterest button eventually as there was little use.
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?
ManageWP
Unfortunately that is outside of the scope of the article.
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/
vprelovac
Very nice library, thanks for sharing it.
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?
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.