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
Leave a Reply