Does anyone know when the ChannelUrl parameter, passed to FB.init, is actually used by the fb js sdk? I can see it getting hit in our nginx log files and it appears to be from IE8 users, but I cant seem to manually recreate it. I have a Fan Page iframe app, with like buttons and the comment plugins.
you can see this post. it is well explained.
https://developers.facebook.com/blog/post/2011/08/02/how-to--optimize-social-plugin-performance/
this post link may update in future. so I'm copy-paste-ing the whole post from the FB developer blog with giving the full credit to the author.
How-To: Optimize Social Plugin Performance
by Ankur Pansari - August 3, 2011 at 12:00am
Millions of websites use XFBML to render social plugins. We wanted to share some best practices that can improve the performance of these on your websites. Specifically, we offer custom channelUrl and asynchronous loading which, when used, will improve load times and reduce other issues such as double-counting of referral traffic from Facebook.
The custom channel URL is an optional parameter in the FB.init function called channelUrl. When you initialize the JavaScript library, add the channelUrl parameter in the FB.init function:
<div id="fb-root"></div>
<script src="//connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>
The channelUrl points to a file that you add to your local directory which helps improve communication speed in some older browsers. Without the channelUrl, we are forced to use workarounds such as loading a second copy of the webpage in a hidden iframe to properly load social plugins. The workarounds increase load times and inflate referral traffic from Facebook.
To create a channel.html file, add the following line to the file (located at http://www.yourdomain.com/channel.html):
<script src="//connect.facebook.net/en_US/all.js"></script>
If you have the ability to run PHP, we strongly advise setting a long cache for the channelUrl file to ensure optimal performance. Here is a sample PHP script that accomplishes this:
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/en_US/all.js"></script>
In this case, you should also set the channelUrl file to the fully qualified URL such as http://www.yourdomain.com/channel.php.
In our testing, adding a custom channelUrl improves the performance in Internet Explorer and therefore its inclusion is advised for all of our developers. Internet Explorer yields statistically significant performance gains when including the parameter, where the load time of a test website with 5 XFBML plugins improves from 1.10 seconds to 0.43 seconds.
Asynchronous loading is another simple tactic that allows your page to load quickly without blocking the loading of other elements of your page. Upon successful loading of the JS SDK, we call the window.fbAsyncInit function. All front-end functions that depend on Facebook API calls should be separated and called via window.fbAsyncInit. This ensures that the Facebook features are loaded in a non-blocking fashion and will speed up its rendering, which has positive SEO benefits. When designing your social features, you should approach it with this mentality to start.
For example:
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>
We’ve updated our documentation to reflect the importance of these options and changed the default sample code to include a channelUrl. We are continuing to update our docs as part of Operation Developer Love as well as share more best practices via “How-To” blog posts.
Related
I am loading the Facebook javascript sdk into my page using the following code:-
(function() {
console.log('Hello World! From self executing function.');
var e = document.createElement('script');
e.async = true;
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
console.log('javascript sdk is appended into the fb-root element of the page.');
}());
It is getting loaded properly but I am getting the following error in my console:-
Error: Permission denied to access property 'toString'
[Break On This Error]
...5(i(ca.getElementsByTagName('*')),'forEach',true,function(ka){if(!ea&&ka.getAttr...
How to fix this?
Any help will be thankfully recieved ?
Facebook javascript SDK normally causes cross browser issues. For resolving this issue, facebook itself had integrated a method, i.e. by adding a channel url during FB.init() function.
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : 'YOUR_APP_ID', // App ID from the App Dashboard
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File for x-domain communication
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow your server to access the session?
xfbml : true // parse XFBML tags on this page?
});
// Additional initialization code such as adding Event Listeners goes here
};
Adding a channel file resolves the cross browser issues.
The contents of the channel.html file should be just a single line:
<script src="//connect.facebook.net/en_US/all.js"></script>
The channelUrl parameter within FB.init() is optional, but strongly recommended. Providing a channel file can help address three specific known issues.
Pages that include code to communicate across frames may cause Social
Plugins to show up as blank without a channelUrl.
If no channelUrl is provided and a page includes auto-playing audio
or video, the user may hear two streams of audio because the page has
been loaded a second time in the background for cross domain
communication.
A channel file will prevent inclusion of extra hits in your
server-side logs. If you do not specify a channelUrl, you should
remove page views containing fb_xd_bust or fb_xd_fragment parameters
from your logs to ensure proper counts.
The channelUrl must be a fully qualified URL matching the page on which you include the SDK. In other words, the channel file domain must include www if your site is served using www, and if you modify document.domain on your page you must make the same document.domain change in the channel.html file as well.
https://developers.facebook.com/docs/reference/javascript/
I created social feeds functions(sending msg to friends and posting on own wall) using javascript SDK and graph API in Facebook 2-3 months ago for my apps. It was working perfectly when I created but now, when I visit my app and try to use them again, it no longer works. It's so strange since I never touched that code after I implemented them. I even tried to copy and pasting exact sample javascript code given in Facebook document and it didn't work either. Even after I re-write my code, it still doesn't work either. I have no idea what is wrong. Anyone face similar problem with javascript SDK? Thanks in advance.
Hi,
The code is here: Sorry for late reply.
<script src='http://connect.facebook.net/en_US/all.js'></script>
<script>
FB.init({
appId : 'id',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script>
function share_wall() {
// calling the API ...
var obj = {
method: 'feed',
link: 'https://apps.facebook.com/id/',
name: 'test',
description: 'blalala'
};
FB.ui(obj);
}
</script>
I realized I actually have the same problem as you =\ Go to your app settings and make the additional configuration under Basic Settings.
If your domain is http://inspiration.nyp.edu.sg
If you are working on localhost
"Symptoms"
Previously, your JavaScript SDK functions were working fine. Now, executing your JavaScript SDK functions prompts you either an API Error Code 191 or an error.
Your PHP SDK functions are working fine.
Your JavaScript SDK functions work fine when you run your application as App on Facebook, but does not when you run your application as a Page Tab.
(For my case, the last date I checked was 7 August 2012 and my JavaScript SDK functions were working fine. It was until 3 September 2012 when I checked them again, then I encountered the errors mentioned above.)
I highly recommend everyone to check their Page Tab application's JavaScript SDK functions such as feed dialog, apprequests and etc.
It became really annoying when discovered new bugs today.
Basicly what i'm trying to do is; showing a Facebook dialog box and getting needed permissions to app and run callback js function. But can not achieve this simple and the most important part of the app.
First, lets initialize it:
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.init({appId: '135814169854494', status: true, cookie: true, xfbml: true, oauth: true });
FB.ui({method: "permissions.request", "perms": 'publish_stream,user_about_me,email,user_birthday,user_likes'} , function(response) { console.log(response); });
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/<?=$__FBLocal?>/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Now Javascript popup displays but if you click Okay, Go to App button, it does not grant permissions or even popup does not go away. Nothing changes! weird
If you disable Enhanced Auth Dialog from Advanced Application Settings in Facebook Developers section,
PopUp Style changes:
When you click Allow button, a javascript error throws: FB.Auth.setSession incompatible with OAuth2.
It is really common bug. There are some tips to not to get this bug i could find but all of them is not working. ( Such as; remove any extensions to all.js url -which i don't have- or change oauth parameter in FB.init -does not solve anything anymore- )
So , the only workaround is -unfortunately- embeding the permissions dialog in to page by redirecting. If someone can achieve JS SDK permission dialog , please let me know. Really stuck with lack of documentation in Graph API pages.
First I would suggest creating another facebook application to get a new facebook ID and test with it. If it works, then something was corrupt within facebook's storagea of the original facebook application's data. If it doesn't work, then you have a reproducible bug which you can report to facebook via their bug tracking tool.
I'm pretty sure permissions.request is deprecated. Can you try using method: oauth instead of permissions.request? Also, the perms param needs to change to scope. See https://developers.facebook.com/docs/reference/dialogs/oauth/
See http://running.ph/
It just hangs chrome for a while, while all the buttons load. I've read using IFrame avoids this but I really want to use XFBML JS for all the extra functionality you get with it like tracking Likes, comments, and the send button.
Does anyone have a solution to this?
I'm sure I'm not the only site with 10+ Like buttons on it.
ah I found the answer by checking what Techcrunch / AOL does.
You load the XFBML as the user scrolls.
1.) Don't Parse XFBML on FB.init or the loading of the JS SDK
FB.init({
appId : APP_ID,
xfbml : false
});
2.) Load jQuery and jquery.sonar.js - this contains scroll and scrollout custom events
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js"></script>
3.) jQuery code to parse XFBML on scrollin event (stolen from Techcrunch)
jQuery(document).ready(function($) {
var $shareWidgets = $( '.share-widget' );
$shareWidgets.bind( 'scrollin', { distance: 500 }, function() {
var $share = $( this );
if (!$share.data( 'initFB' ) && window.FB) {
$share.data('initFB', 1);
$share.unbind( 'scrollin' );
FB.XFBML.parse( $share[0] );
}
});
});
4.) wrap your XFBML tags in a class called 'share-widget'
<span class="share-widget"><fb:like></fb:like></span>
and voila! no more dang XFBML slowing down your pages. Ofcourse this only helps when you have a lot of XFBML tags on your page. Which most blogs may have.
Thank you AOL!
See the SlideShare presentation of AOL using jQuery: http://www.slideshare.net/daveartz/jquery-in-the-aol-enterprise where they talk about this and other optimizations they use.
Sharrre loads your sharing buttons only when needed, you can use all like button features and it has built-in Google Analytics tracking.
I had problems with this, too.
It's Social network's API fault. If you look in Chrome to the NET tab, you'll see that there are 252 requests per page! (Facebook, g+, Twitter, your resources)
This is part of problem
loadScriptAsync('//connect.facebook.net/en_US/all.js');
it loads all scripts possible, maybe multiple times without caching. I think there's no chance to avoid this from your side
OT: Why do you require offline&SMS access when logging on your site? I think nobody wise would like to give you him/her phone number and/or offline access
Here a quick pure javascript snippet to aid with throttling of multiple like buttons:
https://stackoverflow.com/a/11002386/223002
My index.php file loads the Facebook JavaScript SDK and the FBJS bridge:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" src="FBJSBridge.js"></script>
It then inits the Facebook SDK:
<script type="text/javascript">
FB.init({
appId : '<?=$fbconfig['appid']?>',
session: <?php echo json_encode($session); ?>,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
And embeds the Flash file using swfobject:
swfobject.embedSWF("http://www.myserver.org/Facebook/app/app.swf", "holderDiv", "740", "616");
When I run this file on my server, I can communicate with Facebooks JavaScript SDK either indirectly through ExternalInterface calls, launching various Facebook UI dialogs etc. And I can also use the facebook-actionscript-api to launch the same dialogs directly from ActionScript.
When I however use this index file as my Facebook canvas url and load the swf in a Facebook iFrame, the communication crashes the application. I'm not sure how to debug this but I think it might have to do with crossdomain security. Any ideas on debugging and/or solutions are welcome.
The FBJSBridge.js has been replaced in the updated 1.5 of the API. It's now in the AS3 source.
It seems adding the parameter allowScriptAccess: "always" did the trick.
Strange this isn't mentioned in sample code applications ...
here u can find a tutorial with source coad ===
Communacation with Flash and javascript