Facebook share Blogger wrong image-thumbnail

13.03.13

Facebook share Blogger wrong image-thumbnail

Πρόσφατα χρειάστηκε να φτιάξουμε ένα μικρό addon για να λύσουμε το πρόβλημα που παρουσιάστηκε όταν κάνουμε κλικ στο κουμπί share του facebook  μίας ανάρτησης στο blogger. Το facebook επιλέγει μια τυχαία φωτογραφία και όχι την πρώτη της ανάρτησης! Το πρόβλημα ήταν το εξής: Το facebook άλλαξε την πολιτική του και πλέον αναφέρει ότι χρειάζεται η εικόνα να έχει τα εξής χαρακτηριστικά Please use an image that's at least 200x200 and preferably 1500x1500. (Maximum image size is 5MB.) Οδηγίες εγκατάστασης:

Δημιουργούμε το addon

javascript:d=document.querySelector('#postingComposeBox').contentWindow.document;elements = d.querySelectorAll('p'); var i=0;while(i < elements.length){    if(elements[i].innerHTML.match(/^<!--data-blogger-escaped-<link/)!=null){ elements[i].parentNode.removeChild( elements[i] ); }     i++; }elements = d.querySelectorAll('link');var i=0;while(i < elements.length){    elements[i].parentNode.removeChild( elements[i] );      i++; } el=d.createElement("link"); el.setAttribute('href',d.querySelector('img').getAttribute('src')); el.setAttribute('rel','image_src'); d.querySelector('body').appendChild(el);

Οδηγίες δημιουργίας addon στον chrome: Κάνουμε κλικ στο κουμπάκι δεξιά από το address bar και επιλέγουμε Bookmarks->Bookmark Manager Κάνουμε κλικ στο κουμπί organize και κλικ στο Add page. Στο name βάζουμε ότι όνομα θέλουμε και στο url paste τον κώδικα:

javascript:d=document.querySelector('#postingComposeBox').contentWindow.document;elements = d.querySelectorAll('p'); var i=0;while(i < elements.length){    if(elements[i].innerHTML.match(/^<!--data-blogger-escaped-<link/)!=null){ elements[i].parentNode.removeChild( elements[i] ); }     i++; }elements = d.querySelectorAll('link');var i=0;while(i < elements.length){    elements[i].parentNode.removeChild( elements[i] );      i++; } el=d.createElement("link"); el.setAttribute('href',d.querySelector('img').getAttribute('src')); el.setAttribute('rel','image_src'); d.querySelector('body').appendChild(el);

Ανοίγουμε το blogger και πάμε Πρότυπο->Επεξεργασία HTML και κάνουμε κλικ στο Επέκταση προτύπων γραφικών στοιχείων

ΠΡΟΣΟΧΗ επιλέξτε όλο τον κώδικα με Ctrl+A, τον κάνουμε αντιγραφή με Ctrl+C, ανοίγουμε ένα αρχείο κειμένου και τον κάνουμε paste με Ctrl+C. Τέλος κάνουμε save το αρχείο. Αυτήν τη διαδικασία την κάναμε ώστε οποιοδήποτε πρόβλημα παρουσιαστεί να μπορούμε να γυρίσουμε στην προηγούμενη κατάσταση.

Αρχικά θα χρειαστεί να πάμε στο site μας και να μπούμε μέσα σε μία ανάρτηση κάνοντάς την κλικ. Πατάμε δεξί κλικ και View page source Ψάχνουμε τη γραμμή

<meta content='true' name='MSSmartTagsPreventParsing'/>

Αντιγράφουμε το κώδικα από αυτή τη γραμμή (ΚΑΙ αυτή) μέχρι ΚΑΙ τη γραμμή

catch(e) {} })(); </script> <![endif]-->
Οπότε έχουμε κάτι τέτοιο:
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
bla
bla
bla
bla
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->

Κάνουμε paste τον κώδικα σε ένα αρχείο κειμένου και ΔΙΑΓΡΑΦΟΥΜΕ τη γραμμή που ξεκινάει από

<link rel="image_src"

Ανοίγουμε το blogger και πάμε Πρότυπο->Επεξεργασία HTML και κάνουμε κλικ στο Επέκταση προτύπων γραφικών στοιχείων Αναζητούμε τη γραμμή κώδικα με Ctrl+F

<b:include data='blog' name='all-head-content'/>

Αντικαθιστούμε αυτή τη γραμμή με αυτόν το κώδικα:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ΕΔΩ ΜΠΑΙΝΕΙ Ο ΠΑΡΑΠΑΝΩ ΚΩΔΙΚΑΣ ΠΟΥ ΕΧΟΥΜΕ ΑΦΟΥ ΕΧΟΥΜΕ ΔΙΑΓΡΑΨΕΙ ΤΗ ΓΡΑΜΜΗ που ξεκινάει από <link rel="image_src"
<b:else/>
<b:include data='blog' name='all-head-content'/>
</b:if>

Πατάμε προεπισκόπηση να δούμε ότι δε υπάρχει κανένα πρόβλημα και έπειτα Αποθήκευση πρότυπου. Όταν κάνουμε μία καινούργια ανάρτηση κάνουμε κλικ στη πρώτη φωτογραφία που προσθέσαμε και επιλέγουμε μεγάλο (μέγεθος). Τέλος κάνουμε κλικ στο addon που δημιουργήσαμε. Αυτό ήταν, τώρα το κουμπάκι του facebook θα προσθέσει και αυτή τη φωτογραφία μέσα στις προτεινόμενες.

Αν πατήσετε το κουμπάκι του addon για παλιά ανάρτηση δεν θα δουλέψει αμέσως γιατί το facebook κάνει cache το url. Μπορείτε αν θέλετε να καθαρίσετε την cache για την ανάρτηση από εδώ: http://developers.facebook.com/tools/debug