Te voy a compartir una página que crea automáticamente los botones para compartir los temas o entradas en las redes sociales y además te voy a explicar cómo se puede configurar el código después de obtenerlo.
Lo primero que debes hacer es dirigirte a está página AddToAnny y elegir las redes sociales, recomiendo máximo 5.
Las puedes elegir desde la parte que dice «Choose services...»
Luego solo debes hacer clic sobre los íconos de las redes sociales que quieres usar, y retirar las que no quieras arrastrándolas hasta la parte de la izquierda.
Ahora viene la configuración, para esto debes hacer clic sobre la parte que dice «More options..» Aquí podrás dejar el idioma Español desde la parte que dice «Language». También puedes agregar el nombre de tu página o blog en la parte que dice «Page name».
En la parte para agregar la URL de tu página o blog te recomiendo no agregarla porque esto puede hacer que se comparta solo esa url dependiendo del código que vayas a usar.
Al final puedes obtener un código como el siguiente en el que dejé solo a Facebook, Telegram, Twitter y Whatsapp.
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-title="NOMBRE DE TU PÁGINA">
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter"></a>
<a class="a2a_button_whatsapp"></a>
<a class="a2a_button_telegram"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.locale = "es";
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Este código lo debes agregar en un gadget HTML-Javascript en la parte de diseño. Puedes ubicarlo debajo del cuadro de la entrada o en una columna. Esto ya dependerá del número de redes sociales que quieras usar y del tamaño de los botones, ya que si por ejemplo dejas solo 4 probablemente no tendrás problema dejando el gadget en una columna. Si no usas Blogger puedes hacer clic sobre la pestaña «Get» que está en la parte superior de la página y seguir las instrucciones para la plataforma en la que tengas tu página.
Después de agregar el código notarás dos cosas, la primera, que los botones son pequeños, algo que no nos sirve si acceden a la página desde un dispositivo móvil, y la segunda, que hay un botón con una cruz al inicio, este botón permite que al hacer clic sobre él se visualice una lista completa de las demás redes sociales.
Para retirar el botón de la cruz retira la siguiente línea del código:
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
TAMAÑO DE LOS BOTONES
Ahora vamos con el tamaño de los botones, esto es algo muy fácil de modificar, lo puedes hacer desde la primera línea del código cambiando el 32 por el número de tu preferencia.
<div class="a2a_kit a2a_kit_size_32 a2a_default_style" data-a2a-title="NOMBRE DE TU PÁGINA">
Puedes dejar por ejemplo 48, 56, 64 o 72
ESPACIO ENTRE LOS BOTONES
Esto también es algo muy fácil, solo debes agregar un comando que se usa en el HTML para dar una margen, style="margin-left: 1.5em;" y lo agregamos a partir de la línea de la segunda red social, esto hará que sobre todo en los dispositivos móviles se pueda tocar cualquiera de los botones directamente, quedaría así:
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_72 a2a_default_style" data-a2a-title="NOMBRE DE TU PÁGINA">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter" style="margin-left: 1.5em;"></a>
<a class="a2a_button_whatsapp" style="margin-left: 1.5em;"></a>
<a class="a2a_button_telegram" style="margin-left: 1.5em;"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.locale = "es";
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
CÓMO DEJARLOS FLOTANDO AL FINAL DE LA PÁGINA O EN LA PARTE IZQUIERDA
Esto también es muy fácil, solo hay que cambiar la primera línea del código, recuerda volver a cambiar el número que dejaste anteriormente para el tamaño de los botones.
Para dejarlos flotando en la parte inferior de la página cambia la primera línea del código por esta, recuerda volver a cambiar la parte del número por el de tú elección.
<div class="a2a_kit a2a_kit_size_72 a2a_floating_style a2a_default_style" data-a2a-scroll-show="100" data-a2a-title="PÁGINA DE EJEMPLO" style="bottom:0px;">
El código de ejemplo para dejarlos flotando en la parte inferior quedaría así:
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_72 a2a_floating_style a2a_default_style" data-a2a-scroll-show="100" data-a2a-title="NOMBRE DE TU PÁGINA" style="bottom:0px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter" style="margin-left: 1.5em;"></a>
<a class="a2a_button_whatsapp" style="margin-left: 1.5em;"></a>
<a class="a2a_button_telegram" style="margin-left: 1.5em;"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.locale = "es";
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
En la parte inferior se alinea desde la izquierda, aunque todo depende del ancho del lugar donde se vaya a colocar. Pero si quieres dejarlo totalmente centrado lo puedes hacer con la siguiente línea pero debes tener en cuenta dos cosas, el tamaño de los botones y su cantidad, ya que si el lugar donde se van a colocar no da el ancho los botones se ubicarán en dos filas y no se visualizarán bien, para este caso se tendría que dejar menos redes sociales, máximo 4. ¿No has dejado tu página con un ancho para resoluciones HD? Visita este TEMA.
<div class="a2a_kit a2a_kit_size_72 a2a_floating_style a2a_default_style" data-a2a-title="NOMBRE DE TU PÁGINA" style="bottom:0px; left:50%; transform:translateX(-50%);">
Para dejarlos flotando en la parte de la izquierda tendrías que cambiar también el código del espacio entre los botones, solo cambia el left por top, quedaría así: style="margin-top: 1.5em;" Lo bueno de dejarlos a la izquierda es que te permite agregar más botones. La primera línea que debes dejar es la siguiente:
<div class="a2a_kit a2a_kit_size_72 a2a_floating_style a2a_vertical_style" data-a2a-title="NOMBRE DE TU PÁGINA" style="left:0px; top:150px;">
El código de ejemplo para dejar los botones flotando a la izquierda quedaría así:
<!-- AddToAny BEGIN -->
<div class="a2a_kit a2a_kit_size_72 a2a_floating_style a2a_vertical_style" data-a2a-title="NOMBRE DE TU PÁGINA" style="left:0px; top:150px;">
<a class="a2a_button_facebook"></a>
<a class="a2a_button_twitter" style="margin-top: 1.5em;"></a>
<a class="a2a_button_whatsapp" style="margin-top: 1.5em;"></a>
<a class="a2a_button_telegram" style="margin-top: 1.5em;"></a>
</div>
<script>
var a2a_config = a2a_config || {};
a2a_config.locale = "es";
</script>
<script async src="https://static.addtoany.com/menu/page.js"></script>
<!-- AddToAny END -->
Eso sería todo, espero que esta información te sea muy útil.
Gracias.
Cómo poner los botones addthis, cómo configurar los botones de addtoany, cómo le agrego a mi página botones grandes de facebook para dispositivos móviles, agregar a blogger botones grandes para compartir las redes sociales, agregar botones para las redes sociales que queden flotando, botones flotantes para compartir las redes sociales, botones que aparecen cuando se baja en la página, botones grandes para compartir las redes sociales, botones para compartir las redes sociales que se vean grandes en blogger,
No hay comentarios:
Publicar un comentario
Gracias por comentar.