Showing posts with label blogger. Show all posts
Showing posts with label blogger. 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
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