• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Añadir redes sociales sin plugins en WordPress

Añadir redes sociales sin plugins en WordPress

Redes sociales sin plugins en WordPress

[ 3 agosto 2016 ] [ Actualizado: 15 abril 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

optimización social

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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 :

links de redes sin formato

 

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 en un nuevo archivo .js, puedes revisar el artículo: Insertar javascript en WordPress de forma correcta

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:

Abre ventana emergente

 

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.

Resultado final con CSS

 

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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar Whatsapp flotante en WordPressAgregar Whatsapp flotante en WordPress
  • Consultar dudas de produtos por Whatsapp en WooCommerceConsultar dudas de produtos por Whatsapp en WooCommerce
  • Whatsapp en WordPressAgregar Whatsapp en WordPress sin usar plugins
  • Formulario de búsqueda en un menú WordPressAgregar búsqueda en un menú de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (9 votos, promedio: 4,11 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. julio cesar

    19 septiembre, 2016

    Hola el tema que uso no tiene el archivo .js, como puedo cargarlo desde functions.php con wp_register_script() ?

    • Jhon Marreros Guzmán

      2 octubre, 2016

      Hola Julio, efectivamente, si no tienes el archivo .js puedes agregarlo usando wp_register_script()

  2. Jose

    3 febrero, 2017

    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?

    • Fernando

      16 septiembre, 2017

      Debes comentar la linea de codigo en el archivo .js.

      Asi:

      //$content = $cad.$content; //botones superiores

  3. Pedro Di Bartolo

    13 julio, 2017

    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?

    • Jhon Marreros Guzmán

      13 julio, 2017

      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

  4. Jaime Rojas

    5 agosto, 2017

    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

    • Jhon Marreros Guzmán

      5 agosto, 2017

      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.

  5. Sergi

    28 agosto, 2017

    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

    • Jhon Marreros Guzmán

      28 agosto, 2017

      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.

  6. Danger Rojas

    2 febrero, 2018

    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

    • Jhon Marreros Guzmán

      3 febrero, 2018

      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 🙂

  7. Yandry

    5 mayo, 2018

    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?

    • Jhon Marreros Guzmán

      5 mayo, 2018

      Hola, en el código PHP hay una condición: if( is_single() ) , tendrías que dejarlo como:
      if( is_single() || is_page() )

      • Mertxe

        17 septiembre, 2018

        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.

        • Jhon Marreros Guzmán

          17 septiembre, 2018

          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.

  8. Cynthia

    27 noviembre, 2018

    Jhon Marreros Guzmán: Un genio!! Muchas gracias por compartir tanto!!

  9. Migue

    25 enero, 2019

    No aparece la página, solo los comentarios

    • Jhon Marreros Guzmán

      27 enero, 2019

      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.

  10. Homero

    16 febrero, 2019

    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

  11. Héctor

    15 junio, 2019

    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.

    • Jhon Marreros Guzmán

      17 junio, 2019

      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.

  12. Tomás

    20 febrero, 2020

    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 🙂

    • Jhon Marreros Guzmán

      20 febrero, 2020

      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.

      • Tomás

        20 febrero, 2020

        Muchas gracias Jhon, probaré y ya te reporto.

        Mucha suerte!!

      • Tomás

        25 febrero, 2020

        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!

  13. Christian Hdez

    14 abril, 2020

    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.

    • Jhon Marreros Guzmán

      15 abril, 2020

      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.

  14. Sergio Astorga

    30 junio, 2020

    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.

    • Jhon Marreros Guzmán

      2 julio, 2020

      Hola Sergio, que bueno que te sirvió 🙂
      Salludos

  15. Daniel

    9 julio, 2021

    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.

    • Jhon Marreros Guzmán

      11 julio, 2021

      Hola, supongo que buscas algo como esto: https://wordpress.org/plugins/add-to-any/

  16. Damaris

    21 enero, 2022

    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.

    • Jhon Marreros Guzmán

      21 enero, 2022

      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’])

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Personalizar plantilla para una categoría específica en Woocommerce

Generar código para WordPress con GenerateWP

Usar el Media Uploader de WordPress en tus plugins y temas

Usar Firebug para modificar un theme WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados