Telefono: +39 392 33 73 731

Fix condivisione in Facebook per Contao

Un cliente mi ha fatto notare che il pulsante di condivisione in Facebook (nelle news di Contao) spedisce al social network solo il titolo ed alcune righe di testo, senza l'immagine di preview.
L'immagine sarebbe grande 90x90 pixel, Facebook la genera da una immagine casuale della pagina, a meno che non ne suggeriamo una tramite <meta> o <link> in <head> della pagina.

Il problema che affronto oggi in parte dipende da Contao, e possiamo correggere il codice del template come suggerisco in seguito, ma per quanto riguarda il funzionamento di Facebook dobbiamo usare i suoi developer tools.
Facebook infatti salva in cache ogni URL condiviso in modo univoco, e i dati non vengono aggiornati se cambiamo il titolo, l'immagine o il testo. Per questo motivo tutti i link che ho condiviso prima della modifica restano senza immagine, anche se provo a ri-condividerli. Per sistemare la situazione dobbiamo usare il debug di Facebook (https://developers.facebook.com/tools/debug) come spiegato a questo link.

I tag in head della pagina sono i seguenti, possiamo a scelta usare il meta oppure il link, è importante che l'URL sia completo.

<head>
...
inserimento tramite link
<link rel="image_src" href="http://site.com/image.jpg" />

oppure tramite meta  
<meta property="og:image" content="http://site.com/image.jpg" />
...  
</head>

Per quanto ne so in Contao abbiamo due problemi:

  • Manca del tutto il codice in head della pagina per favorire l'individuazione dell'immagine, quindi Facebook cerca di prelevarla dal contenuto
  • Il percorso dell'immagine nel contenuto è di tipo relativo, e funziona solo grazie al tag <base>, la pagina della news infatti ha un percorso di questo tipo "www.sito.com/it/blog/titolo-news.html" mentre l'immagine della news ha un percorso di questo tipo "assets/images/...".


Ho il forte sospetto che Facebook ignori il tag <base> e quindi sbagli il percorso. La cosa migliore da fare è aggiungere in head il collegamento assoluto come le specifiche di Facebook richiedono. Dobbiamo fare una modifica sia al template della news (news_full), sia al template della pagina (fe_page).

Questa è la modifica da fare al template della news, possiamo inserire il codice all'interno del controllo per la presenza dell'immagine.

<?php 
global $objPage;
$objPage->imagePreview = $this->src;
?>

Questo è il codice da inserire in <head> del template della pagina, possiamo metterlo subito dopo il meta description.

<?php if ($objPage-> imagePreview): ?>
<link rel="image_src" href="<?php echo $this->base . $objPage-> imagePreview; ?>" />
<?php endif; ?>

A questo punto, dovrebbe comparire l'immagine sia nella finestra che appare quando condividiamo la notizia, sia nella pagina di Facebook. Se volete che Facebook prelevi invece una immagine casuale dalla pagina probabilmente basta inserire nei percorsi delle immagini il percorso assoluto (aggiungendo nel template della news $this->base prima di $this->src ) ma non ho provato.

link su facebook con preview

Sabato 02 Marzo 2013
(1 commenti)
PHP

Commento di Marcos Santiago

Martedì 18 Marzo 2014

Hello can you send me a files with the code integrated? Thanks. msantiago@br.inter.edu

Risposta di Marco

Hello Marcos, all the code about the fix is in this page, you need to copy/paste it in your templates.
Anyway, now there is a nice Contao Extension that is doing this job, made by the developer Qzminski, you can find it in Github: https://github.com/codefog/contao-social_images

Aggiungi un commento

Nome
E-mail (non verrà pubblicata)
Sito Web
Commento