Come posso controllare l'immagine del "Mi piace" di Facebook?

Facebook ora utilizza il protocollo opengraph. Puoi aggiungere immagini usando:

<meta property="og:image" content="http://YOUR_IMAGE_URL" />

Aggiungi questa riga nell'header della tua pagina.

In alternativa puoi utilizzare il mio plugin per farlo automaticamente.

Si occupa semplicemente di questo e non sono necessarie configurazioni.

http://shailan.com/wordpress/plugins/facebook-meta-tags-plugin/

Devi utilizzare il protocollo Open Graph di Facebook. Non sono sicuro del perché la risposta accettata non sia una delle tante relative a OG: (alle quali ho dato il mio voto positivo) ma è sbagliata.

http://developers.facebook.com/docs/opengraph/

Puoi personalizzare molte cose tra cui titolo, immagine, descrizione, categoria, ultimo aggiornamento ecc... se utilizzi Open Graph. Se usi queste altre soluzioni parziali, ti stai perdendo il quadro completo.

Se non seguissi il protocollo OG per tutto il lavoro che faccio su FB, verrei licenziato.

Se fai quanto segue:

<link rel="image_src" href="<?php the_post_thumbnail(); ?>" />

Scoprirai che WordPress restituisce il codice HTML necessario per visualizzare l'immagine, non solo l'attributo SRC che è quello che realmente desideri.

Facendo qualcosa come:

<?php

// Immagine in evidenza per FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Ottieni l'URL dell'immagine
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');

foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
<link rel="image_src" href="<?php echo $image_url; ?>" />

otterrai solo l'URL. Probabilmente è il metodo più lungo e potrebbe essere abbreviato, ma sicuramente risolve il problema.

Spero che questo ti indirizzi nella giusta direzione.

Matt.

Assicurati di verificare il tuo URL qui se l'immagine specificata non viene visualizzata correttamente:

http://developers.facebook.com/tools/lint/

Se desideri utilizzare la prima immagine del tuo articolo come miniatura con un'alternativa come il tuo logo, prova il mio plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ La spiegazione per aggiungere l'immagine del logo come alternativa si trova su http://blog.ashfame.com/?p=888

<meta property="og:image" content="http://TUA_URL_IMMAGINE" />

Questo metodo funziona per i "mi piace" ma successivamente, se vuoi condividere un link nel tuo log (ad esempio), questa immagine viene selezionata automaticamente.

Senza questo meta tag puoi selezionare tra tutte le immagini presenti sul sito linkato.

Qualcuno conosce un modo per mantenere l'immagine statica per i "mi piace" ma ancora permettere di scegliere un'immagine quando si condivide un URL?

OK ho scritto un po' di javascript per popolare il Meta og:image con l'immagine in evidenza di mia scelta. È un hack temporaneo che puoi aggiungere al tuo file header.

Nel mio post wordpress, aggiungo l'id "featured-image" (so che con le versioni più recenti di wordpress questa funzionalità è integrata, ma io uso una versione vecchia).

<xmp><img src="http://mysite.com/catphoto.jpg" id="featured-image" /></xmp>

Scrivo un meta tag per l'og:image con un placeholder, come il logo del mio blog. Aggiungo "id="meta-image" al tag, ad esempio:

<meta property="og:image" src="http://mysite.com/logo.jpg" id="meta-image" />

Poi aggiungo questo javascript nell'header:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>

<script type="text/javascript">
$(document).ready( function(){
    var featured_image = $("#featured-image").attr("src");
    $('meta[property="og:image"]').attr("content",featured_image);
});