Αναρτήσεις
Καλησπέρα στους αναγνώστες του bloggertips.gr.
Σήμερα θα σας δείξω πως μπορείτε να προσθέσετε στο blog σας ένα comment box (=φόρμα σχολίων) για να μπορούν οι αναγνώστες σας να σχολιάζουν επώνυμα μέσω του δημοφιλέστερου social network στον πλανήτη, του Facebook.
Πριν ξεκινήσουμε τη διαδικασία για το πως θα το προσθέσετε, δύο πράγματα είναι απαραίτητα:
1) Ένας λογαριασμός στο Facebook και
Αν και αρχικά πίστευα πως το comment box δε μπορεί να συνυπάρχει με τα σχόλια του blogger, έκανα λάθος, οπότε αγνοήστε το διαγραμμένο κείμενο από πάνω.
1. Μπαίνουμε στη σελίδα του Facebook Developers που έχει να κάνει με το comment box.
Site name: Το όνομα του blog σας
Site URL: Το url του blog σας με ένα "/" στο τέλος (π.χ. www.bloggertips.gr/)
Locale: Επιλέγετε από το μενού "Ελληνικά"
Μετά θα σας βγει ένα Security Check, δηλαδή ένα παράθυρο που βοηθάει στο να αναγνωρίσει το Facebook ότι έχει να κάνει με άνθρωπο και όχι με κάποιον υπολογιστή.
Συμπληρώνετε το captcha (δηλαδή τα περίεργα γράμματα που εμφανίζονται) και πατάτε Submit.
2. Στη σελίδα που θα οδηγηθείτε αφού πατήσετε Submit, το μόνο που θα χρειαστεί να πάρετε είναι η Ταυτότητα (ID) Εφαρμογής. Αντιγράψτε τον αριθμό που θα σας βγάλει και αφήστε τον στην άκρη γιατί θα τον χρειαστούμε παρακάτω.
3. Σύνδεση στο λογαριασμό blogger.
4. Σχεδίαση
5. Επεξεργασία HTML
6. "Τικάρουμε" το "Επέκταση προτύπων γραφικών στοιχείων"
7. Με Ctrl + F αναζητούμε το <html και δίπλα από αυτό, δηλαδή ακριβώς μετά από αυτό, επικολλούμε τον παρακάτω κώδικα:
xmlns:fb='http://www.facebook.com/2008/fbml'
8. Με Ctrl + F αναζητούμε το <body> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Ταυτότητα (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>
Στον παραπάνω κώδικα, αντικαθιστάτε το "Ταυτότητα (ID) Εφαρμογής" με τον αριθμό που μας έδωσε το Facebook, τον οποίο αφήσαμε στην άκρη νωρίτερα.<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'Ταυτότητα (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>
9. Με 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 μας, το YOUR-APP-ID με την Ταυτότητα (ID) Εφαρμογής, δηλαδή με τον αριθμό που πήραμε νωρίτερα από το Facebook και το YOUR-FACEBOOK-PROFILE-ID με το ID του λογαριασμού μας στο Facebook.
Για να βρούμε το Facebook ID, πάμε στο profile μας στο Facebook και κάνουμε κλικ στην φωτογραφία που έχουμε ορίσει ως φωτογραφία προφίλ.
Στην μπάρα του browser (του περιηγητή μας δηλαδή) θα βγει ένα link που θα μοιάζει με το παρακάτω:
https://www.facebook.com/media/set/?set=a.1438872928907.63717.1175547627
Το Facebook ID είναι ο αριθμός μετά το "a." μέχρι την πρώτη τελεία, δηλαδή στο παραπάνω το ID είναι το 1438872928907 .10. Με Ctrl + F αναζητούμε το <data:post.body/> και ακριβώς μετά από αυτό επικολλούμε τον παρακάτω κώδικα:
<b:if cond='data:blog.pageType == "item"'>
<p />
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div>
</b:if>
Μπορείτε να αλλάξετε το width='450', δηλαδή το πλάτος του comment box, και να το προσαρμόσετε στο πλάτος του blog σας, αλλάζοντας το "450" σε όποιο σας ταιριάξει καλύτερα.<p />
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' expr:xid='data:post.id'/></div>
</b:if>
Πειραματιστείτε για να βρείτε το κατάλληλο!
11. Αποθήκευση προτύπου και είμαστε έτοιμοι!
Δείτε Demo εδώ.
Πηγές: http://www.allblogtools.com/tricks-and-hacks/exclusive-integrate-facebook-comments-box-for-blogger-in-very-easy-and-simple-steps-full-guide/
Με τη φιλική βοήθεια (μέσω σχολιασμού) του http://bloggermeetsfacebook.blogspot.com/
Copyrights: http://www.bloggertips.gr/
Post by Secra from Web in Greece
| 
