How to create “channel.html” file for Facebook SDK

Question

In its document, Facebook recommend using a channel file for its JavaScript SDK. My question concerns a small detail about how to create this file. It is clear I must create and HTML file with the line <script src="//connect.facebook.net/en_US/all.js"></script>

But then Facebook recommend caching this file as long as possible and offers a PHP script to do it. My question is: where should I put this script? In the same channel.html file which I will place in the root of my website installation (a self-hosted Wordpress blog).

Thanks!

P.

Answer 1

Channel file is supposed to have only the code as you've already mentioned

<script src="//connect.facebook.net/en_US/all.js"></script>

You can put caching code anywhere and most probably it is put in the index file.

Answer 2

I would just like to highlight a couple of points that I think have been overlooked in this particular Q&A:

(1) In my opinion, I'd say that the "channel.html" code snippet that is recommended by Facebook needs to be a separate file – the snippet cannot just be put into an index file, as recommended by harry (by which I'm assuming he means an home page, or other generic content page of a website).

If you look at the URL that the SCRIPT element's src attribute points to, it is the exact same script that is called asynchronously in the JS-SDK code:

connect.facebook.net/en_US/all.js

Therefore, placing another SCRIPT element pointing to this file into the index page (or any other page) is just making a completely wasteful and redundant HTTP request. The whole point of there being an individual file, i.e. "channel.html", is a way for Facebook to work around cross-domain scripting (XSS) issues. This concept is explained in much more detail and with better understanding than I have in the Stack Overflow article, "Why do we need to create a channel.html on our server to use Facebook JS SDK?"

(2.) It is worth noting that, if you do decide to use the PHP snippet within the "channel.html" file, you have two options which are not really made clear on the Facebook documentation:

(a) You can save the file with a PHP extension, e.g. "channel.php", and update the variable in the JavaScript, like so: channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.php'

(b) You can keep the file-name "channel.html" and configure the server to allow '.html' files to be processed as PHP.

I'm also assuming that the file can be called anything, and stored anywhere on your web server, as long as it's URL is provided in the channelURL value.

Answer 3

You can create a channel.php instead of channel.html and put following code in it.

<?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>