Εισαγωγή meta tag σε κάθε ανάρτηση του blogger

Βρήκα τη λύση στο πρόβλημα με τα meta στο blogspot, αν θυμάστε είχα γράψει παλαιότερα γι'αυτό και ζητούσα βοήθεια. Εδώ Θα σας δώσω πληροφορίες για το πως να εισάγετε meta στο blogger, προτείνω όμως να διαβάσετε και τη προηγούμενη ανάρτηση που μιλούσα για τα og tags και να κάνετε κάθε ανάρτηση σας ένα open graph object.

Like button, og tags και κρυφές σελίδες διαχείρισης στο Facebook

Σε αυτή την ανάρτηση θα δούμε τη μετατροπή μιας ιστοσελίδας σε open graph object κάνοντας χρήση των og tags προσθέτοντάς τη έτσι στο semantic web. To Facebook συνεργάζεται άψογα με τους ιστότοπους που περιέχουν τα og tags επιτρέποντας στους διαχειριστές τους να επικοινωνούν με τους χρήστες που έκαναν κλικ στο Facebook like button μέσω των κρυφών σελίδων Facebook (admin page). Επίσης, με τη χρήση των og tags ελέγχετε απόλυτα το τρόπο εμφάνισης της σελίδας στο Facebook.



Κάποια από τα απαραίτητα og tags είναι τα εξής:

<meta content='τίλος σελίδας' property='og:title'/>
<meta content='όνομα του ιστότοπου' property='og:site_name'/>
<meta content='τύπος του αντικειμένου' property='og:type'/>

Για τα ιστολόγια το σωστό είναι να βάλετε στο index “blog” και στη κάθε ανάρτηση “article” έτσι όμως δε θα μπορείτε να ενημερώνετε τους χρήστες που έκαναν like μια ανάρτηση για μελλοντικές παρόμοιες αναρτήσεις που ίσως τους ενδιαφέρουν μιας και το τύπου article δεν έχει σελίδα διαχειριστή στο Facebook. Μετά τα πρώτα 10 like το og:type δεν αλλάζει.

<meta content='διεύθυνση της ανάρτησης' property='og:url'/>
<meta content='εικόνα που επιθυμείτε' property='og:image'/>
<meta content='ids των διαχειριστών' property='fb:admins'/>

Όλοι όσοι είναι admins στο open graph object που μόλις φτιάξατε πρέπει να πατήσουν like και μόνο τότε θα δουν το admin page link δίπλα στο like button. Αν προσθέσετε τα og σε παλαιότερες αναρτήσεις θα μπορείτε να επικοινωνείτε από τη κρυφή σελίδα στο Facebook μόνο με τους χρήστες που έκαναν “μου αρέσει” μετά που προσθέσατε τα tags αλλά όχι με αυτούς που έχουν κάνει από πριν.

<meta content='id Facebook σελίδας' property='fb:page_id'/>

Οι διαχειριστές μπορούν να δουν και στατιστικά για τη σελίδα μέσα στο facebook, από τη σελίδα των στατιστικών προσθέστε το domain σας από το πράσινο κουμπί “Στατιστικά για τον διαδικτυακό τομέα σας”. Αν θέλετε να επιτρέψετε σε όλους τους διαχειριστές μιας Facebook σελίδας να έχουν πρόσβαση στα στατιστικά μπορείτε να κάνετε χρήση του fb:page_id και να καταχωρήσετε ως σελίδα και όχι ως χρήστης το domain.

<meta content='περιγραφή' property='og:description'/>

Εισάγοντας τα og tags κάνετε τη σελίδα σας ισάξια μιας σελίδας μέσα στο Facebook, προσθέστε όποια πιστεύετε ότι χρειάζεστε από τη λίστα. Αν και δεν είναι αναγκαίο (τουλάχιστον για την frame εκδοχή του like button) προσθέστε στο html tag το statement xmlns:og="http://ogp.me/ns#" για να εισάγετε το RDFa λεξικό και το xmlns:og="http://opengraphprotocol.org/schema" για τη σύνδεση του open graph protocol με άλλα RDF schemas. Semantic web FTW!

Αφού τελειώσετε κάντε ένα έλεγχο στο URL linter και βεβαιωθείτε ότι όλα είναι όπως πρέπει. Από τη σελίδα αυτή μπορείτε να πάρετε το κώδικα για το like button, αλλιώς από τη σελίδα των social plugins που έχει και επιλογές μορφοποίησης.

Μη ξεχάσετε να κάνετε like την ανάρτηση! :)

Blogger to Facebook: Επισύναψη συνδέσμου

Μια ωραία ημέρα κάνω επισύναψη ένα σύνδεσμο από το ιστολόγιο μου στο Facebook και παρατηρώ ότι μόνο η περιγραφή είναι σωστή (οι πρώτες λέξεις της συγκεκριμένης ανάρτησης) ενώ ο τίτλος και η εικόνα που τα συνοδεύουν είναι τα γενικά του blog και όχι αυτά της ανάρτησης! Όσοι έχετε ιστολόγιο στο blogger το γνωρίζετε.



Έλυσα το πρόβλημα κάνοντας χρήση της εφαρμογής NetworkedBlogs, αλλά δεν θέλω να είμαι "όμηρος" μιας εφαρμογής. Εκτός αυτού, το NetworkedBlogs δείχνει το ιστολόγιο μέσα σε ένα iframe κλέβοντας έτσι like και share που γίνονται και δεν φαίνονται στους μετρητές που έχουν οι αναρτήσεις. Συγκρίνετε δύο αναρτήσεις στο Facebook Like Count Calculator.

Ψάχνοντας να βρω λύση διάβασα πολλά άρθρα που πάνω κάτω έλεγαν το ίδιο πράγμα, μια διαδικασία που πρέπει να γίνεται για κάθε μια ανάρτηση, κάθε φορά.

1. Βρείτε το <b:include data='blog' name='all-head-content'/> στο template του blog
2. Προσθέστε την εντολή <b:if cond='data:blog.url == "Εδώ βάλτε τη διεύθυνση της ανάρτησης " '> </b:if>
3. Προσθέστε τα meta που θέλετε στην εντολή <b:if>

Αυτό ήταν! Το πρόβλημα μου είναι ότι θέλω να συμπεριλάβω κάποια meta για το index. Μόλις τα προσθέσω, τότε αρχίζουν τα μπερδέματα. Πρόσθεσα <b:else> και πάλι απέτυχα... O κώδικας που έχω προσθέσει μέχρι τώρα:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='197382578963' property='fb:page_id' />
<meta content='gr@2.0' property='og:title' />
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2y8UQ3Y9ZqZsL8sPN2Xo-Pvf-W8lJ9hLV5sHzLRC99_KRcaJ5b3TDk4vLoFj_HUVx5kgwuPgon6MF-WAz_BwesSPhVc-baFxjguIB5zU1zksFAaHbsr55HbzaWuhK7QJd-KKBqnEMrcs/' property='og:image' />
<meta content='Το gr@2.0 είναι ένα blog με σκοπὀ την προβολή και συζήτηση θεμάτων που αφορούν το Web 2.0 και τα social media' name='description' />
<b:else>
<b:if cond='data:blog.url == "http://grat20.blogspot.com/2010/07/social-media-fastbook_19.html" '>
<meta content='title' name='Λάθη στα social media: Fastbook' />
<meta content='description' name='Με το παρόν ξεκινά ένας κύκλος αναρτήσεων βοήθειας και όχι επίθεσης! Καθημερινά μελετώ εταιρίες και το τρόπο που κινούνται στα social media. Αυτές είναι οι ιστορίες τους (κλεμμένο από τηλεοπτική σειρά!).' />
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-qOp4KecAYKjQbW0V6k2HKmjfycwOugqpBl6d4nvNcZLPTyyjjDobJPivBkd7DHg4w0fzM6uEiRBEDZB8ShYYKyAEhaezHLroo8H2BbNUTmVrqJiiZGGbuTfgGVBJc_F8CeHqcaiZsu8/' rel='image_src' />
</b:if>
</b:else>
</b:if>

Ως έχει τώρα λειτουργεί σε Chrome για mac αλλά δεν παίρνει τη σωστή εικόνα (έχω επιλογές από όλες και όχι αυτή που όρισα στα meta), σε όλους τους άλλους όχι, mac και windows.


Μπορεί να βοηθήσει κανείς; Ευχαριστώ!