Cómo poner el Botón "Me gusta" para que se Compartan las Entradas desde la Página Principal
Una usuaria de Blogger me comentaba que había agregado el botón "me gusta", pero que todas las entradas mostraban el mismo número en la burbuja que indica la cantidad de veces que se ha compartido el contenido del sitio.
Su mensaje decía más o menos así:
He colocado los botones "me gusta y compartir" de facebook en una misma línea, pero no entiendo porqué aparece en el "bocadillo" con el número de veces compartido siempre el mismo, en todas las entradas publicadas. ¿Hay alguna manera de arreglar eso?
El hecho de que el botón muestre el mismo número, se debe a que éste, está indicando el número de veces que se ha compartido la URL del blog, es decir, la página de inicio y no la respectiva entrada.
Para lograr que el botón genere un enlace a la entrada y no a la página principal o inicio del blog, cuando un usuario comparta el contenido, es necesario:
1) Hacer que el botón aparezca solo al ingresar a la entrada. Como será una página individual que incluye una sola entrada, automáticamente se generará el enlace a dicha entrada. Ahí no tendremos broncas. Bastará con usar código condicional de Blogger, encerrando o envolviendo el código del botón y misión cumplida. O...
2) Especificar la url del enlace a compartir usando código de Blogger. Hoy explicaré esta forma, ya que la usuaria que me contactó quería que el botón aparezca desde la página de inicio y se pueda compartir la entrada.
Para evitar confusiones voy a explicar de forma sencilla (éso espero) con pasos, cómo poner el botón para que aparezca desde la página de inicio y se comparta la entrada respectivamente. De tal modo que cualquier interesado pueda ponerlo ;)
Pasos
- Primero hay que agregar el siguiente código, mismo que Facebook facilita desde su página, a los que solamente agregué unos caracteres para que Blogger lo acepte. Este código debe estar después de la etiqueta <body>. Así que tendrás que ir a Editar HTML, buscar:
<body>con la ayuda de su buscador y que activas presionando las teclas "Ctrl" y "F" al mismo tiempo, y lo pegas después de dicha etiqueta.
<div id='fb-root'/>NOTA: Toma en cuenta que si ya agregaste por ejemplo el complemento para páginas (Page Plugin), ya habrás agregado el código anterior y por lo tanto, no necesitas volver a ponerlo.
<script>//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));//]]></script>
- Luego, hay que agregar el código para que se vea el botón en cada entrada. Para ello, hay que tener en cuenta dónde quieres que aparezca, para poder colocarlo, por ejemplo, debajo del título de la entrada, o al final de la entrada. Además tienes que elegir una de las composiciones disponibles del botón o dicho de una forma simple el "estilo de éste". Si quieres que el botón aparezca al final de la entrada, estando en el editor del código de tu blog, con la ayuda de su buscador y que ya activaste desde el paso anterior, busca la siguiente linea:
<div class='post-footer-line post-footer-line-1'>, y que sería la segunda de arriba hacia abajo ya que la vas a ver dos veces, y "arriba de esa linea de código", agregas el código que muestro a continuación:<div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'>
</div>
Si quieres que el botón aparezca debajo del título del blog, entonces busca esta linea:<div class='post-header'>que sería la segunda de arriba hacia abajo ya que también aparece dos veces, y pones el código debajo de ésta.
He resaltado de naranja el nombre del botón que es: button_count. Es el más utilizado, en éste aparece una burbuja a un lado que indica las veces que se ha compartido el contenido. Puedes poner cualquier de los que tienen disponibles:
standardbox_count
button_count
button
Y si quieres alguno de ellos, habrá que cambiar: button_count por el nombre que quieres en el código.
También puedes agregar otros atributos al código del botón, es decir, configurar algunos aspectos como el ancho máximo que puede tener y otras cosas de las que hablábamos en la entrada donde explico cómo agregarlo para que se comparta el blog. - Verificas en vista previa. Debería verse el botón debajo de la entrada. Si todo luce bien gurdas los cambios en Guardar plantilla y ¡listo!. Ya habrás agregado el botón y se compartirá la entrada desde la página de inicio.
Notas importantes
- El código que facilito en el paso 2, incluye un fragmento de código que hace que se genere el enlace a la entrada con el título, un resumen y la imagen si la entrada la tiene y si cumple con las especificaciones que Facebook pide para que se comparta la imagen . Ciertos aspectos que ayudan mucho en la forma que se comparte la entrada, es que la plantilla tenga un marcado como el de Shema.org (las plantillas nativas de Blogger ya vienen con dicho marcado), y que de preferencia utilice meta datos del protoco creado por Facebook llamado Open Graph.
- Si quieres que el botón se muestre también en la versión móvil de Blogger, hay que agregar el código del paso 2 de nuevo en la parte del código de la plantilla que corresponde a la versión móvil. Puede servirte la entrada donde explicaba cómo añadir los botones de AddThis. Específicamente en la Parte 3, paso 5, donde menciono qué linea de código que hay que identificar y donde pegar el código, con la diferencia de que, para poner el botón de Facebook habría que pegar el código del paso 2 que menciono aquí. También verifica lo que menciono en la primera parte de dicha guía/tutorial.
Espero sea útil ;)
Páginas útiles de Facebok que recomiendo leer:
https://developers.facebook.com/docs/plugins/share-button
https://developers.facebook.com/docs/sharing/best-practices#images
que dice: Toggle device mode al poner el puntero del ratón encima y que aparece en la barrita superior a la izquierda. Una vez activado el icono se pondrá de color azul. 
