With the page loading speed being so important to a websites success you need to try to speed up all areas of your website as much as possible. One of the features that most websites have now is social media buttons, these allow the visitors to easily share your articles on their favourite social networks. It also allows your visitors to see how many times a page has been shared on each of the social networks. The problem with these social network buttons is that they have to make a lot of HTTP requests via AJAX to get all the information they need to display the button. They will fetch the images for the buttons and the amount of times the page has been shared. It is common to have at least the main 3 social networks Facebook, Twitter and Google Plus, but you could also have Pinterest, LinkedIn and many others. With all these different social network buttons on the page there can be a lot of HTTP requests to get all the information for the page. Each one of these HTTP requests have an affect on the total download time of a page, it is important to you try to reduce these as much as possible. One way of doing this is to remove the default buttons and replace them with a simple share link. This won't show you how many people have already shared this page, which might be important to your brand to show off that lots of people share these articles. But if this isn't important to your website then you can easily just replace these with the share links. If you would like the default social media buttons then one option is to use lazy loading, to only make the HTTP requests when you need to. This can be done as you scroll down the page and have the social media buttons at the end of the page and only load them when you are near the bottom of the page. You could even hide the buttons by default and only load them by clicking a button, and then make the HTTP requests to load the social buttons. The following code will show you how you can lazy load the 4 main social media buttons Twitter, Facebook, Google+ and LinkedIn.
Asynchronously Loading Javascript
Another solution to loading in your social media buttons is to make sure the Javascript loads asynchronously, this means that the Javascript will load and run but will not effect the rest of the page from loading. This means that your page will only slow down a little bit because of the social media buttons, but they still need to make HTTP requests and use up bandwidth on your page. To load in a Javascript file asynchronously you can use the following code.
var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript"
scriptTag.src = "http://www.domain.com/social_media.js";
scriptTag.async = true;
document.getElementsByTagName("head")[0].appendChild(scriptTag);
This will create a new script tag, add in the social media javascript in the src attribute and add the tag inside the head of the document. I prefer to use jQuery when working with Javascript, it just makes things so much easier. JQuery has a handy method called getScript() which does the above but with fewer lines of code.
(function() {
$.getScript('http://www.domain.com/social_media.js');
});
Now we can use this technique with the following examples to show how we will load in the social media buttons on a click button, these will then load in the Javascript for the buttons. If the Javascript is already loaded the following code will show you what functions you can call to load in the social buttons using their API.
Twitter Button
There are two ways of loading in each of the social buttons, if the HTML for the button is already in the DOM then all you have to do is load in the Javascript by using the $.getScript() method. When this Javascript is loaded it will search for the correct HTML and turn this into the Twitter buttons. The HTML that is needed for the Twitter buttons is the following:
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal"></a>
With the Twitter button HTML is in the DOM we can now load in the Javascript by using the $.getScript() method.
$.getScript('http://platform.twitter.com/widgets.js');
When this Javascript is loaded then it will search for all the Twitter links and turn them into Twitter buttons. But if the Javascript is already loaded on the page and you add new twitter links to the page you need a way on running the widget load script again so that Twitter will search for links to turn them into buttons. When the Twitter Javascript is loaded on the page it will create an object called twttr on this object it has a method you can use to re-load the widgets again. To re-run the Twitter load script again you can use the following code.
if (typeof (twttr) != 'undefined'){
twttr.widgets.load();
}
From these two methods we can create a function that will check to see if the twttr object is set, if it isn't then we can load the Twitter Javascript file, if it is set then we can call the load function to display all of the Twitter buttons.
function loadTwitter()
{
if (typeof (twttr) != 'undefined'){
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js');
}
}
Facebook Button
Again with the Facebook button there are two ways of loading the buttons, you can either load the Javascript which will then search for the HTML of the buttons and turn them into Facebook buttons. You can also load the button by calling the Javascript method. There are multiple ways you can add the HTML for the Facebook button, below is just one of the ways you can add the HTML for the Facebook button.
<div class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90"></div>
With the HTML on the page you can now load in the Javascript, when you do this it will search for the HTML and turn this into the Facebook button. Below is how you can use the $.getScript() method to load in the Facebook Javascript, the second parameter to the $.getScript() method is the callback function which is ran once the script is loaded. Inside this function we can instantiate the Facebook object, this will then turn the HTML into a Facebook button.
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
If the Javascript is already loaded on the page and we create new HTML elements which aren't affected by the FB object then we need a way of loading the object again to turn the HTML into Facebook buttons. When we load in the Facebook Javascript it will create an object called FB. We can then check if this object exists and if it does already exist then we can recall the init() method which will reload the Facebook buttons.
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
}
By using these two methods we can create a function to call each time we want to reload the Facebook buttons. Using this method means it doesn't matter if the Javascript is loaded or not the function will check and reload the buttons again for you. This first checks to see if the FB object exists if it does then it will simple re-run the init() method, else it will load in the Javascript and call the init() method on the FB object.
function loadFacebook()
{
if (typeof (FB) != 'undefined') {
FB.init({ status: true, cookie: true, xfbml: true });
} else {
$.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1", function () {
FB.init({ status: true, cookie: true, xfbml: true });
});
}
}
Google Plus Button
The Google Plus button also works in the same way as the others, there is HTML to add on to identify which ones are buttons, there is Javascript you can use to load into the page and a method on the Google API object to render the buttons again. Below is the HTML that you need to use for the Google plus button, the important attribute to include is the * *class="g-plusone"**, this is what we will use to class the render method on the Google API.
<div class="g-plusone" data-annotation="inline" data-size="medium" data-width="120"></div>
If the HTML is on the page then we can call in the Google plus Javascript, when this is loaded it will check for the HTML button on the page, if they are found then it will turn these into Google plus buttons.
$.getScript('https://apis.google.com/js/plusone.js');
Like the other buttons we could have the problem of the Javascript already loaded on the page and then we insert the HTML, the Google API will then not turn this into a Google Plus button without calling the method to render the buttons again. When the Google plus Javascript is loaded on the page it will create an object of gapi, which has a method on it called render() which will allow you to pass in an element to render as the Google plus button. This means that we can now search for all elements with the class of g-plusone and pass these into the render method, this will then reset all these elements into Google plus buttons.
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
Using these two methods we can create a function just for Google plus, which will check to see if the gapi object is set, if it is then we can run the render() method on the gapi object which will search for the Google plus class on the HTML and pass this element into the render() method. If the gapi object doesn't exist then we need to load in the Google plus Javascript file by using the $.getScript() method.
function loadGooglePlus()
{
if (typeof (gapi) != 'undefined') {
$(".g-plusone").each(function () {
gapi.plusone.render($(this).get(0));
});
} else {
$.getScript('https://apis.google.com/js/plusone.js');
}
}
LinkedIn Button
Just like the other buttons the LinkedIn social button can be rendered by loading in the Javascript file or by using a single render method. The difference with the LinkedIn button is that it doesn't use a standard HTML tag but will use a Javascript tag in the place where the button will appear.
<script type="IN/Share" data-counter="right"></script>
When this is on the page then we can add the LinkedIn Javascript file which will create the LinkedIn API object IN, when this is loaded it will search for the LinkedIn share button tag and turn this into a LinkedIn button.
$.getScript("http://platform.linkedin.com/in.js");
If the Javascript is already loaded and we want to add a new LinkedIn button to the page then we can use the IN object to call the parse() method, which will turn all the LinkedIn script tags into LinkedIn buttons.
if (typeof (IN) != 'undefined') {
IN.parse();
}
From these two methods we can create a function that we can call which will check to see if the LinkedIn object is set, if it is already set then we can call the parse() method to render the LinkedIn buttons again. If the object isn't set yet then we can load in the Javascript needed by using the $.getScript() method. Once this is loaded it will create the IN object that will automatically render the LinkedIn buttons.
function loadLinkedIn()
{
if (typeof (IN) != 'undefined') {
IN.parse();
} else {
$.getScript("http://platform.linkedin.com/in.js");
}
}
Demo
In the demo there is a button at the top of screen this is the first time that you load in the Javascript, which will automatically load in all the Javascript files needed and display the buttons. This will create HTML on the page for the other individual buttons, now when you click on these buttons the Javascript is already loaded so will run the methods to render all the buttons again.