Come posso controllare l'immagine simile a Facebook? [chiuso]

Ho un blog con alcuni post e ogni post ha un pulsante Mi piace di Facebook incorporato . Premendo il pulsante si apre una finestra di dialogo in modo che i miei visitatori possano condividere il post su Facebook con un commento.

Quando condividi, tuttavia, l'immagine selezionata da Facebook è un'icona di posta generica e non la miniatura del post.

Come posso controllare l'immagine che viene utilizzata durante la condivisione?

L'immagine che viene utilizzata per la condivisione è presa da un pezzo di codice nell'intestazione del tuo sito che avrà un aspetto simile al seguente:

<link rel="image_src" href="path/to/theme/screenshot.png" />

In genere si collega allo screenshot del tuo sito nel tema. Se hai rimosso il codice dall'intestazione del file e su single.php lo hai inserito nel ciclo e hai chiamato la tua immagine in miniatura post nell'elemento href, credo che funzionerebbe. Quindi sarebbe simile a:

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

Ciò significherebbe che se hai pulsanti simili su pagine che elencano più post probabilmente non avrai un'immagine. Se includessi un codice condizionale che lo ha rimosso solo su single.php, allora avresti l'immagine normale su qualsiasi pagina con più post e un pulsante mi piace e la miniatura del post quando viene utilizzato il modello single.php. Quindi il codice dell'intestazione sarebbe:

<?php if ( is_single() ) { /* do nothing on single pages */ } else { ?>
<link rel="image_src" href="path/to/theme/screenshot.png" />
<?php } ?>

Quindi useresti comunque il codice per includere la miniatura del post in single.php.

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

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

Aggiungi questa riga all'intestazione della pagina.

In alternativa puoi usare il mio plugin per farlo automaticamente.

Fa solo questo lavoro e non sono necessarie impostazioni.

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

È necessario utilizzare il protocollo Open Graph di Facebook. Non sono sicuro del perché la risposta accettata non sia una delle tante risposte OG: risposte correlate (che ho votato) ma è sbagliata.

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

Puoi personalizzare molte cose tra cui titolo, immagine, descrizione, categoria, ultimo aggiornamento ecc ... se usi Open Graph. Se usi queste altre mezze soluzioni, perdi l'intera immagine.

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

Se esegui le seguenti operazioni:

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

Scoprirai che Wordpress genera l'html richiesto per visualizzare l'immagine, non solo l'SRC, che è ciò che desideri davvero.

Fare qualcosa del tipo:

<?php

// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);

// Get image source
$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; ?>" />

ti procura solo l'URL. È probabilmente la strada lunga e può probabilmente ma abbreviata, ma risolve sicuramente il problema.

Spero che questo ti porti sulla strada giusta.

Opaco.

Assicurati di sfilare l'URL qui se l'immagine specificata non viene visualizzata correttamente:

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

Se desideri utilizzare la prima immagine del tuo post come anteprima con un fallback a qualcosa come il tuo logo, prova il mio plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explanation per aggiungere il l'immagine del logo di fallback è su http://blog.ashfame.com/?p=888

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

Questo metodo funziona per "like": s, ma in seguito se si desidera condividere un collegamento nel proprio registro (ad esempio.) Questa immagine viene selezionata automaticamente.

Senza questo meta tag è possibile selezionare tra tutte le immagini sul sito collegato.

Qualcuno sa come mantenere l'immagine "mi piace" statica ma ti fa comunque scegliere un'immagine quando condividi un URL?

OK, ho scritto un po 'di javascript per popolare Meta og: image con l'immagine in primo piano di mia scelta. È una modifica una tantum che aggiungi al file di intestazione.

Nel mio post su wordpress, aggiungo l'id "in primo piano" (so che con wordpress successivo è integrato, ne ho uno vecchio).

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

Scrivo un meta tag per og: image con un segnaposto, ad esempio il registro del mio blog. Aggiungi "id =" meta-immagine "al tag, ad es

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

Quindi aggiungi questo javascript nell'intestazione:

<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);
});