Wednesday, September 1, 2010

Easy steps to Facebook Connect Comment Box

Facebook connect is getting popular day by day. Not to mention the huge user base Facebook has developed along the time. It was a pretty much a hassle to go through the Facebook connect implementation for a website. Very recently Facebook opened up a new dimension and easiness of implementing Facebook Connect to any website. Lets take a look how easily you can implement Facebook connect comment box to your site.

facebook connect comment box
Having said that, I must also say this is just a simple implementation of Facebook connect to your website. There are many more options available for you to implement if you go through the documentation. Lets take a look how easily we can implement a comment box for virtually any website that allows HTML and Javascript.

Here are the steps:

  1. Create your website application using the wizard:Go to Facebook Developers Wizard, create your website profile on step 1
    facebook application 001
    Provide a title for your website application and the URL of your website
  2. Proceed to step 2, where you will be able to download the xd_receiver communication file for uploading to your website.
    facebook application 002
    You must upload the xd_receiver.htm file to your website root folder before you click the “Test Setup and Continue” button. It will verify the existence of the xd_receiver.htm file on your website and brings you to step 3.
  3. Step 3 will show you the Facebook Connect Playground page, where you will be able to play with certain things such as code implementation and various other options.. Since this is already covered by Tech Crunch, there is no point going further about the implementation of the connect with Facebook button. By default Step 3 will land you to the “Social Markup” section on Facebook Connect Playground page, Lets Click on the “Comments Box” section and continue with setup a quick and dirty comments box on a website.
    facebook application 003
    At the Comments Box section, you will be able to copy a piece of code which will enable you to paste it to any HTML file and any particular section under the HTML <BODY> tag.
    facebook application 004NOTE: If you already included the script part of the code before anywhere in you HTML file, you can remove it safely..
    Now, save and upload the file and go to your browser to test, here is an example of how it turned out without and with login..
    facebook application 005
    Here it is without login to Facebook



    facebook application 006
    After Login to Facebook Connect
  4. Well that’s pretty much of it, now go and play with the playground. Here is a demo I’ve setup online (but I can’t promise it will be there forever)

No comments:

Post a Comment