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.

  • Good dispatch and this enter helped me alot in my college assignement. Thank you as your information.

  • hi there, great web-site
    just how to make blog posts that smash in your readers:
    http://tinyurl.com/yhmovw8

  • Thanks for the great article, finally I have add fb comment box to my website 😀

  • oh,my god ! there are a lot of beautiful blog. I like reading article ! I will always come here.

  • livereceptions

    back link is very important for the seo, I maually add back link day by da, someone buy back links, it cost monthly, add back link is long time job, but you will benefit from that if you are keeping on do it. visit my site, for more information.

  • thanks dude … it's working 100% i love you man …. you make it really work i try 100 times before now but all of theme never wors ..only you mann … you save the day for me
    thanks again

  • thanks

  • Great information that is hidden for the most part – Thanks

  • jitachi

    thanks

  • sell iphone

    Thanks for the information. Is there any other way how to apply this app? Backlink is very important for this article. Thanks for sharing this one to us.

  • Buybackworld

    Many of my friends tried the procedure. Some was able to set up successfully and others are not. Some are requesting for a simple instruction. This is really a very helpful post.

  • deneme

  • deneme

  • thanks

  • Contact

    Hi, I was wondering if you would be willing to share your ‘disqus’ comment box code (if it is further customized with CSS)? If yes, can you tell me how will I change the code if I want the date and time (‘absolute’ comment time)? Thanks. You can email: contact@envimatix.com

  • Amenamenamen

    amen

  • is there any other easier way?

  • Rabun345