Current time: 12-18-2017, 01:20 PM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Facebook's "like" button
06-25-2010, 04:57 AM
Post: #1
Facebook's "like" button
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...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 Code:
<iframe src="http://www.facebook.com/plugins/like.php?href=SITEURL&amp;layout=standard&amp;show_faces=true&amp;width=350&amp;action=like&amp;font=arial&amp;colorscheme=dark&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:80px;" allowTransparency="true"></iframe
Find all posts by this user
Quote this message in a reply
06-25-2010, 05:18 AM
Post: #2
RE: Facebook's "like" button
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
Find all posts by this user
Quote this message in a reply
06-25-2010, 06:50 AM (This post was last modified: 06-25-2010 07:34 AM by jarrod1937.)
Post: #3
RE: Facebook's "like" button
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...1/details/
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 Code:
<script id="deferloading"></script>
<
script type="text/javascript">
window.onload=function(){
document.getElementById("deferloading").src="http://example.com/share.js";
}
</
script

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 Code:
<script id="deferloading"></script>
<
script type="text/javascript">
document.getElementById("deferloading").src="http://example.com/share.js";
</
script

But i am not sure why the event would cause it to not load at all. Any ideas?
Find all posts by this user
Quote this message in a reply
06-25-2010, 07:54 AM
Post: #4
RE: Facebook's "like" button
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:

Code:
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:
http://simonwillison.net/2004/May/26/addLoadEvent/

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

Code:
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=='l​oaded')
        {
            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
Find all posts by this user
Quote this message in a reply
06-25-2010, 07:58 AM
Post: #5
RE: Facebook's "like" button
Excellent, thanks, will check those out tomorrow.
Find all posts by this user
Quote this message in a reply
06-25-2010, 05:00 PM (This post was last modified: 06-25-2010 05:26 PM by green-watch.org.)
Post: #6
RE: Facebook's "like" button
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?

Code:
<iframe src="http://www.facebook.com/plugins/like.php?href=http://www.green-watch.org&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;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
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.
Find all posts by this user
Quote this message in a reply
06-26-2010, 12:37 AM (This post was last modified: 06-26-2010 12:38 AM by jarrod1937.)
Post: #7
RE: Facebook's "like" button
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.
Find all posts by this user
Quote this message in a reply
06-26-2010, 02:35 PM
Post: #8
RE: Facebook's "like" button
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.
Find all posts by this user
Quote this message in a reply
06-26-2010, 04:03 PM
Post: #9
RE: Facebook's "like" button
Anybody that wants the like button to go faster should respond to my post located here:

http://forum.developers.facebook.com/vie...pid=240365

I hope they take this into consideration.
Find all posts by this user
Quote this message in a reply
06-29-2010, 05:41 AM
Post: #10
RE: Facebook's "like" button
i use this function to defer actions http://gist.github.com/412004

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

cdnplanet.com: We help you select the right CDN
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)