Problemas para compartir un post en Facebook

Mi hijo me dice -Traté de compartir un post de tu blog en Facebook pero en lugar de publicar el post con la primer imagen, te promociona los datos del blog y pone la imagen que se le ocurre. ¿No lo podés arreglar?-

La verdad es que ya hacía mucho tiempo que en algunos de mis blogs el tema de compartir en Facebook funcionaba relativamente bien y en otros directamente bailaban un tango al compás.

Primero pensé que se trataba de un problema de algunos de los servicios de Social Sharing que utilizo y que les comente en ésta entrada, pero no, el tema era muy conocido en la red y afecta a todos por igual. Incluso si usamos el botón de Facebook que provee Blogger tendremos el mismo problema.

La solución la encontré en Vagabundia, el blog de J.Miur en esta entrada :

http://vagabundia.blogspot.com/2012/01/mejoras-para-compartir-entradas-en.html

y aunque no es la solución perfecta nos indica como sortear el problema de que Blogger no nos permita establecer los datos necesarios en las etiquetas META correspondientes que deben estar SI o SI en el HEAD de la plantilla para que sean leídas correctamente por Facebook.

Olvidense.

Para los que les interese yo dejé como antes mis antiguos botones para compartir y el de Facebook lo reemplacé en algunos blogs y en otros lo agregué de la manera que sigue.

Un pequeño CCS, como para posicionar la imagen a mi gusto. Lo ubiqué antes de ]]></b:skin>

.shareface{
        margin:10px 0px -35px 0px;
}

Podrás ajustar luego la altura dentro del pie del post que más te agrade.

Luego debes buscar el código:

 <div class='post-footer-line post-footer-line-1'>

o
 
 <div class='post-footer'>

o el lugar donde hayas puesto el resto de tus botones sociales y pegar debajo lo siguiente.

<div class='shareface'>
<b:if cond='data:post.firstImageUrl == &quot;&quot;'>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=URL_IMAGENxDEFECTO\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'><img src='https://lh5.googleusercontent.com/-mV4cTOHgwbM/UTzsbL2gNxI/AAAAAAAAdOQ/4VGL2VxGyPg/s82/facebook_compartir.png'/></a>
<b:else/>
  <a expr:onclick='&quot;window.open(\&quot;http://www.facebook.com/sharer.php?s=100&amp;p[title]=&quot; + data:post.title + &quot;&amp;p[summary]=&quot; + data:post.snippet + &quot;&amp;p[url]=&quot; + data:post.url + &quot;&amp;&amp;p[images][0]=&quot; + data:post.firstImageUrl + &quot;\&quot;,\&quot;sharefb\&quot;,\&quot;toolbar=0,status=0,width=548,height=325\&quot;);&quot;' href='javascript: void(0)'><img src='https://lh5.googleusercontent.com/-mV4cTOHgwbM/UTzsbL2gNxI/AAAAAAAAdOQ/4VGL2VxGyPg/s82/facebook_compartir.png'/></a>
</b:if>
</div>

Recuerden realizar una copia de seguridad antes de cualquier experimento.

Guardar y listo.

Les recomiendo que carguen la imagen del botón en sus propios servidores para evitar problemas con el mío. Copien y guarden esta imagen o usen la que les agrade más. Una vez subida copien y carguen su URL para reemplazar el código siguiente:

https://lh5.googleusercontent.com/-mV4cTOHgwbM/UTzsbL2gNxI/AAAAAAAAdOQ/4VGL2VxGyPg/s82/facebook_compartir.png

Al terminar la diferencia es evidente. Mira el resultado de este mismo post compartido en Facebook mediante el servicio ShareThis:

 y ahora el resultado con éste botón de Facebook agregado.

En Facebook incluso se ve mejor