¿Cómo puedo controlar la imagen del botón "Me gusta" de Facebook?

Facebook ahora utiliza el protocolo opengraph. Puedes agregar imágenes usando:

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

Añade esta línea al encabezado de tu página.

Alternativamente, puedes usar mi plugin para hacer esto automáticamente.

Solo realiza esta tarea y no se necesitan configuraciones.

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

Necesitas utilizar el Protocolo Open Graph de Facebook. No estoy seguro de por qué la respuesta aceptada no es una de las muchas respuestas relacionadas con OG: (a las cuales he votado positivamente), pero está equivocada.

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

Puedes personalizar muchas cosas incluyendo título, imagen, descripción, categoría, última actualización, etc... si usas Open Graph. Si utilizas estas otras soluciones a medias, te estás perdiendo el panorama completo.

Si no siguiera el Protocolo OG para todo el trabajo que hago en FB, me despedirían.

Si haces lo siguiente:

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

Descubrirás que WordPress muestra el HTML completo necesario para mostrar la imagen, no solo el SRC que es lo que realmente quieres.

Hacer algo como:

<?php

// Imagen destacada para el Me gusta de Facebook
$feature_image = get_the_post_thumbnail($post->ID);

// Obtener la fuente de la imagen
$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; ?>" />

te da solo la URL. Probablemente es la forma larga y se podría acortar, pero definitivamente soluciona el problema.

Espero que esto te ponga en el camino correcto.

Matt.

Asegúrate de verificar tu URL aquí si la imagen especificada no aparece correctamente:

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

Si deseas utilizar la primera imagen de tu publicación como miniatura con una alternativa como tu logo, prueba mi plugin - http://wordpress.org/extend/plugins/facebook-like-thumbnail/ La explicación para agregar la imagen del logo como alternativa se encuentra en http://blog.ashfame.com/?p=888

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

Este método funciona para los "me gusta", pero luego si quieres compartir un enlace en tu blog (por ejemplo), esta imagen se selecciona automáticamente.

Sin esta etiqueta meta, puedes seleccionar entre todas las imágenes del sitio enlazado.

¿Alguien conoce alguna forma de mantener la imagen estática para los "me gusta" pero que aún así permita elegir una imagen al compartir una URL?

OK, escribí un poco de JavaScript para poblar la meta etiqueta og:image con la imagen destacada de mi elección. Es un truco puntual que agregas a tu archivo de cabecera.

En mi publicación de WordPress, añado el ID "featured-image" (sé que en versiones más recientes de WordPress esto viene incorporado, estoy usando una versión antigua).

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

Escribo una meta etiqueta para og:image con una imagen de relleno, como el logo de mi blog. Agrego "id="meta-image" a la etiqueta, por ejemplo:

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

Luego agrego este JavaScript en la cabecera:

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