How To Add Facebook Comment box Plug-in for Blogger Website?

Facebook Comment box is a very popular and stylish and user friendly comment system. If you want Facebook comment box for your website, Just follow all steps one by one....
Before start this lesson, please visit Lesson-2 for a clear idea about Facebook comment box.

Step-1: (Create an app)

Go to facebook and loging from your account.
Now go to this link ‣‣ Facebook developer
Click on Register Now ‣‣①
Then Next ‣‣②

Click on Developer ‣‣③

Next click on Create First App ‣‣④

Next click Create App ID ‣‣⑤

Enter Capcha and click on Submit ‣‣⑥

Step-2: (add App details)

Click on Settings ‣‣①
Basic ‣‣②
Now fill up all box with correct information

Display name: This name will be show in your app
Namespace: It will be show in your app url
App Domains: Enter here your blogspot website address or custom domain ( example: www.bloggerdesk-online or www.bloggerdesk.online )
Contact email: your any email address
Privasy Policy url: your website Privacy url (learn how to create Privacy url)
Terms of service url: Your website Terms of service url( how to create Terms of service url)
App Icon: this icon will be show in your app only. You can use any icon, no problem.
Category: Select your website category.

Scroll down and look as like below Image.
Fill-up all box and click on Save Changes ‣‣③

If you do not want to fil-up now, no problem. You can fil-up next time.

Step-3: ( Install Comment Box )

Go to your blogger account
Click on Theme >> Edit HTML >>
Search this code: <html b
Now replace with this below code:


<html xmlns:fb='http://www.facebook.com/2008/fbml' b

Now search this code: </head>
Now add below code before </head>

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Desk' property='og:site_name'/>
<meta content='Image-Link-Of-Blog-Logo' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='Your_FB_Acc_ID' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace Blogger Desk to your website Name
Image-Link-Of-Blog-Logo replace it with your website logo url.
YOUR_APP_ID replace it with your app id (created in step-1)
Your_FB_Acc_ID replace it with your facebook id number (example: go to your facebook>> click on your any post from your Profile. Look at link from browser url ber )

Now search </body>
Now add below code before </body>

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0&appId=527150891309033&autoLogAppEvents=1"></script>

Now Click on Save theme ‣‣④

Step-4: (add Comment html )
Method-1: ( manually )
Add below code for your every post in HTML ( manually )

<div class="fb-comments" data-numposts="5" data-width="" data:blog.url=""></div>

Method-2: ( automatic )

Have you many post or you do not want to add manually comment box for every new post. Don't worry. Comment box will be show automatically for every new or old post. Just follow below steps....

Go to Theme >> Edit HTML >>
Now search this below code

<data:post.body/>

<p><data:post.body/></p>

Now add below code ‣‣① as like below Image
Next Click on Save theme ‣‣②

<div class="fb-comments" data-numposts="5" data-width="" data:blog.url=""></div>

That's all..... Work is done....
After Comment box add, you have need Moderation Knowledge. So read next Lesson
If you face any kinds of problem, Comment me, I will solve your problem very quickly.

Contact

How To Add Facebook Comment box Plug-in for Blogger Website?

No comments

Recent

Contact

99bloggertutorial.blogspot.com