Para compartir en redes sociales, usualmente se usan plugins, el problema es que muchos de ellos te cargan demasiado código que a veces no llegas a usar. Si queremos tener una funcionalidad básica y liviana para compartir en redes sociales, estas en el artículo correcto, vamos a ello.
En este artículo veremos, cómo añadir redes sociales sin plugins en WordPress para compartir contenido, la idea es hacer modificaciones a los archivos del theme, y para esto, usaremos código del repositorio Compartir redes sociales de Github.
1- Modificando el archivo functions.php
Lo primero que tenemos que hacer es agregar el código de social.php a nuestro archivo functions.php. El código se podría poner directamente en el archivo functions.php, sin embargo, en este caso, mantendremos el código en el archivo social.php y desde function.php lo incluiremos, es decir:
include_once('inc/social.php');
El código anterior asume que tengo una carpeta “inc”, dentro de los archivos de mi theme, y he copiado el archivo social.php dentro de esta carpeta.
El código del archivo social.php se puede obtener desde el siguiente enlace.
Con esto tendríamos nuestros links tal como se aprecia en la siguiente imagen :
2- Agregando javascript
Si usamos los enlaces anteriores veremos que se abre una nueva ventana, el código javascript del archivo social.js soluciona esto, funciona para todas las redes sociales que usemos y abrirá una ventana emergente a un tamaño adecuado.
El código del archivo social.js lo podemos descargar desde el siguiente enlace.
Este código se debe colocar en algún archivo .js de nuestro theme que ya estemos cargando o cargarlo igualmente desde functions.php con wp_register_script().
Una vez integrado el código javascript entonces veremos que al usar el enlace nos abre un ventana tal como se ve en la imagen:
3- Agregando código CSS
Finalmente, una vez agregada la funcionalidad base, es hora de hacer que nuestros botones luzcan mucho mejor, para esto usaremos CSS. El código base CSS para nuestros botones lo encontramos en el archivo social.css del siguiente enlace.
Podemos usar un archivo CSS que ya carga nuestro theme, por ejemplo style.css, para agregar este código. Al finalizar veremos que ahora tiene una apariencia más atractiva, tal como se ve en la imagen.
Para tener en cuenta:
- Si queremos que aparezcan los iconos de las diferentes redes como , , , , podemos añadir iconos como fuente, te sugiero revisar el siguiente artículo de Insertar iconos como fuente en WordPress.
- Tener en cuenta que el botón de Whatsapp sólo aparecerá para tamaños de pantalla <= 768px, esto se puede cambiar en el código CSS.
- Si queremos agregar nuevas redes podemos encontrar el enlace en un sitio como share link generator. Este enlace generado debemos integrarlo en el archivo social.php y agregar los estilos CSS.
¿Aún con dudas? en el siguiente video se explica cada uno de los puntos tratados anteriormente.
Artículos Relacionados
(6 votos, promedio: 3,67 de 5)
Cargando…
Hola el tema que uso no tiene el archivo .js, como puedo cargarlo desde functions.php con wp_register_script() ?
Hola Julio, efectivamente, si no tienes el archivo .js puedes agregarlo usando wp_register_script()
No quiero que se agregue automáticamente , quiero colocarlo en mi theme en algún ligar de mi theme especifico que yo quiera, se puede hacer?
Debes comentar la linea de codigo en el archivo .js.
Asi:
//$content = $cad.$content; //botones superiores
Hola: te felicito me parece muy bueno el video tutorial. Pero al final del 3er paso cuando sustituyes los vínculos (texto) por los íconos, solo quedan 4: Twitter, Facebook, G+ y LinkedIn. ¿Por qué ya no se vé el de Whatsapp?
Hola Pedro, el botón de Whatsapp se muestra sólo para tamaños de pantalla <= 768px, esto lo puedes cambiar en el código CSS que se adjunta en el punto 3
Apreciado Jhon
Gracias por su instructivo, hace tiempo venia buscando algo así y esto ha sido lo único que ha funcionado.
Estoy muy satisfecho con el resultado ya que puede adaptar el Css al estilo que quería, sin embargo tengo un tema que permite mostrar uns feature page, con los post mas recientes la cual termina siendo la front page del sitio.
Le agradecería si me cuenta una forma de colocar estos iconos en la front page.
De antemano Gracias
Hola, mejor escríbeme por el formulario de contacto, envía el link de tu web para ver el código, de manera general si tu teme usa un archivo front-page.php sería agregar las redes en ese archivo.
Buenas,
He optado por agregar en mi theme (single.php) directamente el enlace que usaste para fb y tw, personalizando el html y el css según mis necesidades. Me funciona bien solo que, a la hora de compartir en facebook, no se me agrega la imagen del post, solo el título y la dirección web. ¿Sabrías decirme a qué es debido eso?
Muchas gracias y buen artículo
Hola, es posible que no se estén generando los metadatos open graph, es decir debes usar algún plugin, por ejemplo como SEO by Yoast, para definir los metadatos “og” de tu contenido (la imagen principal, descripción, etc), ya que si lo dejas que Facebook lo deduzca no siempre lo hará correctamente.
Buenas tardes muchas gracias por la info, como haría solo para colocarlos al final del texto, por ahora no los quiero al inicio tambien mucha Gracias
Hola, revisa el código: https://github.com/jmarreros/compartir-redes-sociales/blob/master/social.php , en la línea 33 es para mostrar los botones superiores, elimina simplemente esta linea 🙂
Hola excelente trabajo, disculpa yo quiero que las redes sociales aparezcan también en las páginas, es decir páginas y post de mi blog, cómo puedo hacer eso?
Hola, en el código PHP hay una condición: if( is_single() ) , tendrías que dejarlo como:
if( is_single() || is_page() )