Tu Guía para Poner Botones para Compartir de AddThis en la Versión Web y Móvil de Blogger
Los botones de redes sociales nos ofrecen una vía efectiva para que los usuarios del blog compartan nuestro contenido. Por ello es importante tenerlos en las entradas y mostrarlos tanto en la versión Web, como la versión móvil.
Esta guía te ayudará a colocar botones para compartir de AddThis y se van a ver tanto en la versión de web como la móvil de Blogger.
Los botones aparecerán debajo de la entrada, y lucirán igual en ambas versiones, buscando más consistencia en el diseño de tu blog.
Para que todo luzca más estético y profesional, vamos a agregarlos en una sección que crearemos para tal fin, la cual resaltaremos usando bordes, y además centraremos los botones. Dicha sección aparecerá al ingresar a las entradas individuales.
También colocaremos un texto invitando a los usuarios a compartir el contenido arriba de los botones.
He elegido usar Addthis, por dos razones: es un servicio confiable que goza de gran popularidad y Blogger no ofrece hasta ahora soporte al botón de Pinterest en la versión móvil. Y siendo Pinterest un medio social de gran importancia para la difusión de contenidos, sobre todo en aquellos blogs que ofrecen contenido muy visual como los blogs de fotografía, moda, cocina, etc., resulta muy conveniente tenerlo disponible.
Así es como lucirá la sección con los botones en las entradas:
Esta guía está dividida en 5 partes:
1) Habilitando tu plantilla para que funcionen los botones en la versión móvil
2) Obtener el código de los botones de Addthis
3) Poner el código de los botones en la plantilla
4) Comprobando que se visualice la sección con los botones en la versión móvil
5) Comprobar los resultados de la implementación de los botones orientados a la experiencia de usuario usando PageSpeed Insights.
Si quieres ver los botones en acción, entonces échale un vistazo a la demostración:
Demostración
Parte 1. Habilitando tu plantilla para que aparezcan los botones en la versión móvil
Para que los botones aparezcan en la versión móvil, es necesario colocar el código de los botones en el código de la plantilla que corresponde a la versión móvil (y que veremos en la parte 3), pero además, hay que tener seleccionada la opción: "Personalizado" al elegir la plantilla para móviles.
Si es que no la tienes seleccionada, simplemente vas a Plantilla, luego haz click en el icono de rueda dentada o engranaje que aparece en la sección de la plantilla móvil:
Luego, selecciona la opción que dice: "Personalizado" y guarda el cambio. De ese modo podrás personalizar la plantilla para móviles y aparecerán los elementos que agregues en las entradas cuando pongas el código del elemento respectivamente en el código que corresponde a la versión móvil en la plantilla.
También, asegúrate que en la plantilla, aparezca la etiqueta de apertura del
<body> como se muestra a continuación:<body expr:class='"loading" + data:blog.mobileClass'>Si utilizas una plantilla original de Blogger, lo más seguro es que la etiqueta
<body> ya aparezca con esos elementos. Si solo aparece así: <body>, cámbiala por la linea de código anterior. De ese modo se aplicará el CSS que agreguemos para personalizar la sección de los botones en la versión móvil, y en general servirá para poder personalizar la plantilla para móviles.Otra cosa que necesitas hacer, es deshabilitar los botones para compartir de Blogger si los usas (seguramente no querrás tener más botones) desde la configuración de las entradas, y que accedes si vas a Diseño y haces click en Editar en la sección que dice "Entradas".
Parte 2. Obtener el código de los botones en AddThis
Obtener el código de los botones es muy sencillo. Solo sigue estos pasos:
- Ve a la página de AddThis, y crea una cuenta o accede usando tu cuenta de Google+, Twiter o Facebook.
- Una vez que accedas, haz click en: "Tools" que aparece en el menú superior de la página.
- Encuentra el complemento que dice: "Sharing Buttons", y haz click en "Get code".
- Una vez que se abran las opciones de configuración, selecciona: "Select your Own", de ese modo podrás elegir los botones que deseas mostrar. Elige un máximo de 5 botones y colócalos en el orden de tu preferencia. Simplemente arrástralos desde la columna izquierda a la derecha, tomando en cuenta que aparecerán de izquierda a derecha al colocarlos de arriba hacia abajo.
Notas: Otra opción disponible es la auto personalización (Auto Personalization) que consiste en mostrar de forma aleatoria los botones en las entradas. Si deseas probar esta opción, también elige mostrar un máximo de 5 botones en la opción que dice: "Number of Buttons", con el fin de que aparezcan todos sin problemas de forma alineada en resoluciones de pantalla de 320 píxeles en adelante, en los dispositivos móviles. Recuerda que el botón "+" de Addthis, ofrece un listado con todas las opciones de botones disponibles para compartir, así que puede ser conveniente que lo incluyas, aunque es tu elección. El tamaño de los botones será el más grande disponible (32px X 32px) y que aparece seleccionado por defecto en Size (la primera opción). En Show Share Counts aparece por defecto seleccionada la opción de botones sin la burbuja, así hay que dejarlo. - Una vez que configures las opciones, tendrás disponible el código de los botones. Copia los dos códigos que te facilitan. No olvides activar los botones haciendo click en el botón que dice: Activate.
No se te vaya a pasar activar los botones haciendo click en el botón que dice "Activate" y que aparece en el recuadro con los dos códigos generados, abajo a la derecha. De otro modo no funcionarán.
Parte 3. Insertar el código de los botones y el CSS que definirá la apariencia de su sección
Ahora viene lo bueno. Hay que poner el código de los botones en el código de la plantilla, para que se visualicen tanto en la versión Web como la versión móvil de Blogger. Tambien agregarás el CSS que define la apariencia de la sección. Ya teniendo los dos códigos listos, el que aparece en el Paso 1 (Step 1) y en el paso 2 (Steep 2), sigue estos pasos:
- Primero agregas el CSS, que servirá para definir la presentación de la sección de los botones. En este caso colocaremos dos bordes, uno arriba y otro abajo, definiremos algunas reglas para separar los botones, de tal modo que cumplamos con las especificaciones de Google para garantizar una buena experiencia a los usuarios que visiten el blog en dispositivos móviles. Ve a: Plantilla > Editar HTML y pon el siguiente CSS después de :
]]></b:skin>
<b:if cond='data:blog.pageType == "item"'><style type="text/css">.compartir{width:auto;display:inline-block;border-top:2px solid #CECECE;border-bottom:2px solid #CECECE;margin:16px 0;padding:14px 0 18px;position:relative}
.compartir p{font-size:125%;margin:0;padding:0;}
.addthis_sharing_toolbox{display:table;margin:22px auto 0;padding-left:10px}
.at-share-tbx-element .at-share-btn{margin-right:12px!important;}
.mobile .at-share-tbx-element .at-share-btn{margin-right:30px!important}
.mobile .addthis_sharing_toolbox{padding-left:0}
.mobile a.at-share-btn:last-child{margin-right:0!important}
.mobile a.at-share-btn:first-child{margin-left:-1px!important}
.mobile .compartir p{font-size:135%}a.at-share-btn:hover{opacity:0.8}</style></b:if>
He resaltado de color verde, el código del color del borde, para que puedas editarlo, usando una tabla de colores HTML. El color tiene que ser el mismo, a menos de que quieras lo contrario ;) El CSS se cargará al ingresar a las entradas. - Estando en el editor, haz click dentro del cuadro con el código, cuidando no mover nada, luego presiona las teclas Ctrl y F simultáneamente, para que se active el buscador del editor.
- En el campo del buscador pon:
<body expr:class='"loading" + data:blog.mobileClass'>Y da enter. Una vez que localices esa linea, pones debajo el script que te facilita AddThis y que aparece primero (donde dice Step 1), como se muestra a continuación:
<b:if cond='data:blog.pageType == "item"'>
<!--Aquí va el script-->
</b:if>
La parte que he resaltado de naranja, la vas a quitar y vas a poner ahí el script que te facilita AddThis, donde dice paso 1 (Steep 1). Por ejemplo, el script de mi cuenta se ve similar a este:<script async='async' src='//s7.addthis.com/js/300/addthis_widget.js#pubid=karla' type='text/javascript'/>Si te fijas después de la extención:.jsfigura el nombre de usuario de la cuenta. He agregado un código condicional envolviendo el script y que he resaltado de azul, para que el script se cargue en las entradas individuales. Si utilizas otros complementos que necesitan ser mostrados también en la página principal, y que usen el mismo script, quita ese código resaltado de azul y solo pon el script. - Pon en el campo de búsqueda del editor el siguiente código:
<div class='post-footer-line post-footer-line-3'>. Esta linea, aparece solo una vez en la plantilla, así que no tendrás problemas para saber cuál es. Dentro de ese div se encuentra el código que hace que aparezca el perfil del autor. Ve un poco hacia abajo y verás esta etiqueta:</b:includable>, que reconocerás fácilmente porque está arriba de:
<b:includable id='postQuickEdit' var='post'>. Justo arriba de esa </b:includable> pones el código de la sección con los botones (el del paso 2) así:
<b:if cond='data:blog.pageType == "item"'><div class='compartir'><p>Si te gusta, o crees que la entrada será útil para tus amigos o contactos compártela. ¡Gracias!</p><div class='addthis_sharing_toolbox'/></div></b:if>
El código resaltado de naranja, es el código que aparece en el paso 2 (Step 2) generado por AddThis, y que sirve para que aparezcan los botones. Se supone que debe ser el mismo que he usado, pues se trata del mismo complemento. De cualquier modo ya lo tienes generado así que lo vas a poder comprobar.
El texto resaltado de verde en el código, es el texto que se mostrará arriba de los botones. Puedes editarlo/cambiarlo por cualquier otro.
El código resaltado de azul, es el código condicional de Blogger que sirve para que la sección con los botones aparezca al ingresar a las entradas. - Pon en el campo de búsqueda esta linea:
<b:if cond='data:top.showMobileShare'>y da enter. Vas a ver todo este código:
<div class='post-footer-line post-footer-line-2'> <b:if cond='data:top.showMobileShare'> <div class='mobile-link-button goog-inline-block' id='mobile-share-button'> <a href='javascript:void(0);'> <data:shareMsg/> </a> </div> </b:if> <b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'> <data:post.dummyTag/> </div> </b:if> </div> </div> </div>
Debajo del último</div>que he resaltado de azul pones el código de la sección con los botones, para que aparezcan en la versión móvil:
<b:if cond='data:blog.isMobile and data:blog.pageType == "item"'><div class='compartir'><p>Si te gusta, o crees que la entrada será útil para tus amigos o contactos compártela. ¡Gracias!</p><div class='addthis_sharing_toolbox'/></div></b:if>
Al igual que en el paso anterior, puedes editar el texto resaltado de verde. El que aparece de color naranja es el segundo código que facilita AddThis (que aparece en Step 2) y que sirve para que se muestren los botones. ¡ equivale al signo de apertura de exclamación: ¡, no vayas a creer que es un error ;) - Finalmente verifica en vista previa y si todo luce bien guarda los cambios. Aunque no verás los botones te asegurarás que todo luce bien en la plantilla, en la página de inicio.
Y ¡listo! Ya habrás agregado una sección con los botones para compartir de AddThis y aparecerán tanto en la versión Web como la versión móvil de Blogger ;)
Parte 4. Comprobando que se visualice la sección con los botones en la versión móvil
Ahora lo que haremos es comprobar que la sección con los botones se visualice en la versión móvil de Blogger y lo haremos desde el navegador, usando el modo de emulación móvil de las herramientas para desarrolladores de Google Chrome.- Desde el navegador Google Chrome dirígete a una entrada individual del blog.
- Una vez que estés en la entrada, pulsa la tecla F12 para acceder a las herramientas para desarrolladores.
- Activa el modo de dispositivo haciendo click en el icono
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.
- Luego, arriba en la ventana identifica la lista desplegable que dice: <Select model>
- Desde esa lista, selecciona el dispositivo móvil en donde quieres comprobar el resultado, luego pulsa la tecla F5 para volver a cargar la página y Chorme la emule correctamente tomando en cuenta el dispositivo que elegiste.
- Verifica el resultado. Habiendo cargado la página con F5, el navegador emulará la página y será presentada como si fuera vista en el dispositivo que elegiste y podrás ver cómo luce la sección que has agregado ;)
Recuerda volver a cargar la página con F5, cada vez que cambies la selección del dispositivo.
Parte 5. Comprobar los resultados orientados a la experiencia de usuario usando Pagespeed Insights
He actualizado este apartado. Originalemnte recomendaba ir a la página de PageSpeed Insights de Google, para que comprobaras que no hay un problema con los botones en términos de usabilidad en los dispositivos móviles. Llegué a la conclusión de que PageSpeed no es capaz de analizar los botones, pues manipulándolos con CSS hasta solaparlos y disminuir dramáticamente el alto y ancho, no me hizo ninguna advertencia.Sin embargo, he seguido la recomendación de Google, que especifica dejar una separación por lo menos de 32 píxeles entre cada botón cuando miden menos de 48 píxeles de ancho y alto.
Se puede apreciar en esta regla de CSS para la versión móvil del paso 1 de la parte 3:
.mobile .at-share-tbx-element .at-share-btn{margin-right:30px!important} Son 30 píxeles de margen a la derecha más los 2 píxeles que envía por defecto AddThis en su CSS (2px a la derecha y 2px a la izquierda), suman 34 píxeles.
Notas finales
- El botón +1 seguirá apareciendo en la sección debajo de las entradas aunque hayas quitado la selección de los botones para compartir de Blogger desde las opciones de configuración de las entradas. Dicho botón solo sirve para hacer +1 a una entrada no para compartirla en Google+ en la versión móvil. Si quieres quitarlo hay que eliminar el código de éste desde el código de plantilla y es este que aparece en el paso 5 de la parte 3 y que resalté de color lila, y que también muestro a continuación:
<b:if cond='data:top.showDummy'> <div class='goog-inline-block dummy-container'> <data:post.dummyTag/> </div> </b:if>
Etiquetas:Editar plantilla,Redes Sociales,Tutoriales