¿Cómo crear un plugin de redes sociales para una página web con IA?

Aprende a crear con IA un plugin de botones de redes sociales para WordPress: seguir y compartir, con código limpio y gratis. Código completo.

Junior Olivares

09/11/2026

Los botones de redes sociales parecen un detalle pequeño, pero cumplen dos funciones muy importantes en cualquier web: que tus visitantes te sigan en tus redes y que compartan tus artículos con otras personas. Necesitas crear un plugin para tu web porque cada vez que alguien comparte una publicación tuya en WhatsApp o en Facebook, estás ganando visitas sin pagar publicidad. Si te cuesta poder llevar tráfico a tu página web, entonces es momento de aprovechar la estancia de cada usuario en tu web, dándole la opción de compartir en redes sociales tu publicación, hay que añadir esos botones con IA.

En este tutorial te enseño a crear tu propio plugin de botones de redes sociales para WordPress con ayuda de la inteligencia artificial: qué debe tener, cómo pedírselo a la IA, el código completo explicado paso a paso, cómo instalarlo y los errores más comunes que me he encontrado.

Dos tipos de botones que no debes confundir

Antes de crear nada, hay que diferenciar dos cosas que muchas veces se mezclan:

Botones para seguirte. Llevan a tus perfiles: tu canal de YouTube, tu Instagram, tu Facebook, tu TikTok, tu cuenta de X (antes Twitter) o tu LinkedIn. Suelen ir en la cabecera, en el pie de página o en la barra lateral.
Botones para compartir. Permiten que el lector comparta el artículo que está leyendo en WhatsApp, Facebook, X, LinkedIn o Telegram. Suelen ir al inicio o al final de cada artículo.

Tu plugin puede tener las dos funciones a la vez, y eso es justamente lo que vamos a construir: una pantalla de ajustes donde pegas los enlaces de tus redes, y dos shortcodes, uno para mostrar tus perfiles y otro para compartir.

Vamos a obtener estos enlaces que te permiten compartir tus redes sociales.

Este es el HTML de como se ve los botones para compartir desde un artículo

Y también los enlaces para compartir este contenido en estas redes sociales, se ve de esta manera:

¿Por qué crear tu propio plugin y no usar uno de la tienda de WordPress?

En el directorio de WordPress hay muchos plugins de redes sociales, y algunos funcionan bien en su versión gratuita. Entonces, ¿por qué crear uno propio? Por tres razones:

Control del lugar donde aparecen. Cuando diseñas o personalizas una plantilla, quieres decidir exactamente dónde van los iconos. Con un shortcode propio los colocas donde tú quieras: debajo del título, en el pie de página o dentro de un bloque concreto.
Código limpio. Muchos plugins de la tienda cargan hojas de estilo, scripts y funciones que nunca vas a usar. Todo eso pesa y hace más lenta tu web. Un plugin propio solo carga lo que necesitas.
Funciones avanzadas sin pagar. Las funciones más interesantes de esos plugins suelen estar en su versión premium. Con la inteligencia artificial puedes crear esas mismas funciones en tu propio plugin y ahorrarte ese dinero.

Además, si sabes crear este tipo de plugins, ya tienes una habilidad que puedes ofrecer a otras personas.

¿Qué necesitas antes de empezar a crear tu Plugin?

Un WordPress de pruebas. Lo ideal es tenerlo en local, en tu propia computadora, para no romper tu web real mientras pruebas. Te recomiendo que tengas LocalWP, un programa que te permite tener WordPress en local para que puedas realizar tus pruebas.
Una herramienta de IA para programar. Yo trabajo con Antigravity, la plataforma de Google, conectada a mi WordPress local. Así la IA crea los archivos directamente en la carpeta de plugins y puedo ver el resultado en tiempo real. Dentro de Antigravity elijo Claude como modelo para programar.
Los enlaces de tus redes sociales a mano, de todas las plataformas disponibles: Facebook, Tiktok, Instagram, Youtube.

El prompt: qué le pedí a la IA para crear mi Plugin

La calidad del plugin depende mucho de lo bien que expliques lo que quieres. Un buen prompt dice qué debe hacer el plugin, dónde se configura, cómo se muestra y qué cuidados de seguridad debe tener. Este es un ejemplo que puedes copiar y adaptar:

Crea un plugin de WordPress llamado "Mis Redes Sociales". Debe tener una página de ajustes en el menú Ajustes donde pueda pegar los enlaces de Facebook, Instagram, YouTube, TikTok, X y LinkedIn. Crea un shortcode [ mis_redes ] que muestre solo las redes que tengan enlace, con iconos, y otro shortcode [ compartir ] que muestre botones para compartir el artículo actual en Facebook, X, WhatsApp, LinkedIn y Telegram. Usa código limpio, sin librerías externas, valida y escapa todos los datos, y haz que los botones sean responsive. Explícame cada archivo que crees.

Prompt para crear un plugin para WordPress para redes sociales

Un consejo: no le pidas todo de golpe si es tu primer plugin. Empieza con los botones de seguir, pruébalos, y luego pide los de compartir. Es más fácil encontrar un error cuando sabes qué fue lo último que cambió.

El código del plugin, explicado paso a paso

El plugin cabe en un solo archivo. Crea una carpeta llamada mis-redes-sociales dentro de wp-content/plugins y, dentro de ella, un archivo mis-redes-sociales.php. Este es el código completo, dividido en partes para explicarlo.

Primero te mando el código completo: mis-redes-sociales.php

<?php
/**
 * Plugin Name: Mis Redes Sociales
 * Description: Botones para seguir tus redes y compartir artículos.
 * Version: 1.0
 * Author: Tu nombre
 */
if ( ! defined( 'ABSPATH' ) ) exit;

function mrs_redes() {
  return array(
    'facebook'  => 'Facebook',
    'instagram' => 'Instagram',
    'youtube'   => 'YouTube',
    'tiktok'    => 'TikTok',
    'x'         => 'X',
    'linkedin'  => 'LinkedIn',
  );
}

add_action( 'admin_menu', function () {
  add_options_page( 'Mis redes', 'Mis redes', 'manage_options', 'mis-redes', 'mrs_pagina_ajustes' );
} );

add_action( 'admin_init', function () {
  register_setting( 'mrs_grupo', 'mrs_enlaces', array( 'sanitize_callback' => 'mrs_limpiar' ) );
} );

function mrs_limpiar( $valores ) {
  $limpio = array();
  foreach ( mrs_redes() as $clave => $nombre ) {
    $limpio[ $clave ] = isset( $valores[ $clave ] ) ? esc_url_raw( $valores[ $clave ] ) : '';
  }
  return $limpio;
}

function mrs_pagina_ajustes() {
  $enlaces = get_option( 'mrs_enlaces', array() );
  echo '<div class="wrap"><h1>Mis redes sociales</h1><form method="post" action="options.php">';
  settings_fields( 'mrs_grupo' );
  foreach ( mrs_redes() as $clave => $nombre ) {
    $valor = isset( $enlaces[ $clave ] ) ? $enlaces[ $clave ] : '';
    printf(
      '<p><label>%1$s<br><input type="url" class="regular-text" name="mrs_enlaces[%2$s]" value="%3$s"></label></p>',
      esc_html( $nombre ), esc_attr( $clave ), esc_attr( $valor )
    );
  }
  submit_button();
  echo '</form></div>';
}

add_shortcode( 'mis_redes', function () {
  $enlaces = get_option( 'mrs_enlaces', array() );
  $html = '<div class="mrs-redes">';
  foreach ( mrs_redes() as $clave => $nombre ) {
    if ( ! empty( $enlaces[ $clave ] ) ) {
      $html .= sprintf(
        '<a class="mrs-%1$s" href="%2$s" target="_blank" rel="noopener">%3$s</a>',
        esc_attr( $clave ), esc_url( $enlaces[ $clave ] ), esc_html( $nombre )
      );
    }
  }
  return $html . '</div>';
} );

add_shortcode( 'compartir', function () {
  $url    = rawurlencode( get_permalink() );
  $titulo = rawurlencode( get_the_title() );
  $botones = array(
    'Facebook' => "https://www.facebook.com/sharer/sharer.php?u=$url",
    'X'        => "https://twitter.com/intent/tweet?url=$url&text=$titulo",
    'WhatsApp' => "https://api.whatsapp.com/send?text=$titulo%20$url",
    'LinkedIn' => "https://www.linkedin.com/sharing/share-offsite/?url=$url",
    'Telegram' => "https://t.me/share/url?url=$url&text=$titulo",
  );
  $html = '<div class="mrs-compartir"><span>Compartir:</span>';
  foreach ( $botones as $nombre => $enlace ) {
    $html .= sprintf( '<a href="%s" target="_blank" rel="noopener nofollow">%s</a>', esc_url( $enlace ), esc_html( $nombre ) );
  }
  return $html . '</div>';
} );

add_action( 'wp_enqueue_scripts', function () {
  wp_register_style( 'mrs', false );
  wp_enqueue_style( 'mrs' );
  wp_add_inline_style( 'mrs', '
    .mrs-redes, .mrs-compartir { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0; }
    .mrs-redes a, .mrs-compartir a { padding:8px 14px; border-radius:6px; color:#fff; text-decoration:none; font-size:14px; background:#333; }
    .mrs-facebook { background:#1877f2 !important; } .mrs-youtube { background:#ff0000 !important; }
    .mrs-instagram { background:#c13584 !important; } .mrs-x { background:#000 !important; }
  ' );
} );

La cabecera es el comentario que WordPress lee para mostrar el plugin en tu lista de plugins. La línea ABSPATH impide que alguien abra el archivo directamente desde el navegador. La función mrs_redes() guarda la lista de redes en un solo lugar: si mañana quieres añadir Threads o Pinterest, solo agregas una línea aquí.

function mrs_redes() {
  return array(
    'facebook'  => 'Facebook',
    'instagram' => 'Instagram',
    'youtube'   => 'YouTube',
    'tiktok'    => 'TikTok',
    'x'         => 'X',
    'linkedin'  => 'LinkedIn',
  );
}

Muchas de las inteligencias artificiales te van a generar un contenido .ZIP para luego vas a instalar dentro de WordPress siguiente estos pasos.

Primero ve a la sección de plugins dentro de WordPress y dale clic en donde dice añadir nuevo plugin. Ahí vas a llevarte a tu administrador de archivos de tu computadora, en donde tienes que seleccionar tu archivo .zip que contiene ese plugin generado por la inteligencia artificial. Le vas a dar en instalar y luego le vas a dar en activar. Tienes que verificar que no tengas ningún tipo de errores en estos momentos. Esto te lo va a decir WordPress desde la parte superior. Una vez eso, dirige a la sección de ajustes y luego a la sección de mis redes. Va a aparecer esta opción.

Sección de configuración del Plugin de redes sociales en WordPress

Cuando lo hagas, ahí vas a poder visualizar una lista de campos personalizados donde tú vas a poder modificar. ¿Qué es lo que vas a añadir ahí? Tus enlaces de redes sociales. Esa es la área donde tú vas a compartir cada enlace de tu red social. Esto se va a implementar dentro de un shortcode que luego lo vas a poder colocar en cualquier lugar de tus publicaciones para que las personas, cuando le den clic ahí, puedan dirigirse hacia esa red social específica de tu marca o de tu persona.

El shortcode para seguirte:

¿Para qué va a servir un shortcode con la opción de seguirte? Esto es muy importante, mira, porque actualmente con la demanda de las redes sociales siempre es importante tener presencia, tu marca en diferentes plataformas. Entonces, dentro de una página web también tiene que haber botones hacia tus redes sociales. Eso es muy importante porque validas tu marca y además las personas se enteran de la presencia que tienes en otras plataformas.

Hay plugins gratuitos que lo puedes encontrar en la sección de plugins gratuitos de WordPress, pero ahora con la inteligencia artificial puedes crear este código justamente creando un plugin básico que te permite añadir las URLs de tus redes sociales. ¿Qué va a hacer esto? Va añadir tu enlace en cada icon de red social para que cuando el usuario haga clic, mandes a esa persona a tu red social para que pueda visualizar las publicaciones que tienes en determinada red social, cuándo fue tu último post.

Por ejemplo, en Facebook tienes la posibilidad de publicar imágenes, al igual que Instagram, pero en TikTok tienes la posibilidad de publicar videos, además en YouTube Short también.

add_shortcode( 'mis_redes', function () {
  $enlaces = get_option( 'mrs_enlaces', array() );
  $html = '<div class="mrs-redes">';
  foreach ( mrs_redes() as $clave => $nombre ) {
    if ( ! empty( $enlaces[ $clave ] ) ) {
      $html .= sprintf(
        '<a class="mrs-%1$s" href="%2$s" target="_blank" rel="noopener">%3$s</a>',
        esc_attr( $clave ), esc_url( $enlaces[ $clave ] ), esc_html( $nombre )
      );
    }
  }
  return $html . '</div>';
} );

El shortcode [ mis_redes ] recorre la lista y solo muestra las redes que tienen enlace. Si no usas TikTok, simplemente dejas ese campo vacío y el botón no aparece. El atributo rel="noopener" es una buena práctica de seguridad cuando abres enlaces en una pestaña nueva.

El shortcode para compartir:

Crear un shortcode es una de las funcionalidades muy importantes al momento de crear un plugin para un trabajo muy pequeño, como en este caso poder implementar botones de redes sociales para que visualicen nuestras redes sociales como persona o como empresa, o también para que compartan nuestros posts dentro de esas redes sociales.

Al momento que nosotros vamos a crear un plugin, va a ser necesario también configurar líneas de código para implementar un shortcode. Un shortcode dentro de WordPress, pues es un comando pequeño, es un programa pequeño que se basa en un corchete de inicio y en un corchete final.

Esto ayuda a poder visualizar la funcionalidad adicional que tengas implementada y configurada dentro del plugin. En este caso, mira, el plugin que está aquí abajo, o al menos la línea de código que te presento aquí abajo, es, como puedes ver, estamos añadiendo un shortcode con el nombre add_shortcode ('compartir'... . Y a raíz de esto le estamos agregando una función que va a representarse por diferentes botones como Facebook, X, WhatsApp, LinkedIn, Telegram, con sus respectivos enlaces para que el post pueda ser compartido.

Estos botones que están dentro de un array, puedes eliminar cualquier red social que no quieres que aparezca, o puedes añadir nuevas redes sociales.

add_shortcode( 'compartir', function () {
  $url    = rawurlencode( get_permalink() );
  $titulo = rawurlencode( get_the_title() );
  $botones = array(
    'Facebook' => "https://www.facebook.com/sharer/sharer.php?u=$url",
    'X'        => "https://twitter.com/intent/tweet?url=$url&text=$titulo",
    'WhatsApp' => "https://api.whatsapp.com/send?text=$titulo%20$url",
    'LinkedIn' => "https://www.linkedin.com/sharing/share-offsite/?url=$url",
    'Telegram' => "https://t.me/share/url?url=$url&text=$titulo",
  );
  $html = '<div class="mrs-compartir"><span>Compartir:</span>';
  foreach ( $botones as $nombre => $enlace ) {
    $html .= sprintf( '<a href="%s" target="_blank" rel="noopener nofollow">%s</a>', esc_url( $enlace ), esc_html( $nombre ) );
  }
  return $html . '</div>';
} );

Cada red tiene una dirección especial para compartir. El plugin toma la URL y el título del artículo, los codifica con rawurlencode (para que tildes, espacios y signos no rompan el enlace) y los inserta en esa dirección.

Un detalle importante: Instagram y TikTok no tienen un enlace web para compartir artículos, porque están pensados para fotos y videos desde la app. Por eso aparecen en los botones de seguir, pero no en los de compartir. Messenger sí permite compartir, pero exige crear una aplicación en Meta, así que lo dejé fuera para mantener el plugin simple.

Los estilos de tus botones de redes sociales

Esto es el diseño, la interfaz, cómo quieres que se visualicen tus redes sociales, los iconos de redes sociales en el shortcode. Para esto tienes que aplicar estilos dentro de una página web en WordPress, se les conoce como CSS. Estas colocando estilos en las etiquetas de tu HTML para que puedas visualizar tu shortcode con un diseño personalizado. Puedes modificar colores, el color de fondo, los background, el texto, el tamaño de los iconos, de repente añadir algún fondo con bordes, de repente algún texto también dentro de los botones, como la palabra "compartir en" o con la palabra "Sígueme".

add_action( 'wp_enqueue_scripts', function () {
  wp_register_style( 'mrs', false );
  wp_enqueue_style( 'mrs' );
  wp_add_inline_style( 'mrs', '
    .mrs-redes, .mrs-compartir { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0; }
    .mrs-redes a, .mrs-compartir a { padding:8px 14px; border-radius:6px; color:#fff; text-decoration:none; font-size:14px; background:#333; }
    .mrs-facebook { background:#1877f2 !important; } .mrs-youtube { background:#ff0000 !important; }
    .mrs-instagram { background:#c13584 !important; } .mrs-x { background:#000 !important; }
  ' );
} );

Con esto los botones se ven ordenados, se acomodan solos en el celular gracias a flex-wrap y no necesitas cargar ningún archivo CSS externo. Si prefieres iconos en lugar de texto, puedes pedirle a la IA que use iconos en formato SVG.

Cómo instalarlo y usar el Plugin de redes sociales creado en el paso anterior

Ahora vamos con la explicación y el paso a paso para instalar nuestro plugin, que nos va a dar los botones y los campos para llenar nuestros enlaces sociales, para poder colocarlos en cualquier sección de nuestra página web hecha en WordPress. Nuestro plugin es un programa pequeño que se instala en WordPress, y aquí va el paso a paso.

Mira, el código que te compartí más arriba cópialo, el que tiene el nombre de "mis-redes-sociales.php" copialo y pégalo completo dentro de un editor de texto y guárdalo con el nombre mis-redes-sociales.php. Luego, ese archivo lo vas a comprimir y guardar como un archivo .zip. Puedes ponerle el mismo nombre.

Una vez hecho esto, inicia sesión en tu página web hecha en WordPress y ve a la sección Plugins > Añadir nuevo. Ahí vas a ver una opción que dice Subir plugin. Dale clic, elige desde tu computadora el archivo .zip que comprimiste y dale a Instalar ahora. Después tienes que activarlo. Guiáte de esta imagen:

Ahora sí, ve a la sección Ajustes, en el menú de la parte izquierda de WordPress. Ahí vas a ver una opción que dice Mis redes. Dale clic y vas a ver un listado de redes sociales con campos disponibles para que pegues el enlace de cada una.

Bien, lo que vas a hacer ahora es usar los shortcodes. El primero es [ mis_redes ] . Este shortcode lo puedes usar donde quieras para mostrar tus perfiles de redes sociales: en el sidebar, en el footer o también dentro del contenido.

Y también hay otro shortcode, que es [ compartir ]. Este lo puedes colocar al inicio o al final de cada artículo. Cuando el usuario dé clic en una red social, automáticamente lo va a llevar a esa red social para que pueda compartir el artículo.

Ahora, si quieres que aparezca en todos tus artículos sin hacerlo de forma manual, lo puedes añadir directamente en tu plantilla con el siguiente código, justo debajo del contenido:

<?php echo do_shortcode( '[compartir]' ); ?>

Errores comunes y cómo los corregí

Un botón funciona y otro no. Es lo más común la primera vez. Casi siempre es porque la URL del artículo no está bien codificada o porque la dirección para compartir de esa red cambió. Lo que mejor me funciona es pedirle a la IA que simule ser un usuario: que revise cada botón, imagine qué pasa al hacer clic y corrija lo que falle. Después, pruébalo tú mismo en el celular, porque WhatsApp, por ejemplo, se comporta distinto en móvil y en computadora.

Los botones no aparecen. Revisa que el shortcode esté bien escrito y que el plugin esté activado. Si los pusiste en la plantilla, asegúrate de usar do_shortcode.

El plugin deja de funcionar tras una actualización de WordPress. WordPress se actualiza con frecuencia, y a veces algunas funciones antiguas quedan obsoletas. Si tu plugin usa una función desfasada, puede fallar. Por eso conviene revisar tus plugins después de cada actualización importante y pedirle a la IA que use siempre funciones actuales de WordPress.

Ahora tienes que considerar también ciertos detalles de optimización para tu sitio web. Mira, uno de los motivos por los que yo no recomiendo usar plugins de la tienda de WordPress es que esos plugins siempre traen funcionalidades adicionales. Vas a tener muchas funciones dentro de un plugin que tal vez no necesitas, y si quieres tener un plugin limpio y optimizado, mejor aún personalizado para tu web, entonces mejor create uno desde cero.

Lo creas tú mismo, personalizado según tus gustos y colores. Este plugin se crea a partir de un código limpio, solo con lo que tú necesitas.

¿Puedes usarlo con cualquier plantilla? Sí. No solamente con la plantilla que tengo en este sitio web; este tipo de plugins lo puedes usar en diferentes plantillas. Los shortcodes van a funcionar de la misma manera.

¿Cómo puedes añadir otra red social? Mira, si quieres añadir otra red social para que te sigan, tienes que modificar el código en la función mrs_redes(). Y si quieres añadir el botón de otra red social para compartir, lo agregas en el arreglo $botones del shortcode [ compartir ].

Si no te aparece alguna red social en el frontend, es decir, en lo que ve el usuario cuando previsualizas tu artículo, probablemente es porque esa red social no permite compartir enlaces desde la web. Por ejemplo, Instagram. Puedes mostrarlo como botón para que te sigan, mas no para compartir el artículo.

¿Necesitas saber programar para hacer este tipo de plugin? No, para crearlo no. Ya vimos que, al pedírselo a la IA con un prompt en Antigravity de Google, la IA puede generar un archivo .zip. Ese archivo .zip es tu plugin, con las funcionalidades que acabo de explicar. Así que no necesitas saber programar, pero sí manejar las herramientas o, dicho de otro modo, aprender cómo funciona la inteligencia artificial.

Y si lo miras por el lado económico, también lo puedes vender. Claro que lo puedes vender. Lo puedes personalizar para cada negocio y venderlo. Incluso puedes montar una pasarela de pago. Así como lo hice juniorolivares.com una comunidad donde aprendes a tener una web y además puedo vender mis proyectos personalizados, uso pasarelas como Stripe, con tecnología en NextJs, Supabase, Bunny.net.

Inteligencia Artificial Plugins