En este post os traigo el tutorial para configurar el Plugin AddToAny Share Buttons.

Tener iconos sociales en tu página web para dar la posibilidad al usuario de compartir nuestro contenido en redes sociales es totalmente indispensable hoy en día.

Simplemente haces clic en un botón y tu post ya está compartido, ¿Genial verdad?

Dicho de otra manera si no tienes este tipo de elementos en tu web simplemente tu contenido no va a ser compartido en redes sociales.

¿Quién va a molestarse en copiar la URL y crear un Tuit o una publicación en Facebook?

Nadie, esa es la verdad, los usuarios somos más vagos que las piedras del suelo.

Por lo tanto hay que insertar esos botones sociales en nuestra web para mejorar la visibilidad en las redes sociales.

En otro tutorial de SensacionWeb vimos como configurar Monarch, un plugin Premium de botones sociales de Elegant Themes.

Pero en esta ocasión vamos a configurar AddToAny Share Buttons un plugin gratuito muy bueno que inserta botones sociales en nuestra web.

Plugin AddToAny Share Buttons

AddToAny Share Buttons es un plugin gratuito para incluir botones sociales y compartir nuestra página web en Redes Sociales. Tienes más de 400.000 instalaciones activas y un soporte activo y constante.

Características de Add To Any Share Buttons

• 115 botones sociales para elegir casi cualquier red social y servicio. Tiene algunos que otros plugin no tienen como el de WhatsApp y Telegram.
• Botón universal, es un tipo de botón que abre un panel con todos los botones sociales.
• Usar imágenes personalizadas como iconos.
• Versión móvil que queda genial en la parte de abajo del móvil.
• Iconos SVG para configurar los botones sociales a cualquier tamaño y que se vean perfectamente.
• Está optimizado con carga de forma asíncrona para que cargue antes o a la vez el contenido de la web.

Posiciones de los botones sociales:

• Barra flotante.
• Páginas y entradas.
• Página del blog donde se muestran las entradas.
• Encima y/o debajo del contenido de los post.
• En el Feed Rss.
• Páginas de archivos.
• Páginas de medios.
• Páginas de extractos.

Cómo configurar Add To Any Share Buttons

El plugin se instala desde el repositorio de WordPress, desde Plugins > Añadir Nuevo.

Una vez instalado sus opciones están en Ajustes > AddToAny

En la pestaña Standard configuraremos todos los botones sociales que podemos incluir menos los de la barra flotante.

Lo más normal es que solo se muestren los botones en los post, ya sea antes del contenido del post, después o en ambos lugares.

Icon Size: elegimos el tamaño de los iconos en pixeles, como los iconos de este plugin están en formato SVG podemos aumentarlos de tamaño sin miedo a que se desenfoquen.

Standalone Buttons: Pulsando en el botón Add/Remove Services podemos añadir y quitar los iconos de las redes sociales y servicios que queramos.

Los más comunes o los que pondría yo son:

• Facebook
• Twitter
• Google +
• Linkedin
• Correo
• Buffer (Es una herramienta de gestión de redes sociales muy utilizada por los profesionales de Social Media)
• Whatsapp

Universal Button: Es un icono especial que muestra un menú con todas las redes sociales y servicios disponibles del plugin.

• Podemos personalizar su icono subiendo una imagen e indicando su URL.
• La opción Text Only convierte el botón en un texto con link.
• Con la opción Ninguna el botón universal se desactiva.
• La opción Show Count muestra un contador de todas las veces que ha sido compartido el contenido.

Ubicación de los botones sociales

Sharing Header: Es el título que se muestra encima de los botones sociales.

Ubicación del Botón: Esta opción es muy importante, aquí elegimos donde queremos que se vean estos botones sociales. (Excepto la barra flotante que se configura en otra pestaña.)

Display at the (Bottom, Top, Bottom and Top) of posts: Muestra los botones dentro del contenido del post, antes, después o antes y después del contenido. En mi opinión esta opción es la más utilizada, ya que es donde tienen sentido los botones sociales y donde menos molesten al usuario.

¡Marcar al menos esta opción para que se muestren los iconos en el contenido de los post!

Display at the bottom of posts on the front page: Muestra los botones sociales en cada post en la página raíz donde se muestra el listado de los post.

Display at the bottom of posts on archive pages Muestra los botones en la página de archivos.

Display at the bottom of posts in the feed Muestra los iconos sociales en el Feed Rss.

Display at the bottom of excerpts Muestra los botones sociales en los extractos de los post.

Display at the bottom of pages Muestra los botones sociales en las páginas.

Display at the bottom of media pages Muestra los botones sociales para las páginas de medios.

Personalizar los botones Sociales

Podemos personalizar los colores de los iconos sociales copiando y pegando código JavaScript o código CSS en las casillas correspondientes.

Podemos ver la documentación del plugin donde nos muestran varias opciones de los códigos.

Para personalizar el menú que aparece cuando pulsamos el botón universal, podemos pulsar en el botón “Abrir el personalizador de estilos” y nos llevará a un panel de opciones donde podremos elegir sus colores.

Una vez hemos personalizado el menú a nuestro gusto tenemos que copiar el código que genera y pegar en el campo “Additional JavaScript.”

También podemos personalizar los botones sociales con la imagen que nosotros queramos, únicamente tenemos que indicar la URL de la carpeta del servidor donde se encuentran las imágenes que queremos utilizar.

Para que funcionen y el plugin los reconozca hay que ponerle el mismo nombre a los archivos de estas imágenes que los iconos de AddToAny (Que se encuentran en plugins/add-to-any/icons).

Es decir que si el icono de Addtoany se llama twitter.png, tendremos que llamar igual a nuestro icono que queramos utilizar para Twitter.

Configurar la barra de iconos flotante

Para configurar la barra con iconos de las redes sociales que se muestra siempre en un lateral de la pantalla tenemos que ir a la pestaña Floating del plugin.

En AddToAny Share Buttons hay dos barras flotantes, Vertical Buttons es la barra que se muestra en los laterales cuando la pantalla del usuario es grande, como la de un ordenador por ejemplo.

Ubicación del Botón: configuramos si queremos que la barra se muestre a la izquierda, a la derecha o que no se muestre.

Responsiveness: En esta opción elegimos que se muestre cuando la pantalla es más grande de 980 píxeles, de esta forma esta barra se mostrará en dispositivos con pantallas grandes como portátiles y ordenadores.

Position: elegimos la cantidad de pixeles de distancia que tiene la barra lateral respecto a la parte superior de la pantalla.

Offser: en esta opción podemos poner un margen entre la barra lateral flotante y el final de la ventana del navegador.

Icon size: es el tamaño en pixeles de los Iconos sociales.

Después puedes configurar las opciones de Horizontal Buttons que es la segunda barra flotante, que se muestra cuando las pantallas son pequeñas, como las de un teléfono móvil.

Esta barra se muestra en la parte inferior del móvil o Tablet permitiendo tener una barra de iconos para compartir que está muy bien integrada y apenas molesta a los usuarios móviles.

Las opciones son las mismas que las del apartado anterior únicamente cambia la opción Responsiveness que en este caso mostrará la barra lateral cuando la resolución de pantalla sea más pequeña que los píxeles indicados.

Como quitar la barra flotante en la página de inicio

Si quieres que los botones sociales no se muestren en la página de inicio o en cualquier otra página, la opción para hacerlo se encuentra dentro de la propia página. Si la desmarcas los botones sociales no aparecerán.

Widget y Short Code de Add to Any

Si lo que queremos es poner los botones sociales en cualquier parte de nuestro podemos utilizar el Shortcode [addtoany] (Existen más ShortCodes con funciones avanzadas en la página del plugin).

Además también podemos utilizar un Widget de Add to Any para añadir los botones sociales fácilmente en la barra lateral o Footer de nuestro tema.

Conclusión

¡Y ya está! Si has llegado hasta aquí es que eres un crack y ya tienes los botones de las redes sociales configurados en tu página web.

Add To Any es una buena elección para insertar los botones sociales.

Además es gratuito y cuenta con un buen soporte y uso en la comunidad.

Y por si fuera poco tiene los botones de WhatsApp y Telegram que se echan en falta en la mayoría de estos plugins.