WordPress: problema con i link e l’anteprima di Facebook

Vediamo come risolvere il problema dell’assenza di thumb durante la condivisione di un link su Facebook da un articolo creato con WordPress.

Descrizione

Il problema è abbastanza fastidioso e si presenta quando proviamo a condividere su Facebook un nostro articolo creato con WordPress su una pagina o gruppo sociale tramite link. Di fatto o le immagini “auto-generate” da WordPress sono prese a caso, oppure, nel peggiore dei casi, non viene visualizzata nessuna immagine thumb nel link di condivisione. Come risolvere? Bhè voglio condividere con voi la mia, personale, odissea.

Cenni Open Graph

Di base Open Graph usa tre tipologie di tag per generare i meta-dati per i link di condivisione su Facebook:

og:title –> titolo della pagina da condividere, di solito è recuperato dal <title> della pagina. Se durante la condivisione non vi appare il titolo dovrete agire su questo parametro.

og:description –> La descrizione della pagina. Usalmente è il tag description.

og:image –> immagine da recuperare per la condivisione.

 Di fatto aggiungendo questi tag la condivisione mediante “send” o “like” sarà pressochè perfetta. Qualora non mettiate questi tag il motore facebook recupererà alcune immagini a caso dalla vostra pagina web.

Voi vi chiederete quindi tutto risolto? Bhè non proprio. Se da un lato la condivisione tramite like e send è stata risolta il vero problema sta nella condivisione del link su una pagina o gruppo sociale. Quando incolliamo il link su una pagina sociale infatti, di fatto il problema delle thumb mancanti non si è risolto.

Risoluzione del problema

Oltre ai tag open graph è necessario specificare anche il tag rel=”image_src” che indicherà alla condivisione quale immagini recuperare. Questa soluzione è da adottare SOLO se i tag open graph non sono stati sufficenti.

Per risolvere il problema aggiungiamo quindi nell’ header del vostro tema il seguente codice:

<?php if(is_single()) {

global $wp_query;
$post_id = $wp_query->post->ID;

$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $wp_query->post->ID );
if($arrImages) {
    $arrKeys = array_keys($arrImages);
    $iNum = $arrKeys[0];
    $sThumbUrl = wp_get_attachment_thumb_url($iNum);
    echo '<link rel="image_src" type="image/jpeg" href="'. $sThumbUrl .'" />';
} else {
    echo '<link rel="image_src" type="image/jpeg" href="Thumbdibase" />';
}

}?>

Lo script recupera automaticamente la versione “small” delle vostre thumb e aggiunge il tag sopra indicato. Assicuratevi nel pannello “media” di Wp che la dimensione sia impostata su 150×150 MASSIMO. E’ altresì necessario (anche se è molto strano) che il codice sia inserito PRIMA di wp-head. Di fatto l’incorporazione tramite funzione nel file functions.php non avrà nessun esito.

Un altra raccomandazione utile è usare la dimensione small anche per il tag og:image.

NOTA IMPORTANTE: Ricorda di ri-generare le thumbnails prima di verificare il corretto rendering delle thumb su facebook.

Esistono altri metodi?

Sì, ma non funzionano. O meglio, funzionano ma non risolvono il nostro problema ma fixano solamente la condivisione tramite like e  send buttons (anche se per questo bastano i tag open graph). Per completezza di trattazione vi posto una soluzione (giusto se volete fare qualche prova anche voi):

Codice da aggiungere a functions.php

function add_image_src(){

global $post;
if ($post){

$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $post->post_content, $matches);

//recupero la prima immagine
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

// estraggo il link e creo il tag
echo '<link rel="image_src" href="', $url,'" />';
//volendo aggiungi qui anche il tag og:image
}
}

// inserisco il tutto nell'head del tema
add_action('wp_head', 'add_image_src');

Conclusioni e Consigli

Questa analisi nasce da molte ore spese in tentativi e analisi, ma credo potrà essere utile a tutti coloro che hanno avuto questo (fastidioso) problema. Se ti è stato utile o hai fatto altre considerazioni fammelo sapere nei commenti!