Botones de compartir en redes sociales sin plugins en WordPress

AV
Adrián Vizcaíno
9 enero, 2019
Twitter + Facebook + Whatsapp + Linkedin en WordPress

Existen una gran cantidad de plugins que permiten añadir a las entradas de tu web los típicos botones para compartir en redes sociales, el problema de la gran mayoría de estos plugins es que añaden una gran cantidad de código que no al final no se usa lo que provoca una ralentización de la página web.

Hasta hace poco, usaba uno de estos plugins para mostrar los botones en mi blog, pero cuando me puse a optimizar la carga de mi página me di cuenta que eran muy lentos, así que probé a eliminarlo y cargarlo de forma manual. El resultado fue que obtuve 10 puntos mas en PageSpeed Insights al eliminar el plugin.

Creando el archivo de plantilla

Como seguramente usemos estos botones tanto en el loop del Home, como en el de categorías, tags, entradas…etc, vamos a crear una plantilla que iremos incluyendo en los lugares que queramos mostrar los botones. Llamaremos a nuestra plantilla ‘shared-buttons.php’, la guardaremos en la carpeta de nuestra plantilla y de momento contendrá lo siguiente:

Luego esta plantilla podremos incluirla donde queramos mediante la siguiente linea:

Definiendo los botones a redes sociales

Bien, ya que tenemos nuestra plantilla creada es hora de ir añadiendo los botones para redes sociales. Existen muchas redes sociales pero en este artículo nos vamos a centrar en las que considero más importante. Si queréis ver como sería en otra red social podéis pedirlo en los comentarios.

Facebook

Para crear un enlace de compartir deberemos añadir en nuestra plantilla el siguiente enlace que generará el botón de Facebook:

Facebook únicamente necesita la dirección de la página que queremos compartir y esa dirección se la indicamos automáticamente mediante el código ‘<?php the_permalink(); ?>’.

Twitter

A continuación del botón de Facebook añadiremos en una nueva linea el siguiente enlace para el botón de Twitter:

Indicaremos a Twitter la url de la página a compartir de la misma forma que hicimos con Facebook y además le indicaremos como texto el título de la página, esto lo hacemos mediante el código ‘<?php the_title_attribute(); ?>’.

Linkedin

Vamos ahora con el botón de Linkedin, de igual manera, a continuación del botón de Facebook añadimos una nueva linea con el siguiente código:

Este enlace espera una dirección y un título tal como ocurría con el enlace de Twitter

Pinterest

Creamos una nueva linea en nuestra plantilla y añadimos el siguiente código para incluir el botón de Pinterest:

Ya os habréis dado cuenta que este botón es un poco diferente. Aparte de la dirección de la página que le indicamos como siempre, también es necesario una imagen para poder compartir en Pinterest. Para ello lo que hacemos es obtener la imagen destacada de la publicación con la siguiente linea:

Whatsapp

Vamos con el último botón que añadiremos en una linea nueva de nuestra plantilla y copiaremos el siguiente código para ver el botón de Whatsapp:

Whatsapp es también muy sencillo, en este caso solo acepta un parámetro y en el pasaremos el título de la página y su dirección.

Bien, si hasta ahora habéis ido siguiendo el tutorial paso a paso, nuestro archivo ‘shared-buttons.php’ debería haber quedado así:

Dándole estilo a los botones

Si no has podido resistir la tentación y has comprobado como va quedando te habrás dado cuenta que solo se muestran unos enlace de texto. Eso es porque aún tenemos que darles los estilos necesarios.

El siguiente código deberemos copiarlo al final del style.css de nuestra plantilla para que puedan ser aplicados:

Mejorando el funcionamiento con javascript

El siguiente código lo que hará será que en vez de abrir la ventana de compartir en una pestaña nueva, la va a abrir en una ventana emergente. Para ello tenemos que añadir el siguiente código de Javascript a alguno de nuestros archivos de script de la plantilla:

Extra: Poner el icono de la red social en vez del texto

Para esto siempre recomiendo usar iconos por fuente. Para esto existe un recurso gratuito excelente que es FontAwesome. Accedemos a su página con el anterior enlace, copiamos el código ‘link’ que veremos y lo colocamos dentro de las etiquetas <head></head> de la cabecera de nuestra plantilla.

Con esto conseguimos poder usar los iconos de las redes sociales en los botones. Ahora os voy a dejar el código de nuestra plantilla ya con los iconos de cada red social:

Y listo, ya tenemos nuestros botones para redes sociales sin necesidad de plugins que ralenticen nuestra página y teniendo el control total sobre los botones. Si habéis seguido todo el tutorial el resultado final será este:

Recordar que podéis jugar con el CSS para darle otro aspecto a los botones, eso ya queda al gusto de cada uno.

¿Te ha parecido útil? Danos tu opinión
Botones de compartir en redes sociales sin plugins en WordPress
4.8 (96.92%) 26 votes

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *