I have added the facebook like button to my website. There's a delay when the jscript below is loaded, and the rest of the page doesn't load until it's done. Also, if I block facebook with my firewall there's a very long delay before it gives up, and THEN the rest of my page is displayed. How do I get my page displayed first, and then that like button? (I did that to see what would happen if facebook was having a problem.) Also, when I load different pages the facebook like button keeps reloading (it's visibly absent until reloaded - 1/3 second.) The button is in the same place on every page, in a banner on top. The other images don't reload - they are cached - and they appear static when selecting a different page. Is there a way I can make that script be cached?

Here's the code:

<div style="position: absolute; top:20px; right:85px; width:70px; height:25px">
    <script type="text/javascript" src=".js#xfbml=1"></script>
    <fb:like href="" layout="box_count" show_faces="false" width="50"></fb:like>
</div>

Thanks

UPDATE: I found this code for loading all.js asynchronously:

"Another way is to load asynchronously so it does not block loading other elements of your page: "

<div id="fb-root"></div><script>window.fbAsyncInit = function() {  
FB.init({appId: 'your app id', status: true, cookie: true,  
xfbml: true});  
};  
(function() {  
var e = document.createElement('script'); e.async = true;  
e.src = document.location.protocol +  
'//connect.facebook/en_US/all.js';  
document.getElementById('fb-root').appendChild(e);  
}());  
</script>  

But what is "your app id?" That code is from here /?p=180

I have added the facebook like button to my website. There's a delay when the jscript below is loaded, and the rest of the page doesn't load until it's done. Also, if I block facebook with my firewall there's a very long delay before it gives up, and THEN the rest of my page is displayed. How do I get my page displayed first, and then that like button? (I did that to see what would happen if facebook was having a problem.) Also, when I load different pages the facebook like button keeps reloading (it's visibly absent until reloaded - 1/3 second.) The button is in the same place on every page, in a banner on top. The other images don't reload - they are cached - and they appear static when selecting a different page. Is there a way I can make that script be cached?

Here's the code:

<div style="position: absolute; top:20px; right:85px; width:70px; height:25px">
    <script type="text/javascript" src="http://connect.facebook/en_US/all.js#xfbml=1"></script>
    <fb:like href="http://www.facebook./pages/somepage/somenum" layout="box_count" show_faces="false" width="50"></fb:like>
</div>

Thanks

UPDATE: I found this code for loading all.js asynchronously:

"Another way is to load asynchronously so it does not block loading other elements of your page: "

<div id="fb-root"></div><script>window.fbAsyncInit = function() {  
FB.init({appId: 'your app id', status: true, cookie: true,  
xfbml: true});  
};  
(function() {  
var e = document.createElement('script'); e.async = true;  
e.src = document.location.protocol +  
'//connect.facebook/en_US/all.js';  
document.getElementById('fb-root').appendChild(e);  
}());  
</script>  

But what is "your app id?" That code is from here http://www.mohammedarif./?p=180

• caching
• facebook
• javascript

Share Improve this question Follow edited Feb 4, 2011 at 16:30 harold asked Feb 3, 2011 at 3:16 haroldharold 4311 silver badge66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

The elements load happens from the top to bottom in the code. If a very large resource is loaded on top of the code, it will delay loading total. If you want to show your page before, put this button at the end of the code.

You can load asynchronously as I described in the update to the question. You get an app id from "create application" on facebook. (Google it...)

Harold, you got the code from my website, thanks to see it again here :)

You have asked 2 things, one is FB App ID and the other is JavaScript Caching.

Hope, you already would got the way to get the App ID, let's talk about the next point.

Setting an expiry date or a maximum age in the HTTP headers for static resources (JavaScript/CSS) instructs the browser to load previously downloaded resources from local disk rather than over the network.

In the .htaccess file

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000

You can get more tips related to website performance tuning at http://developer.yahoo./performance/rules.html

Hope it helps