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.
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
(9 votos, promedio: 4,11 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() )
Hola! Genial artículo. Tengo un par de dudas, si en lugar de incluirlo en las páginas o los post quisiera incluirlo dentro de un plugin? Podría ser? Me gustaría añadir compartir a mi galería de instragram. He localizado el archivo donde tendrían que aparecer los iconos, pero no se cómo añadirlo a social.php.
Por otro lado, ¿Es posible utilizarlo dentro de un child theme? Aunque creo que he puesto bien las rutas no me funciona.
Hola Mertxe, tienes que conocer algo de programación para hacer lo que comentas, es decir tal como esta sólo funciona para las entradas, puedes seguir la misma lógica de creación de los íconos pero para la integración con tu plugin tendrías que ver qué código te genera el plugin. Si tienes dudas adicionales de esto podrías escribirme por el formulario de contacto.
Jhon Marreros Guzmán: Un genio!! Muchas gracias por compartir tanto!!
No aparece la página, solo los comentarios
Hola, entiendo que no aparece el contenido, es posible que algo hayas hecho mal ya que en el código en cualquier caso se retorna el $content, prueba a realizarlo nuevamente.
Buenas, oye, excelente artículo, tengo una duda, en la opción 1 ¿cuál es el código para incluir el número de veces que se ha compartido para cada red social? por ejemplo, Twitter 50, Facebook 25, Pinterest 18, etc y dónde se coloca
Gracias, saludos
Hola, excelente material, pero estoy algo perdido con javascript, ¿podrías darme una mano?
Utilizo Generatepress y en el Child Theme tengo style.css y functions.php
Al momento de colocar Javascript lo hago en functions.php pero como lo ingreso acá de ser posible con wp_register_script()
Desde ya muchas gracias.
Hola, para insertar Javascript correctamente, revisa le punto 4 del siguiente artículo: https://decodecms.com/insertar-javascript-en-wordpress-de-forma-correcta/ , luego prueba con alert(‘ok’) en el archivo para asegurarte de que esta cargando. Si ves que aparece la alerta entonces puedes cargar todo el código indicado en este artículo.
Hola Jhon,
Una vez más tengo que felicitarte por este gran blog.
En mi caso solo me funciona cuando pego directamente en functions.php el enlace: social.php, pero solo de esta forma.
Cuando lo hago según tu vídeo no me funciona. He visto la carpeta inc en mi tema y demás, pero de esta forma no me funciona. Pero también tengo que decirte que tengo un child therme, donde no está la carpeta inc, es decir, he realizado estos cambios en el tema padre y no me aparece nada.
La pregunta sería, tengo que crear una carpeta inc y otra social.js en mi tema hijo e implementar el código ahí?. Los cambios en functions.php siempre lo hago desde WP con el plugin code snippets.
Muchas gracias por tu colaboración 🙂
Hola, exacto tienes que trabajar en el tema hijo que tienes activo, creando la carpeta y archivos necesarios.
Prueba primero hacerlo en el functions.php y luego prueba con el plugin de snippets.
Saludos.
Muchas gracias Jhon, probaré y ya te reporto.
Mucha suerte!!
Hola Jhon de nuevo y perdona las molestias,
Pero es que a mi me funciona perfectamente copiado simplemente el código de social.php en un code snippets dentro de mi WP. Evidentemente aplicando el códido CSS para darle estilo…
Pero viendo que me funciona de esta manera para que quiero hacer lo de la carpeta inc….?
Se puede dejar así, o de esta manera estoy haciéndolo mal?
Gracias de antemano!
Hola Jhon. Excelente artículo. Justo es lo que buscaba: insertar los enlaces de compartir sin plugins. Sólo una observación: el enlace que construye la variable para whatsapp no funciona. La URL no apunta al sitio de whatsapp. Este sería el enlace correcto: https://api.whatsapp.com/send?text=
Un saludo. Gracias.
Hola Christian, gracias por la sugerencia, ya he realizado la actualización de la url, la url que he usado es https:/wa.me , es un acceso directo a la url que sugieres y sirve también para móvil.
Hola Jhon, solo queria agradecerte por compartir este tutorial y todos los que has hecho en tu web sobre wordpress. He usado tu codigo en una web que estoy construyendo, le aplique algunos cambios y quedo muy bien.
Hola Sergio, que bueno que te sirvió 🙂
Salludos
Hola, Jhon, Gracias por el tutorial, pero realmente estoy buscando colocar solo un boton flotante en la web que sea como el icono de compartir, y al clicarlo se abra en el celular a que red social compartir y que ellos elijan, conoces una forma para hacerlo asi o algun plugin que me recomiendes? He estado buscando pero aun no encuentro.
Hola, supongo que buscas algo como esto: https://wordpress.org/plugins/add-to-any/
Hola John, antes que nada gracias y felicitaciones por el cuidado con el que haces los archivos y código. Tengo una pregunta respecto a este tutorial. ¿Se pueden agregar a las páginas de productos individuales? Busqué en Woocommerce y creo que aparece como single-product pero con el if( is_single-product() ) no me lo acepta y obviamente no aparecen ninguna de las ligas.
Ojalá pudieras ayudarme o comentarme si no es la misma forma para los productos de woocommerce.
Hola Damaris,
Gracias:), con respecto a tu pregunta, puedes usar:
is_singular(‘product’)
Aquí esta la documentación de la función: https://developer.wordpress.org/reference/functions/is_singular/
is_singular sirve igual para cualquier CPT, por ejemplo: is_singular(‘page’) incluso acepta un array como argumento, por ejemplo: is_singular([‘page’, ‘post’, ‘product’])