Video of Day

How to add Facebook comment box in Blogger


Facebook comment for your blog can serve as a good way to make your site more engaging and encourage readers to drop comments if they're already logged in to Facebook. It also serves as a source of traffic since using Facebook comment shares the comment and post page on the visitor’s viewer's Facebook wall. One thing should be noted though: Facebook comment has no SEO value since it’s being displayed in an iframe which Google won't index.

Comments made with the regular comment box on your site has more advantages especially if you get loads of comment, more keywords you didn't actually mention in the post content but appearing in comments do bring more search engine traffic. This is something Facebook comment lacks, except the extra traffic you get from Facebook.

Adding Comment Box Step 1 :

  • Login your Facebook account.
  • Go to Setting option from to right corner.
  • Click Developer option from bellow.
  • Then click Docs button.
  • Click Social Plugins option.
  • Then click Comments from bellow right corner.
  • You can see now 4 boxes like bellow picture.
    • a) Url to comment on box give your blog Domain Name.
    • b) Width box give width [as your wish]
    • C) Number of post [how many post see one page]
    • d) Color Scheme box [select color as you want]
  • Finally click Get Code button.
  • Copy Html5 code from bellow picture.
Facebook-Comment-Code

Adding Comment Box Step 2 :

  • Log in Blogger dashboard.
  • Go to template > edit html.
  • Search </body> tag {Ctrl+f}
  • Now past facebook Html5 code above </body>
  • Click Save Template.
Note: This is a small fact. After clicking save template, perhaps it say Error message like bellow picture. Now you should a small tricks. Go here. Past facebook Html5 code in this box and click Convert. Copy all converted code and past above</body> tag. Now it must be save without any problem.
Blogger-Html-Save-Wrong
  • Next search this red code <b:include data='post' name='post'/>
  • Past bellow codes after this red tag.
  <b:if cond='data:blog.pageType == "item"'>  
          &lt;div  
            class=&quot;fb-comments&quot;  
            data-href=&quot;<data:post.url/>&quot;  
            data-width=&quot;590&quot;  
            data-num-posts=&quot;100&quot;&gt;  
          &lt;/div&gt;  
       </b:if>  
That's all ......
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment