Ž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]
<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’>
[/html]Treba da bude
[html highlight=”1″]
<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’>
[/html] - Sada pronađite kod gde piše
<body>
i odmah ispod toga dodajte sledeći kod:
[html highlight=”5″]
<div id=’fb-root’/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'VAŠ ID',
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>
[/html]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:
[html highlight=”3,4,5,6″]
<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’/>
[/html]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:
[html highlight=”5″]
<b:if cond=’data:blog.pageType == "item"’>
<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>
[/html]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.