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_countbutton_countbutton
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
Comments :
Post a Comment