Friday, 8 July 2011

How to Add Facebook Social Comment Box on any Website or WordPress

Facebook Social Plugins are a set of plugins that enables social interactions on your website. Not to mention the huge user base Facebook has developed along the time. Previously, it was a pretty much a hassle to go through the Facebook connect implementation for a website. Now with Facebook Social Plugins things are much more simpler to implement and use. Lets take a look how easily we can implement a Facebook Social Comment box for virtually any website that allows HTML and Javascript.

Here are the steps:

  1. Create a Facebook Application for your website. This step is required and all the fields must be filled up.

    Site name : Your Site Name
    Site URL: http://somewebsite.com/
    Locale: English (or your preferred language)
  2. Now you need to fill up a Captcha to confirm creation of the Facebook Application for your site.
  3. Once you click Submit on step 2, you would be able to see the confirmation page with your Application ID and Application Secret. You can modify your existing Applications at My Apps page.
  4. Now go  to Facebook Social Comments site. Fill up the URL where you want to put your comment box to. Enter the number of Default comments to be shown and finally enter the width of the comments box.

    NOTE: The URL can be a single HTML or Dynamic page too (eg. http://somewhere.com/test.html).
  5. Once you are done with step 4, you can click the Get Code button to get/copy the necessary codes for your site.
    facebook comments code
    .
  6. Create a empty HTML file on your website (eg. index.html). Then paste the code in between <body> and </body> section of the HTML file. Save the file and upload to your server.

    NOTE: Your Website APP ID is pasted inside the meta property for facebook underneath the <head> tags.
  7. Open the file you have just created using your browser, you should be able to start posting comments on that page. Yes that’s about it.

I must also say this is just a simple implementation of Facebook Social Comment at your website. There might be more options available for you to implement if you go through the documentation.

How to Implement the Comments Box on WordPress:

  1. Follow the Procedures mentioned on the previous steps and after then
  2. Look for the file comments.php inside your themes folder (the name of the theme depends on which WordPress theme you are using)
  3. Open and edit the file using a text editor. Modify the code you have found on the previous implementation (Which is for using it on a standard website) as below.

    NOTE: You need to change the part href=”<?php echo get_permalink($post->ID); ?>”
  4. Paste the code into upper part of your comments.php file. Save and Upload it back to your server.
  5. You should be able to see the Facebook Dynamic Comments for all your WordPress posts.
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)