Add A Facebook Connect Comments Box to Your WordPress Site | Facebook Comments into Arthemia
25 February 2010
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.
- 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.
- 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”
- FB.init(“YOUR API KEY”, “http://YOURSITENAME.COM/xd_receiver.htm”);
- 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
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.