Showing posts with label facebook comment. Show all posts
Showing posts with label facebook comment. Show all posts

Friday, January 1, 2016

How to add facebook comment box to blogger.com

First of all, here we are discuss about the advantages of the Facebook comment box.
We all know that Facebook is the most popular social media of the world. They always introduce new features to serve the people and to catch the visitors more on the Facebook. So Facebook comment box is one of their popular feature.
when some people like and reply to their comment. notification is appeared to the user. And it also provides multiple commenting features.

The main disadvantage of Facebook comment box in blogger is that Google spider never crawl Facebook comment, so these comment can not be useful in the view of optimization.

You just find here two methods to put this comment box in your blogger blog. Both are very useful but in some of older blog's templates Method 1 might not work. So I recommend you to use the methods which works in your blog.
This are one of the most using techniques to making more visitors on your blogs and sites.

1. Create a New app

New app id

It is the beginning thing that you should do which you can do easily by Facebook developer. First of all you should login into your Facebook then click on Facebook developers. After that click on Create New App
and their appears a pop of form. Fill that form. Then fill that Captcha. Then copy the app id into your notepad, this is needed in further steps.
facebook apps

2. Now lets install the Facebook comment in blogger blog

It is necessary to login into your Facebook dashboard. Then go to template tab and click on edit html. After that find the following code.
<html......> This code is in the first row of every blogger, so you can find it easily.

Then, just paste the following xmlns:og='http://ogp.me/ns#' code just after the highlighted code which is shown in above. When you add this code the html structure is look like
<html xmlns:og='http://ogp.me/ns#' ...... xmlns:expr='http://www.google.com/2005/gml/expr'>
Now find the <body> tag and paste the given code just after that <body>

<div id='fb-root'/> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
      appId  : &#39;AppId&#39;, 
      status : true, // check login status 
        cookie : true, // enable cookies to allow the server to access the   session 
      xfbml  : true  // parse XFBML 
    }); 
  };
    (function() { 
    var e = document.createElement(&#39;script&#39;); 
      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;; 
    e.async = true; 
      document.getElementById(&#39;fb-root&#39;).appendChild(e); 
    }()); 
</script>

The one thing is that you just replace or add your AppId below AppId.  You put your blog name inAll Blog Solution  and your facebook page url in http://www.facebook.com/allblogsolution.
Now there is needed to add meta tags. Just find the </head> and paste the following code replacing your app id
<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='AppId ' property='fb:app_id'/> 
<meta content='All Blog Solution' property='og:site_name'/> 
<meta content='http://www.facebook.com/allblogsolution' property='fb:admins'/> 
<meta content='article' property='og:type'/>

3. Comment box in blogger blog.

At last you should put comment box structure in the blog.
Go and just find this code <div class='post-footer-line post-footer-line-1'> and paste the following code just below the above code or anywhere you want to show the Facebook comment box.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div style='padding:2px 3px 2px 3px; margin:2px 3px 2px 3px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <div>
      <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='100%'/>
    </div>
  </div>
</b:if>
<div style="position:fixed; bottom:0px; left:0px; color:#898989; font-size:12px;"><a href="http;//techydesk.blogspot.com">Get Widget</a></div> 

Now you have successfully add your Facebook comment box.

Note: Replace http://allblogsolution.blogspot.com by your blogurl. If you want to change the width of comment, simply change the width. Thanks you did.

Watch and follow the below video

source

Facebook Comment box Generator for Blogger Tutorial

Create a Facebook App

Before Facebook new design, it was easier to create an app. But after their new design, it was a difficult work to create a new Facebook app for some people. Follow below instructions respectively to create your app.
Go to Facebook developer apps official web page and click on “Create New App” button.
Alternatively, you can click on “Apps” menu link and select on “Create a New App” button.
Create New App
Use one of these buttons to start creating a Facebook App.
Now you would see a pop out box to create the Facebook app. Type the name or your website name on the “Display Name” field. Also, you can add a namespace (Link to your app), but it’s optional. After you entered unique names, you can go to the next step by clicking on “Create” button. Don’t worry about below screenshot. I have installed the Hootsuite chrome extension to manage all my social accounts! (Yes, including Facebook)
App Names
Fill the details as like this example
After you created your new Facebook App, you can change its settings to see everyone. After Facebook’s latest update they have changed their user settings too. For some instances, you can’t see the App secret ID directly (you have to enter your Facebook password to see it) and they have a clear button to promote your App through Facebook advertising. You only want the APP ID, which you can see from the app’s dashboard page.
Now you should do one thing in order to connect new Facebook app with your website or blog (here we’re going to add your BlogSpot blog).
Go to “Basic Settings” page and find “App Domains” field. It’s used to connect your blog platform (you know your blog platform is BlogSpot). So type your blog URL (ex: bestlodge.blogspot.com or problogtricks.com) in the “App Domains” field. Then you should render your exact blog address (ex:www.bestlodge.blogspot.comwww.problogtricks.comblog.problogtricks or example.com/blog/).
Click on “+Add Platform” button and then select “Website”. Type your blog address correctly starting withhttp:// or https://( if you use SSL encryption) and ending with / (slash) for the Site URL field as shown in below screenshot. Type the same URL for mobile Site URL, if you’re using a responsive template for your BlogSpot blog. The last steps of configuring the Facebook App are making it live and available to all users. Type your email address in the “Contact Email” field. Then click on “Save Changes” button.
Facebook App : Basic Settings
Facebook App settings for website
Now navigate to “Status & Review” section and select the “Yes” for “Do you want to make this app and all its live features available to the general public?” A popup box will be shown, confirm your change.
Making it a Public App
App Status & Review
Go to your Dashboard and save the app id and app secret on your computer. We need them later.

Add Facebook comment box to Blogger

Now you created a new Facebook app for your Blog. Then you need to install the Facebook comment box on your blog. So follow below few steps respectively.
Step 1: Sign in to your Blogger account and go to Template.
Step 2: Now you have to make some changes to your blog template. So before we put into it, first of all make a backup of your existing blog template. Then click on “Edit HTML” button.
Step 3: Find this “<html” code in your template and in front of this code, paste below code.
xmlns:fb=’http://www.facebook.com/2008/fbml’
Make sure to add a space before and after the above code. See the example below.
<html  xmlns:fb=’http://www.facebook.com/2008/fbml’  b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ …….. xmlns:expr=’http://www.google.com/2005/gml/expr’>
Step 4: Use CTRL + F Blogger keyboard shortcuts and find where below HTML element is located.
</head>
Now replace below block of code just above of </head> code.
<meta expr:content=’data:blog.pageTitle’ property=’og:title’/>
<meta expr:content=’data:blog.url’ property=’og:url’/>
<meta content=’Pro Blog Tricks‘ 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=’http://www.facebook.com/problogtricks‘ property=’fb:admins’/>
<meta content=’article’ property=’og:type’/>
Customization
  • Replace your blog title or blog name instead of Pro Blog Tricks
  • Copy and paste the logo image URL instead Image-Link-Of-Blog-Logo.The logo will appear next to your post titles on Facebook profiles of commentators.
  • Replace YOUR_APP_ID with the App ID which you saved on your computer earlier.
  • http://www.facebook.com/problogtricks is the link of Facebook fan page.Just replace with your profile page or like page URL.
Step 5: Find below HTML code using above keyboard shortcut.
<body>
If you could not be able to find above code in your existing blogger template, then try to find below code. It should be located in your template.
<body expr:class=’&quot;loading&quot; + data:blog.mobileClass’>
After one of above codes, paste below piece of code.
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘MY APPLICATION ID HERE‘,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
Make sure that you changed the MY APPLICATION ID HERE with your real application ID.
Step 6: Now you’re half done. You just need to display Facebook comment box on your blog. You can put the  Facebook comment box in your post and static pages manually. But it’s not an easy work to add a Facebook comment box to whole pages manually (think if you have 1000+ posts on your blog, do you use this method to add comment box?). So we use an automatic technique to add the Facebook comment box. It’s done from template editor. So you have to do nothing from post editor. Find below blogger data tag in your template.
<data:post.body/>
or
<p><data:post.body/></p>
If you’re using a magazine blogger template, you will encounter two or three similar codes. As using a wrong <data:post.body/> code, Facebook comment box might not work on your blog. So try all code paces and choose the correct one. In case if you’re not sure which code to add or didn’t work that method, then find below HTML code in your template.
<div class=’post-footer-line post-footer-line-1′>
or
<p class=’post-footer-line post-footer-line-1′>
Step 7: Now paste one of pieces of HTML codes of Facebook comment boxes just below of the above codes.

Facebook comment box style #1 for white color background templates

Facebook comment box style #1 for White background templates
Comment box style One

HTML code for comment box :
<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div align=’center’>
<div style=”background: #F8F8F8;“>
<div style=”color: #444444; font-family:Constantia,Georgia,’Nimbus Roman No9 L’,serif; font-size: 32px; text-align: center;”>
<strong>Spread out Your Opinions</strong></div>
<br/>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>
<div><fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ width=’450‘/></div>
<div align=’right’><a href=’http://demo.problogtricks.com/2014/03/facebook-comment-box-blogger-example-01.html’ target=’blank’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>

Facebook comment box style #2 for dark color background templates

Facebook comment box style #2 for Dark background templates
Comment box style Two
HTML code for comment box :
<b:if cond=’data:blog.pageType == “static_page”‘>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div align=’center’>
<div style=”background: #414141;”>
<div style=”color: #F0F0F0; font-family:Cambria,’Palatino Linotype’,’Book Antiqua’,’URW Palladio L’,serif; font-size: 32px; text-align: center;”>
<strong>Share your thoughts using below comment form!</strong></div>
<br/>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1’/>
<div><fb:comments expr:href=’data:post.url’ expr:title=’data:post.title’ expr:xid=’data:post.id’ width=’450‘/></div>
<div align=’right’><a href=’http://demo.problogtricks.com/2014/03/facebook-comment-box-blogger-example-02.html’ rel=”nofollow”><small>[Comment Box for Blogger]</small></a></div>
</div>
</div>
</b:if>
</b:if>
Customization
  • Generally the Facebook comment box would appear on post and stationary pages. Stationary or static pages are stand alone pages which won’t add to archives. Usually Static pages are best to add contact form to Blogger, create About page etc. So if you don’t want to display Facebook comment box on static pages, please remove above first and last two conditional code lines.
  • If your Blogger template is not a magazine template or designed for showing whole content in home page, so you can display Facebook comment box on your blog home page or archive pages too. Just remove above highlighted codes.
  • You can change the background and font colors by changing their color values.
  • I have set up the width of comment box to 450 pixels. If you want to change the width to 500 pixels, so update the value to 500 instead 450. Also you can remove the width=’450 CSS code and then Facebook comment box will adapt to the device’s screen resolution. Remember by adding an over-riding value for the width of the Facebook comment box, it can mess up your blog template.
  • Additionally, you can add your own call to action instead of “Spread out Your Opinions” and “Share your thoughts using below comment form!”.
Step 8: Most important part of this tutorial, Save your Blogger template!

Enable notifications for comments

Now you are already done almost every hardest work! You can overlook these steps if you don’t want to receive notifications for comments & replies and make some useful changes such as enabling grammar filter, member wishlisting etc. But this tutorial is for receiving notifications for comments. (That’s why we created a Facebook App!). In the last part of this tutorial, let’s see how to enable notifications for comments.
Visit this web page:  https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
Replace YOUR_APP_ID with the your Facebook application ID.


Click on “Settings” link.
Comment moderation tool
Comment moderation tools
Now a pop out box would be shown and you can change some settings. Make yourself as a moderator (important to receive comment notifications). Allow other options to login and comment on your blog. Set grammar filter to maintain the comment quality. Use comment composer to reduce the page loading time. See below screenshot. After making these changes, click on “Save” button.
Application Moderators & Comment Settings
Comment settings
That’s all. Whenever someone comments on your blog, you will receive notifications for the comments to your Facebook account. Tell a friend to comment on your blog to see the results! Here is the notification message for my test comment which is put on our demo website.
Live & Instant Notification message for recent comment
Here is the notification for my recent comment

1st Quarter Examination 2013 activity Adam Smith adjustment Agri/fishery agriculture Animal Production application aquaculture Araling Panlipunan Araling Panlipunan 8 Araling Panlipunan I0 Araling Panlipunan II Araling Panlipunan IV architec architect Art Arts Asia asin Assessment Matrix Assyrian Asya athletics AutoCAD Automotive Babylonian bakal Bar Exam Biology black pepper blogger blur BMI Calculator breed business camera cardiovascular career guide carpentry cattle cell cell differences cell membrane cell respiration chemical Chemical Engineer Chemistry Civil Engineering Climate code color control comelec Command Economy commercial crops common noun components computer computer software contemporary issues Continue Cookery copyright course cpa crawl Criminologist crop crops Cultural culture Curriculum Guide Curriculum Map cut flower demand dentistry desktop development Disaster Readiness Discipline displacement disposal dissertation distance docking Download dressmaking drone duck duck raising ducks e-class record Earth Ebolusyon Economics Edukasyon sa Pagpapakatao effectivesness electrical Electronics electronics engineer elementary elements engineer English English 10 entrepreneur entrepreneurship EPP Erectus ESP EsP 10 Estate Broker events exam examination exercise facebook comment farming feasibility study feed fertile crescent fiber fiber crops field File file formats File menu Filipino Filipino 9 fitness flexibility Food (fish) Processing Forest Forest conservation forest coservation forestry form Format forms fruits games garlic gas generator ginger give away Glycolysis Goat good manners google search Grade 1 Grade 10 Grade 2 Grade 3 Grade 4 Grade 5 Grade 6 Grade 7 Grade 8 Grade 9 Handicraft hardware Harvesting hatching health Hebrew Hekasi heograpiya Hilagang Asya history Hittites Home Economics Homo sapiens Horticulture hot pepper Human Person ICT ICT II IFS image image window Imges imperyo increase index India indigenous Industrial Arts information integrated integrated farming system intracellular components java jobs jump K to 12 Kanlurang Asya kindergarten kinematics Kompetisyon kontinente kultura labor code labor law langis laptop latitude leadership1 learning learning materials lecture legumes LET life science link literacy literature location logo lokasyon longitude Magnus Effect magsasaka Mapeh Market Economy marketing Masonry material Math matter Mechanical Engineering media Medical Technologist memo menu menu bar mercury mesolitiko Mesopotamia metal Midwife Mixed Economy module monitor Monopsony monsoon Mother Tongue motion MTB muscular music neolitiko news noun gender noun plural nouns nursing board oil crop oligopoly onion online Oral Communication order P E P.E P.E. Paleolitiko palettes pananaw paniniwala parts of speech peanut peking periodic exam personal pharmacists phases Philosophy Phoenician photoshop physical Physical Education physical fitness Physician Physics Pilipinas Pisikal planting calendar plumber plyometric plyometric-exercise politics possessive noun poultry PRC press releases Principal's Test Reviewer principles Printing probability program promotion proper noun quail quails quarterly exam quartz Questionnaire questions quick fix raga Raising rasa reading record recycle recycled reference regions relihiyon research research paper Risk Reduction rock roots run salary scalar scanner schedule school calendar Science scientific notation secondary Senior High Sch Silangang Asya Social Studies society soybean spice Spice crops SSG states of matter Statistics stories structure sub menu submit article sukat Sumerian sunflower suplay supply system tala tanso Teachers Teaching Guide Technical Drafting Technical Evaluation term paper TESDA test Therapist thesis throws Timog Asya Timog Silangang Asya TLE TLE IV tool toolbox toolkit topic track and field Tradisyonal na Ekonomiya tungsten Unang Kabihasnan Unang Tao units UPCAT UST vector vegetable vermicomposting vermiculture vermiworms videos waste welcome welding wika workspace world worms writing yamang likas yamang mineral Yamang Tao zambia zinc