Click here to Skip to main content
Click here to Skip to main content

Adding the Facebook Like Button to a Website

, 6 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
Delay load Facebook Like button to make a web page loads faster and more responsive

Introduction

One notorious problem of adding social buttons, such as the Facebook Like button, to a website is that they can significantly slow down loading your web page. Though by using asynchronous load technique this problem has been solved somewhat, the page load time and responsiveness is still a big issue, especially when there are multiple social network buttons on a page.

When we add these buttons to our email marketing software promotion page, we find it adds several seconds to the page load time. In Internet time, several seconds feels like forever. 

Background 

When the Facebook Like button is load asynchronously or load after a page is loaded, the responsiveness of the page still suffers. This is because the browser has to make a trip to the Facebook website, query it for statistical info like total likes,  and then render the button with these information.

If you do want the Facebook like on your website, somewhere, sometime, the button has to be rendered. The only question is when. The technique presented here is to load the button on mouse over event, but it should be easily adapted to accommodate other situations. 

The technique we used is to delay the actual loading of the button by using JavaScript. The Facebook Like button is simply loaded as an image at first, which avoids querying the Facebook site during page load; only when a customer puts his mouse on the button, the actual load and rendering of the button is performed. 

The following sections explain in detail how to add the Facebook Like button to a website. For other social buttons, we'll present the technique in different articles. 

Get Your Facebook Like Button 

If you have not done so, follow this link to get your own Facebook like button. There different versions of the Like button, one use Facebook JavaScript SDK and the other uses iFrame. Here we choose the iframe version since this avoids loading the JavaScript SDK on the current page. The source code for the iFrame version of Voicent's Facebook Like button is shown below:

<iframe src="file://www.facebook.com/plugins/like.php?href=...></iframe> 

When you put this code in your web page, it will show a Facebook Like button with the counter on the right.

Delay Loading The Facebook Like Button

If you tried to put the Like button on your own page, you will notice the page load and responsiveness will suffer. As we explained before, in order to render the Facebook Like button above, your browser has to make a trip to the Facebook website. The embedded iFrame code needs to query how many people has liked the item, and who is the current Facebook user, and then display the details on the button's right. 

Some website delay the iFrame load after the current page is completely loaded. We go a step further by delaying the load until a mouse is moved over the button. This will make the page more responsive as early as possible.

In place of the iFrame, replace it with a simple img tag with onMouseOver defined as follows:

<div id="fblikediv">
   <img src="/images/fb-like-button.png"
        id="fblikeimg" 
        onMouseOver="return renderFbLike();">
</div>

The renderFbLike() JavaScript is shown below. The first three lines simply remove the Facebook Like button image. The next one instantiates the iFrame, which in turn loads the button.

function renderFbLike() {
        var parent = document.getElementById('fblikediv');
    var child = document.getElementById('fblikeimg');
    parent.removeChild(child);
        
    var html = "<iframe src=...></iframe>";
        document.getElementById('fblikediv').innerHTML = html;
}

Since we cannot add the JavaScript on this CodeProject page, we'll not be able to show you how the button really behaves. But you can go to our test page and give it a test.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Voicent Support
Web Developer Voicent Communications, Inc
United States United States
Voicent provides easy-to-use call center software such as predictive dialer, IVR, IP PBX for businesses and organizations. We are Windows developers and love Codeproject.

Comments and Discussions

 
QuestionFacebook Business Page PinmemberChristopher Lee6-Jul-14 13:51 
Questionsimple copy code from facebook and paste your website Pingroupganesh rohidas shingate23-Jun-14 7:00 
QuestionAlternative PinmemberMember 976431517-Jan-13 3:10 
SuggestionNo, I am not a troll. Pinmemberii_noname_ii26-Mar-12 3:38 
GeneralRe: No, I am not a troll. PinmemberTariq Newaz Shahriar28-Jun-12 2:37 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.141015.1 | Last Updated 6 Sep 2012
Article Copyright 2012 by Voicent Support
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid