¿Cómo puedo controlar la imagen de me gusta de Facebook? [cerrado]


13

Tengo un blog con algunas publicaciones, y cada publicación tiene un botón de me gusta de Facebook incrustado . Al presionar el botón se abre un cuadro de diálogo para que mis visitantes puedan compartir la publicación en Facebook con un comentario.

Sin embargo, al compartir, la imagen seleccionada por Facebook es un ícono de correo genérico y no la miniatura de la publicación.

¿Cómo puedo controlar la imagen que se usa al compartir?


Ese sitio recientemente fue pirateado, aparentemente ...
MirroredFate

1
Apenas no es una pregunta de Wordpress ...
Kaaviar

Respuestas:


7

La imagen que se usa para compartir se toma de un fragmento de código en el encabezado de su sitio que se verá así:

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

Por lo general, se vincula a la captura de pantalla de su sitio en el tema. Si eliminó el código del encabezado del archivo y en single.php, póngalo dentro del bucle y llame a la imagen en miniatura de su publicación en el elemento href, creo que funcionaría. Entonces se vería algo así como:

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

Esto significaría que si tiene botones Me gusta en las páginas que enumeran varias publicaciones, probablemente no tendrá una imagen. Si incluyó algún código condicional que lo eliminó solo en single.php, tendría la imagen normal en cualquier página con múltiples publicaciones y un botón Me gusta y la miniatura de la publicación cuando se utiliza la plantilla single.php. Entonces el código del encabezado sería:

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

Entonces todavía usarías el código para incluir la miniatura de la publicación en single.php.


3
Esto se marcó como posiblemente desactualizado, considere actualizar su respuesta (tal vez algo como "esto era en ese entonces, ahora eso funciona mejor").
Rarst

11

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

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

Agregue esta línea al encabezado de su página.

Alternativamente, puede usar mi complemento para hacer esto automáticamente.

Simplemente hace este trabajo y no se necesitan configuraciones.

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


5

Debe usar el Protocolo de gráfico abierto de Facebook. No estoy seguro de por qué la respuesta aceptada no es una de las muchas OG: respuestas relacionadas (que he votado) pero está equivocada.

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

Puede personalizar muchas cosas, incluyendo título, imagen, descripción, categoría, última actualización, etc., si usa Open Graph. Si usa estas otras medias soluciones, le falta toda la imagen.

Si no seguía el Protocolo OG para todo el trabajo de FB que hago, me despedirían.


1

Si haces lo siguiente:

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

Verá que Wordpress genera el html requerido para mostrar la imagen, no solo el SRC, que es lo que realmente desea.

Haciendo algo como:

<?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; ?>" />

solo te da la URL. Probablemente sea el camino largo y probablemente pueda acortarse, pero definitivamente soluciona el problema.

Espero que esto te ponga en el camino correcto.

Mate.




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

Este método funciona para "me gusta": s, pero más adelante si desea compartir un enlace en su registro (por ejemplo), esta imagen se selecciona automáticamente.

Sin esta metaetiqueta, puede seleccionar entre todas las imágenes del sitio vinculado.

¿Alguien sabe alguna forma de mantener la imagen "me gusta" estática pero aún así te hace elegir una imagen al compartir una URL?


0

OK, escribí un poco de javascript para completar el Meta og: imagen con la imagen destacada de mi elección. Es un hack de una sola vez que agrega a su archivo de encabezado.

En mi publicación de WordPress, agrego la identificación "imagen destacada" (sé que con WordPress posterior está integrado, estoy en una antigua).

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

Escribo una metaetiqueta para la imagen og: con un marcador de posición, como el registro de mi blog. Agregue "id =" metaimagen "a la etiqueta, es decir

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

Luego agregue este javascript en el encabezado:

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

Use wp_enqueue_script()para cargar Javascript en WordPress.
fuxia

¿Esto realmente funciona? Ya probé algo similar sin éxito: el depurador de Facebook no reconoce mi imagen. No creo que esté analizando el JavaScript.
benedict_w
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.