Botón personalizado para compartir en Facebook con título, URL e imagen personalizados en WordPress

Question

Botón personalizado para compartir en Facebook con título, URL e imagen personalizados en WordPress

27 ago 2014, 10:12:56

Vistas: 40.4K

Votos: 1

En mi página de artículos hay un botón para compartir (mediante el plugin AddThis).

Cuando hago clic para compartir en Facebook, toma la URL y el título, pero muestra otra imagen diferente. Por ejemplo.

Intenté hacer un botón personalizado para compartir como el siguiente, pero cuando hago clic no sucede nada.

<?php
    $title = the_title();
    $url = the_permalink();
    $summary = urlencode('Mensaje personalizado que resume de qué trata tu pestaña, o simplemente un mensaje simple para que la gente revise tu pestaña.');
    $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
?>
    <a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;&p[images][0]=<?php echo $image[0];?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">
        ¡Compartir personalizado en Facebook!
    </a>

También he puesto etiquetas Open Graph en mi header.php entre las etiquetas <head>:

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
<meta property="og:title" content="<?php the_title(); ?>" /> 
<meta property="og:description" content="" />  
<meta property="og:image" content="<?php echo $image[0]; ?>" /> 
<meta property="og:video" content="" /> 
<meta property="og:video:width" content="560" />  
<meta property="og:video:height" content="340" />  
<meta property="og:video:type" content="application/x-shockwave-flash" />

Todas las publicaciones de mi sitio web deberían poder compartirse en Facebook y Twitter con su URL, título, imágenes y descripción. Aquí hay un enlace de referencia que funciona.

user3209031

121

personalización facebook

Todas las respuestas a la pregunta

¿Qué tal si usas la variable u para compartir tu URL y dejas que Facebook obtenga el contenido usando etiquetas Opengraph?

Algo como esto

<a onClick="window.open('http://www.facebook.com/sharer.php?u=<?php echo $url; ?>', 'sharer', 'toolbar=0,status=0,width=548,height=325');" target="_parent" href="javascript: void(0)">¡Compartir personalizado en la página de Facebook!</a>

Carlos Faria

487

27 ago 2014 10:29:40

Comentarios

oye gracias por favor revisa mi enlace de referencia actualizado... me refiero al sitio web que usa tales características

user3209031

27 ago 2014 10:32:01

oye como dijiste hice eso... pero aún no funciona, por favor revisa el enlace de demo

user3209031

27 ago 2014 10:36:09

user3209031 121 · Accepted Answer · 2014-08-27T13:29:59Z

Después de buscar por aquí y por allá durante mucho tiempo, encontré la solución para lo anterior:

Reemplacé la etiqueta meta anterior con lo siguiente:

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );  ?>

<?php if($image[0] != "" ){ ?>

<meta property="og:image" content="<?php echo $image[0]; ?>"  >

<?php } else { ?>

<meta property="og:image" content="logo.png"  >

<?php } ?>


<meta property="og:image:width" content="3523" >

<meta property="og:image:height" content="2372" >

<meta property="og:url" content="<?php echo the_permalink(); ?>"  >

<meta property="og:title" content="<?php echo the_title(); ?>"  > 

<meta property="og:site_name" content="Thefansworld" />

<meta property="og:description" content="" >  

<meta property="fb:app_id" content="3668661019" >

<meta property="fb:admins" content="" >

 <?php endwhile; wp_reset_query(); ?>

Pero todavía algunas PUBLICACIONES me dan imágenes incorrectas y después de investigar encontré:

Cuando Facebook extrae una página web desde una URL, almacena en caché su contenido para más tarde. Esto significa que si Facebook alguna vez extrae datos de tu sitio, y luego tu sitio cambia (por ejemplo, cambian las etiquetas og:image), Facebook no cambiará la imagen porque ya tiene todo almacenado en caché en su lado.

Intenta visitar la página del Depurador de Facebook y revisa lo que Facebook "ve". Usar esta herramienta obliga a Facebook a actualizar los datos de la URL proporcionada. Esta es la mejor manera de depurarlo.

Cuando te asegures de que Facebook "ve" las etiquetas og:image correctas, entonces verifica que las imágenes en og:image tengan el ancho/alto mínimo adecuado (todo está explicado en el depurador de fb).

Facebook no usará una imagen de og:image si no cumple con los criterios de FB. Recomiendo encarecidamente esta herramienta cada vez que haya problemas con el contenido de tu sitio en FB.

Espero que esto ayude a alguien. Y si me equivoco en algún lado, por favor házmelo saber :)