Add A Facebook Connect Comments Box to Your WordPress Site | Facebook Comments into Arthemia

This guide explains how to insert a FaceBook comments section onto your WordPress Site. The guide puts a little more emphasis on users of the Arthemia theme, but also explains things for the general WordPress user.

Get your Facebook Connect API Key
  • Head over to http://facebook.com/developers
  • Click the Set Up New Application button
  • Type in a name (maybe YOURSITE-comments), check off Agree, and hit Create Application
  • Copy the API Key to somewhere you can remember it (we will need to use it later)
  • On the Basic setup screen that it takes you to, scroll to the bottom of the page, set the Help URL, Privacy URL and Terms of Service URl all to the homepage of your website. Save your changes.
  • Select the Canvas link in the top left and set the Canvas Callback URL to your site’s homepage, but MAKE SURE to put a / at the end of the URL (i.e. http://firstsearchblue.com/) Save your changes.
  • Select the Connect link in the top left and set the Connect URL to your site’s homepage AGAIN MAKE SURE to put a / at the end (i.e. http://firstsearchblue.com/) Save your changes.
  • Click the Widgets link in the top left and (if you wish) set Allow Anonymous Comments to No (this will force users to be logged into their Facebook accounts before they can post comments) Save your changes.
Setting Things up on Your Site
  • Download this cross-domain receiver file (right click -> save target as) and upload it to your website (just use an ftp client to drop this file into a know location on your webserver – you must be able to access this file from the web).
  • We recommend that you just upload this file to the main folder of your site, so that you can access it from http://www.YOURDOMAIN.COM/xd_receiver.htm
  • Go into your WordPress backend/dashboard
    • Select Appearance (on the left side)
    • Select Editor
    • Select Header (on the right side)
    • near the top you should see a line that begins: <html xmlns=”http://www.w3.org/1999/xhtml” or something quite similar. Right after the xmlns=”http://www.w3.org/1999/xhtml” part, paste in the following bit of code: xmlns:fb=”http://www.facebook.com/2008/fbml”
    • That line should now look something like this: <html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” …. (there will probably be a bunch more code here)
    • There is one more thing we need to add to this Header file, scroll down to the line that reads: </head>
    • On the line just above this, paste the following block of code: <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”, “http://YOURSITENAME.COM/xd_receiver.htm”);
    • </script>
    • Scroll to the bottom of the page and hit Update File
    • Your site now supports Facebook comments, now you just have to tell it where you want the comments box to go
    • Select the Comments link on the right (comments.php)
    • Scroll down and near the bottom find the line that begins: <p>You can use these tags
    • Immediately under that line, paste the following bit of code: <fb:comments></fb:comments>
      • Note: Wherever you paste that bit of code on your site, a comments box will show up
    • Scroll to the bottom and hit Update File
You should now have a Facebook Comments box at the bottom of all of your posts
Here is an example of what your Header and Comments files should look like if you are using Arthethia (if you are using a different theme, things should still be fairly similar)
Header:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xmlns:fb=”http://www.facebook.com/2008/fbml” <?php language_attributes(); ?>>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<link rel=”icon” href=”<?php echo get_option(‘home’); ?>/wp-content/themes/arthemia/images/favicon.ico” />
<link rel=”shortcut icon” href=”<?php echo get_option(‘home’); ?>/wp-content/themes/arthemia/images/favicon.ico” />
<?php wp_head(); ?>
<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”, “http://YOURSITE.COM/xd_receiver.htm”);
</script>
</head>
<body>
…
…
…
Comments:
…
…
…
<?php endif; ?>
<p><textarea name=”comment” id=”comment” cols=”100%” rows=”15″ tabindex=”4″></textarea></p>
<p>You can use these tags:<br/><code><?php echo allowed_tags(); ?></code></p>
<fb:comments></fb:comments>
<p><input name=”submit” class=”searchbutton” type=”submit” id=”submit” tabindex=”5″ value=”Submit Comment” />
<input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” />
</p>
<?php do_action(‘comment_form’, $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php endif; ?>

Precisions Resistors Find precisions resistors and other products for your OEM business that meet all RoHS guidelines.

Printed Circuit Boards
We specialize in
manufacturing Quickturn Printed Circuit Boards for businesses looking for high
quality boards at competitive prices.