Facebook Connect and Disqus CommentsFacebook Connect and Disqus Comments

Posted June 8th, 2010 in Javascript

I currently use Disqus for using comments on this blog. Disqus allows a number of ways for users to log in when placing comments such as with Facebook Connect, Twitter, OpenID and Yahoo. A little while ago I posted how a change seemed to have happened with Facebook which meant all pages were being loaded multiple times with ?fbc_channel=1 at the end of the URL which was inflating pageviews (and some commenters reported it crashing some visitor's browsers). This post looks at the reason for the issue and the solution. Note that this is a repost of yesterday's post after revising it thanks again to bobgrigoryan.

Thanks to "bobgrigoryan"

I would like to thank "bobgrigoryan" who helped to point me in the direction of the solution.

Cross Domain Communication

The reason you will see things like this in your log files:

"GET /jquery-facebox-dialog-modal/?fbc_channel=1 HTTP/1.1" 200 4934 "http://www.facebook.com/extern/login_status.php?api_key=be1f22f8362a10576891f6e052db81ed&extern=2&channel=http%3A%2F%2F www.electrictoolbox.com%2Fjquery-facebox-dialog-modal%2F%3Ffbc_channel%3D1&public_session_data=1&locale=en_US"

is because of the cross domain communication that Facebook does with Javascript. More information about this can be found at the following places:

The Solution for Disqus

The solution for this issue when using Disqus is to create a cross domain receiver file and then point to the location with Javascript at some point before you include the Disqus Javascript.

Create a file called xd_receiver.htm in your wbesite's root directory (it can actually be called anything and at any path but for the purposes of this tutorial we'll use the defaults). It should contain this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

You can also download the file here.

Now add the following piece of Javascript at some point before you include the Disqus comments Javascript:

<script type="text/javascript">
    var facebookXdReceiverPath = '/xd_receiver.htm'
</script>

If you named the cross domain receiver file differently from what's listed above, then change /xd_receiver.htm to the full path and filename of the file.

That's it - all done. Now see my comment at the end about log files and analytics.

Not using Disqus? Then do this

The last link above contains what is needed to get it working correctly and I summarise the most important bits below. Although the rest of this post talks about the issue being with Disqus, it is actually an issue with the way cross domain communication is handled and effectively with FB Connect. This solution should work for any implementation using FB Connect (although I haven't tested it myself).

Note again that all this information comes from here: Facebook Developers: Connect/Setting up your site and I've just included the most important bits here. Read that page for full details.

Create a file called xd_receiver.htm in your wbesite's root directory (it can actually be called anything and at any path but for the purposes of this tutorial we'll use the defaults). It should contain this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
</body>
</html>

You can also download the file here.

Add this to your website template somewhere after the opening <body> tag (not in the <head>) and before your Facebook Connect stuff:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
    FB.init("YOUR API KEY HERE", "/xd_receiver.htm");
</script>

Replace "YOUR API KEY HERE" with your actual API key, e.g.:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
    FB.init("be1f22f8362a10576891f6e052db81ed", "/xd_receiver.htm");
</script>

That's it, all done.

Log files and analytics

Now you will see additional requests in your log files for the xd_receiver.htm file which will mess with any analytics you do from log files, but not with Javascript based services such as Google Analytics.

If using analytics from log files, you could either exclude that URL from being analyzed (if your analytics software allows this) or give it a different filename extension so it's not assumed to be an HTML file. Then change the /xd_receiver.htm value in the Javascript above to that filename.

Related posts:

Comments

blog comments powered by Disqus