How To Add Facebook Comment Social Plugin In Your website

Friends,
I am going to explain how to add Facebook social plugin to your website and also how to get notified when someone gives comment on it.
  • At first you need to create a Facebook app
    • Go to https://developers.facebook.com/apps
    • If you are new to Facebook app then it will ask you to go to app section.
    • Click on "Create New App", give your App Name and click continue as shown below.
    •  
    How to create facebook app 

    • It may ask you to verify your account through mobile. In the above diagram you can see it is asking for the same. Click on it and give your mobile number. Facebook will send you a verification code by which you can verify your account.
    • After submitting, your app will be created with an unique app ID and app secret.
    • Go to Settings->Basic tab. There at the bottom part there will be an option to select how your app integrates with Facebook. Click on the website section which will open a text box to enter your website URL. Now you need to fill up some fields.
    • Give your App Namespace which  will uniquely represent your App. Don't worry facebook will automatically verify whether the app namespace you entered is previously present or not.
    • Give your app domain. If you have a website then give the name like example.com. And if you have a blog give the name like xyzexampleblog.blogspot.com. Don't use http:// in this section.
    • In the site URL section give your site URL which is the complete website URL including http://. For example you can say http://example.com or http://xyzexampleblog.blogspot.com.

How to create facebook app
  • The second step is to insert the code
    • In your blog/website put the following code under <head> tag.
    • <meta property="fb:app_id" content="#########"/> 
    • Put your App ID in the place of ######### in the above code.
    • Just after the above line add the following
    • <meta name="if:Facebook Comments On" content="1" />
    • Now put the following code just below the <body> tag
    • <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    • Now add the following code where you want to display your comments.
    • <a name="facebook_thread" id="facebook_thread"></a>
      <fb:comments href="############" num_posts="20" width="476"></fb:comments>
    • In place of ############ in the above code you keep your URL of the page where you are putting your comments or for which you are putting those comments.
    • For example if you want to put a comment for http://example.com/example1, then put it in place of ############.
    • Now you are almost done but just one step away.
    • How to get Notification if somebody comments
    • Just go to the link https://developers.facebook.com/tools/comments
    • Here you can see all of your apps that you have created and also all the comments
    • Go to settings present at the top right corner and add you as moderator, only after this you will get notification at your facebook account if somebody comments.
I hope the entire tutorial has helped you to create Facebook comment social plugin. If you really like the tutorial then share it to your friends.

(Read our article how to create Facebook colorful texts for chat)