Home/ Questions/Q 7129847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:17:12+00:00

Does anyone know when the ChannelUrl parameter, passed to FB.init, is actually used by

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0