Kako da dodate Facebook komentare na svoj blogger blog ?

Saša Stefanović · 8. 7. 2011.

Želim da vam objavim malo duže uputstvo gde ćemo zajedno naučiti kako da postavite Facebook komentare u blogger postove umesto standardnih blogger komentara. Idemo polako, korak po korak.

1. Pravljenje Facebook aplikacije za vaš blog

Učitajte Facebook Developers stranicu
Unesite ime vašeg bloga, adresu i jezik na kom hoćete da bude sistem komentara.
Kliknite dugme “Create app” i pređite na sledeći korak
Nakon pravljenja aplikacije, otvoriće vam se sigurnosni prozor gde treba da prekucate poruku koju vidite na slici.
Odmah nakon otkucane poruke, dobijate potvrdu o uspešno napravljenoj aplikaciji za vaš blog. Na toj stranici, pod poljem “App ID” postoji identifikacioni i unikatni broj koji morate da zapamtite jer ćemo ga koristiti kasnije u ovom uputstvu još. Dakle, otvorite notepad i kopirajte ovaj broj za kasnije. Nakon toga, kliknite na plavi link u gornjoj rečenici iznad tog broja gde piše “Developer Dashboard“
U prozoru koji se otvorio, kliknite na link sa desne strane “Edit Settings“.
I odmah zatim kada vam se otvori stranica, kliknite na “Website” sa leve stane i u poslednje polje “Site Domain” ukucajte blogspot.com, baš kao što sam ja na slici.
Na kraju, pritisnite dugme “Save Changes” i možete da zatvorite prozor.

2. Dodavanje polja za Facebook komentare u Blogger.

Pre nego što počnemo bilo šta, na vašem trenutnom blogu moraju biti omogućeni obični komentari, i da se oni nalaze ispod posta. Tako da pre svega proverite da li je ovo omogućeno ( Blogger > Settings > Comments > Embed comments below posts mora biti uključeno)

Učitajte Blogger administratoski deo i otiđite na Blogger > Design > Edit HTML
Tu odmah kliknite na “Download” u slučaju da nešto obrišemo, ovim ćemo kasnije moći vratiti sve na staro.
Odmah zatim, kliknite na kutijicu “Expand Widget Templates“.

Sada u kodu pronađite deo koji počinje sa <html i dodajte sledeći kod odmah iza tog dela.
Dakle, umesto

<html
expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>

Treba da bude

<html xmlns:fb='http://www.facebook.com/2008/fbml'
expr:dir='data:blog.languageDirection'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'>

Sada pronađite kod gde piše <body> i odmah ispod toga dodajte sledeći kod:

<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;VAŠ ID&#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>

Gde ćete umesto teksta “VAŠ ID” da ubacite broj koji ste zapamtili u notepadu.

Sada pronađite kod gde piše “</head>” i odmah iznad njega dodajte sledeći kod:

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Baguje.COM' property='og:site_name'/>
<meta content='http://www.baguje.com/wp-content/themes/baguje/images/logo.png' property='og:image'/>
<meta content='VAŠ ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/baguje' property='fb:admins'/>
<meta content='article' property='og:type'/>

Gde ćete na trećoj liniji ubaciti ime vašeg bloga, na četvrtoj neku sličicu koja predstavlja vaš blog, na petoj opet kod koji smo sačuvali (id kod sa Facebooka) i na šestoj liniji link do Facebook naloga vašeg bloga ili vašeg ličnog Facebook naloga.

Sada pronađite tekst gde piše <data:post.body/> i odmah ispod njega dodajte sledeći kod:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'>
  <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='520'/>
  </div>
 </div>
</b:if>

U petoj liniji možete da promenite broj 520 na neki drugi, i sa tim brojem regulišete širinu kutijice za komentare. Dakle, ukoliko je vaš blog recimo uži od 520 piksela, promenite taj broj upravo na ovoj liniji.

Došli smo do kraja, sada je ostalo samo da sačuvate vaše izmene klikom na dugme “Save” i to bi bilo to.

Sada, predlažem da opet odete u podešavanja i da sakrijete standardne blogger komentare kako ne bi bunili vaše posetioce sa dva mesta za komentarisanje. Dakle, odete Blogger > Settings > Comments i klikom na dugme “Hide” kod komentara sakrivate blogger komentare.