Facebook's "like" button

Web Performance Optimization Discussions
1

I figured i’d give facebook’s like button a try. Integration wasn’t too bad at all… but as soon as i put it to the performance test it kind of disappointed:
http://www.webpagetest.org/result/100624_8b41ec471be27f7cce25e194d535cd32/1/details/

On average it raises the total page load time by 450 ms. Does anyone have any tricks to have its load deferred until the entire page is loaded and rendered using something like javascript? Here is the code it uses:

[php][/php]

2

Greetings Jarrod,

I know something you could try.

First, give your iframe an ID and leave the SRC blank for now.

Wait for the body onload event and then use the “getElementById” JavaScript method to get the ID of the iframe and then input that url as the src value.

I use this method for my phone directory that uses an IFrame to upload the results.

Hope this helps. I have been planning to add the Facebook like button to my website as well.

Sincerely,
Travis Walters

3

Yep that worked perfectly. Times are now back to around 1.70-1.80 seconds. Thanks for the help!
Although i used window.onload so it wouldn’t interfere with any of the site loading, worked perfectly:
http://www.webpagetest.org/result/100624_c4edc3fa4ec6145673ca490c5fdf530f/1/details/[hr]
Actually i may need your help one more time. I am also attempting to defer a .js file until after the page is loaded. At first i tried appending a script to the DOM but found that it didn’t place it where i needed it (a button is placed wherever the .js file is loaded). So i figured i’d try the same method you suggested above:

[PHP]

[/PHP]

But for whatever reason that does not work, it doesn’t even attempt to download the .js file. However if i remove the onload event it works:

[PHP]

[/PHP]

But i am not sure why the event would cause it to not load at all. Any ideas?

4

Hey There,

I do not use that same method to defer JavaScript.

However, here are a few things you can try to do.

#1 - The first thing that comes to mind is perhaps you are assigning window.onload a function in different locations. If you do this, your previous function may get overwritten. To overcome this, I have altered a function that is commonly found on the internet:

var bodyHasLoaded=0;

function addLoadEvent(func)
{
	if(bodyHasLoaded==1)
	{ 
		func();
	}
	else
	{ 
		var oldonload=window.onload;

		if (typeof window.onload!='function')
		{
			window.onload=func;
		}
		else
		{
			window.onload=function()
			{
				if(oldonload)
				{
					oldonload();
				}
				
				func();
			};
		}
	}
}

In each of my window.onload functions I set bodyHasLoaded=1. This way if an addLoadEvent call occurs after the body has loaded, it will fire right away. Otherwise, it will wait until the onload event occurs.

The original JavaScript function can be found here:

#2 - You could also download the JavaScript file asynchronously. Here is a little bit of code out of my common library you can use:

var protoaculousHasLoaded=0;
var myDirectory2="http://cdn.green-watch.org";

function GetXmlHttpObject(handler)
{
	var objXMLHttp=null;
	
	if(window.XMLHttpRequest)
	{	
		objXMLHttp=new XMLHttpRequest()
	}
	else if(window.ActiveXObject)
	{
		objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	return objXMLHttp;
}

function importProtoaculousJS(onLoadFunction)
{
	var headID=document.getElementsByTagName("head")[0];
	var protoaculousNode=document.createElement('script');
	protoaculousNode.type='text/javascript';
	
	protoaculousNode.onload=function()
	{
		protoaculousHasLoaded=1;
		
		if(onLoadFunction!='null')
		{
			onLoadFunction();
		}
	};
	
	protoaculousNode.onreadystatechange=function()
	{
		if(protoaculousNode.readyState=='complete'||protoaculousNode.readyState=='loaded')
		{
			protoaculousHasLoaded=1;
			
			if(onLoadFunction!='null')
			{
				onLoadFunction();
			}
		}
	};
	
	protoaculousNode.src=myDirectory2 +'/javascript/protoaculous.cfm';
	headID.appendChild(protoaculousNode);
}

Just make sure you set your paths correctly. Hope this helps.

Sincerely,
Travis Walters

5

Excellent, thanks, will check those out tomorrow.

6

Hey There,

Do you know if there is a way to create your own facebook like button instead of relying on their iframe embed code?

<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.green-watch.org&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px; margin-left:15px;" allowTransparency="yes"></iframe>

It would be nice if there was a way you can specify what button image would show up in the embedded page.

Sincerely,
Travis Walters[hr]
Update: It looks like they dont want the actual image modified.

http://www.facebook.com/brandpermissions/logos.php

I was going to have it like my other two buttons in my header.

Their usage terms sure are confusing.

7

They do offer a javascript version that may give you a bit more control, but it requires the facebook javascript API/library, which is just more bloat added to your page. You may be able to hack at their API and get it to load your own image… but as you pointed out it may be against their terms of service.

8

I am rather disappointed in Facebook’s like button.

It seems too slow for something that should be such a simple feature.

Hopefully, they will find a way to make it faster.

It would be such a great tool to drive traffic to a website.

9

Anybody that wants the like button to go faster should respond to my post located here:

http://forum.developers.facebook.com/viewtopic.php?pid=240365

I hope they take this into consideration.

10

i use this function to defer actions bagoftricks.js · GitHub

imho its not safe to use window.onload cause some other external script may mess with it…

11

I disagree with you about the window.onload comment.

Every great webmaster should know what is under the hood of their website.

If there is an external script that has to use window.onload they should use some sort of addLoadEvent function like the one I have above.

The only scripts I do not know exactly what is under the hood are the prototype.js and protoaculous.js files.

I plan on digging in those eventually and finding exactly which functions I need to run my website.

12

The reason I prefer the 412004’s gists · GitHub method is because I am making a webservice to be used on other sites as a javascript functions. I don’t want to use the window.onload (even with addLoadEvent ) cause most webmasters are not a “great webmaster”. They may have other shit on their page messing with window.onload . Moreover, some ad network may also cause problems (not the case for me cause on my site ads run in iframes).

Adding a dependency for jquery or prototype is overkill for the simple task I wanna acheive.

That said addLoadEvent is the best method to use if the website contains limited 3rd party scripts and the webmaster is skilled in javascript.

13

I installed Mozilla Firefox in F drive. Due to virus problem I formatted my C drive.Then i can’t find Mozilla firefox. So I installed Mozilla again. After that i can’t find my Bookmarks in the newly installed one. Now how to get my bookmarks again? Still am having that Mozilla in program files in F drive.
How To Unlock iPhone
Unlock iphone
Unlock iPhone 3GS
Unlock iPhone 3G
Can You Unlock iPhone
iPhone Unlock