Ένα από τα βασικότερα προβλήματα των bloggers, είναι οι διαρκείς αποτυχημένες προσπάθειές τους, στο να τοποθετήσουν ένα comment box του facebook. Έφτασε λοιπόν η ώρα η επιθυμία σας να γίνει πραγματικότητα. Αν ακολουθήσετε κατά γράμμα τα παρακάτω, δεν υπάρχει περίπτωση να μη δουλέψει!
Για να δουλέψει, πρέπει οπωσδήποτε να έχετε λογαριασμό στο Facebook. Αν δεν έχετε, δεν θα καταφέρετε τίποτα.
Πριν κάνουμε οποιαδήποτε αλλαγή στο πρότυπό μας, πάντα δημιουργούμε ένα αντίγραφο ασφαλείας γα κάθε ενδεχόμενο. => Πρότυπο => Δημιουργία αντιγράφου ασφαλείας/επαναφορά προτύπου => Λήψη πλήρους προτύπου.
1. Πρώτα απενεργοποιούμε τα σχόλια του blogger. Αυτό γίνεται πηγαίνοντας στο: Ρυθμίσεις => Αναρτήσεις και σχόλια => εκεί που λέει "Εμφάνιση σχολίων", βάζουμε απόκρυψη.
2. Πάμε στο Facebook Developers από εδώ και πάμε να δημιουργήσουμε την εφαρμογή μας.
Site name: Βάζουμε τον τίτλο του blog μας
Site URL: Βάζουμε την διεύθυνση του blog μας και στο τέλος το σύμβολο "/" (πχ. http://test.blogspot.com/)
Τοπικό: Ελληνικά
Τώρα πρέπει να βλέπετε την παρακάτω εικόνα:
3. Τώρα πάμε να επεξεργαστούμε τον κώδικα της σελίδας μας:
=> Πρότυπο => Επεξεργασία Προτύπου => κλικάρουμε το Επέκταση προτύπων γραφικών στοιχείων.
Πατάμε Ctrl+F και βρίσκουμε το <html (βρίσκεται κάπου στις πρώτες γραμμές του κώδικα)
Ακριβώς μετά κάνουμε επικόλληση τον παρακάτω κώδικα:
ΠΡΟΣΟΧΗ!!! Πριν και μετά από τον παραπάνω κώδικα πρέπει να υπάρχει ένα κενό διάστημα για να μη χαλάσει το πρότυπό μας και δεν δουλεύει.
4. Με Ctrl+F ψάχνουμε το <body> και ακριβώς από κάτω κάνουμε επικόλληση τον παρακάτω κώδικα:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP 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>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP 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>
Εκεί που λέει App ID, βάλτε τον κωδικό που πήρατε από το Facebook Developers (πχ '232388136794748')
5. Ctrl+F και ψάχνουμε το </head>. Ακριβώς πριν απ' αυτό κάνουμε επικόλληση τον παρακάτω κώδικα:
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta content='MY-SITE-NAME' property='og:site_name'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
<meta content='article' property='og:type'/>
MY-SITE-NAME: Ο τίτλος του blog σας (πχ 'My Test Blog')
YOUR-APP-ID: Ο κωδικός που πήραμε από το Facebook Developers
YOUR-PROFILE-ID: To ID που έχουμε στο Facebook. (Αυτό το βρίσκουμε πηγαίνοντας στο album των φωτογραφιών του προφίλ μας - είναι ο 12ψήφιος μετά το "a." - a.123456789012.)
6. Ctrl+F και ψάχνουμε το <b:includable id='comments' var='post'> και κάνουμε επικόλληση ακριβώς από κάτω τον κώδικα:
<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='468'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://i55.tinypic.com/24xknsi.jpg' width='32'/> <b><a href='http://bloggermeetsfacebook.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a> brought to you by <a href='http://bloggermeetsfacebook.blogspot.com/' target='_blank' title=''>Blogger Meets Facebook Blog</a></b></div>
</b:if>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='468'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://i55.tinypic.com/24xknsi.jpg' width='32'/> <b><a href='http://bloggermeetsfacebook.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a> brought to you by <a href='http://bloggermeetsfacebook.blogspot.com/' target='_blank' title=''>Blogger Meets Facebook Blog</a></b></div>
</b:if>
Κάντε αποθήκευση και είστε έτοιμοι!!!!
μπορείτε να το δοκιμάσετε στο blog μου να δείτε ότι δουλεύει μια χαρά!
