Cum pot controla imaginea pentru butonul Like de la Facebook?

Facebook utilizează acum protocolul OpenGraph. Puteți adăuga imagini folosind:

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

Adăugați această linie în header-ul paginii dumneavoastră.

Alternativ, puteți folosi plugin-ul meu pentru a face asta automat.

El face doar acest lucru și nu sunt necesare setări.

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

Trebuie să folosești Protocolul Facebook Open Graph. Nu sunt sigur de ce răspunsul Acceptat nu este unul dintre cele multe răspunsuri legate de OG: (la care am votat în sus), dar este greșit.

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

Poți personaliza multe lucruri, inclusiv titlul, imaginea, descrierea, categoria, ultima actualizare etc... dacă folosești Open Graph. Dacă folosești aceste alte soluții incomplete, pierzi din vedere imaginea de ansamblu.

Dacă nu aș fi urmat Protocolul OG pentru toate lucrările pe care le fac pentru Facebook, aș fi fost dat afară.

Dacă încercați următoarele:

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

Veți observa că WordPress afișează întregul cod HTML necesar pentru a afișa imaginea, nu doar atributul SRC pe care îl căutați.

O soluție ar fi:

<?php

// Imaginea reprezentativă pentru Facebook Like
$feature_image = get_the_post_thumbnail($post->ID);

// Obține sursa imaginii
$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; ?>" />

Acest cod vă oferă doar URL-ul imaginii. Este posibil să existe o metodă mai scurtă, dar soluția prezentată rezolvă problema.

Sper că vă ajută.

Matt.

Asigurați-vă că verificați URL-ul aici dacă imaginea specificată nu apare corect:

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

Dacă dorești să folosești prima imagine din articolul tău ca miniatură, cu o opțiune de rezervă precum logo-ul tău, încearcă plugin-ul meu - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ Explicația pentru adăugarea imaginii de rezervă (logo) se găsește la http://blog.ashfame.com/?p=888

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

Această metodă funcționează pentru "like"-uri, dar mai târziu, dacă dori să partajezi un link în jurnalul tău (de exemplu), această imagine este selectată automat.

Fără acest tag meta, poți selecta dintre toate imaginile de pe site-ul legat.

Știe cineva vreo metodă de a păstra imaginea statică pentru "like", dar care să permită alegerea unei imagini la partajarea unui URL?

OK, am scris un pic de JavaScript pentru a popula meta og:image cu imaginea reprezentativă pe care o aleg. Este un hack pe care îl adaugi o singură dată în fișierul header.

În postarea mea WordPress, adaug ID-ul "featured-image" (știu că în versiunile mai noi de WordPress această funcționalitate este integrată, eu folosesc o versiune veche).

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

Scriu un meta tag pentru og:image cu un placeholder, cum ar fi logo-ul blogului meu. Adaug "id="meta-image" în tag, de exemplu:

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

Apoi adaug acest JavaScript în 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);
});