Generador de código para incrustar redes sociales

Acerca de Generador de código para incrustar redes sociales

Pega la dirección de una publicación de X (Twitter), Facebook, Instagram o Threads y esta herramienta genera el código para incrustarla en un blog o una página web. Ofrece dos métodos. El modo script usa el script oficial de widgets de la plataforma (widgets.js, sdk.js o embed.js) para convertir un elemento de marcador en la publicación renderizada. El modo iframe carga directamente en un iframe la URL de inserción propia de la plataforma. Threads no tiene una URL pública para iframe, así que siempre se genera en modo script.

Los dos métodos se ven parecidos en pantalla, pero conceden cosas muy distintas a tu página. Aquí se explica esa diferencia, qué suponen las inserciones para la privacidad de tus visitantes y de dónde sale el código de inserción (oEmbed).

Modo script frente a modo iframe

En modo script, <script src="https://platform.twitter.com/widgets.js"> se ejecuta dentro de tu página con los mismos privilegios que tu propio código. En principio puede leer y modificar tu DOM. A cambio, ajusta la altura a la longitud real de la publicación y aplica opciones como el tema oscuro o el idioma tal como la plataforma lo prevé.

El modo iframe encierra la publicación en una ventana de otro origen. El código de la plataforma no puede tocar el DOM de tu página y no añades ningún script de terceros. El inconveniente es la altura: un iframe no sabe cuánto mide su contenido, así que la herramienta pone estimaciones, 600 px para X y 800 px para Instagram (640 px con el pie oculto). Las publicaciones largas se cortan y las cortas dejan espacio vacío, así que ajusta el campo de altura.

Si tu sitio usa una Content Security Policy estricta, el modo iframe es más fácil de mantener porque solo hay que permitir el origen del marco, sin ampliar script-src. Si vas a insertar muchas publicaciones en un artículo largo, el modo script con el cargador incluido una sola vez (activa «omitir script» en las demás) pesa menos que muchos marcos separados.

Inserciones y cookies de terceros

Con cualquiera de los dos métodos, la publicación se carga desde los servidores de la plataforma, así que el navegador de cada visitante hace peticiones a x.com, facebook.com o instagram.com en cuanto se abre la página, sin necesidad de hacer clic. Si el visitante tiene sesión iniciada en esa plataforma, pueden enviarse cookies de terceros, lo que permite a la plataforma asociar a esa persona con la visita a tu página.

Lo que ocurre después depende del navegador. La documentación de WebKit indica que la Prevención Inteligente de Rastreo de Safari bloquea por defecto todas las cookies de terceros, sin excepciones. Chrome, en cambio, anunció en 2025 que no seguiría adelante con la retirada prevista de las cookies de terceros y que mantendría la opción del usuario en la configuración. La misma inserción puede servir para rastrear a un visitante y no a otro.

La opción «no rastrear» de X añade data-dnt="true" en modo script o el parámetro dnt=true en modo iframe, para pedir a X que no use la visita con fines de personalización. Es una petición, no un bloqueo: las peticiones de red se siguen haciendo. En la Unión Europea, donde los sitios suelen mostrar un banner de consentimiento de cookies, conviene decidir si las inserciones deben esperar a ese consentimiento. La única opción que no envía nada a la plataforma es una captura de la publicación con un enlace normal al original.

De dónde sale el código de inserción: oEmbed

Cuando pegas la URL de una publicación en WordPress u otro CMS y se convierte sola en una inserción, está actuando oEmbed. El consumidor (tu CMS) envía la URL al endpoint oEmbed del proveedor y recibe un JSON con campos como type, version (siempre 1.0), html, width y height. Hay cuatro tipos: photo, video, link y rich. Una página puede anunciar su endpoint con <link rel="alternate" type="application/json+oembed">.

La especificación de oEmbed recomienda que los consumidores muestren el HTML de tipo rich o video dentro de un iframe alojado en otro dominio, porque insertar el HTML del proveedor directamente en tu página abre la puerta a ataques XSS y al robo de cookies. El modo iframe de esta herramienta sigue esa misma idea de aislamiento. Ten en cuenta que la herramienta no llama a ninguna API oEmbed: monta localmente el formato de inserción documentado de cada plataforma, así que no puede saber de antemano si una publicación se ha borrado o es privada. Compruébalo en la página real.

Motivos habituales de una inserción en blanco

• La publicación es de una cuenta privada o se ha borrado. En modo script queda solo una cita vacía con un enlace.
• La URL de Instagram lleva parámetros de seguimiento como ?utm_source=. La herramienta elimina la consulta y el fragmento y añade la barra final para obtener un permalink limpio.
• Un bloqueador de anuncios o una extensión antirrastreo bloquea el script o el dominio del iframe.
• Tu CSP no permite platform.twitter.com, connect.facebook.net o www.instagram.com.
• La URL es de YouTube, TikTok, Vimeo u otra plataforma que la herramienta reconoce pero no admite, así que no genera código.

Ejemplos

Cómo se usa

1. Pega la URL de la publicación. La plataforma se detecta a partir de la dirección.
2. Elige modo script o iframe y ajusta opciones como tema, ancho, alineación u ocultar el pie.
3. Si la página tendrá varias inserciones, activa «omitir script» en todas menos la primera.
4. Pega el código en la vista HTML de tu editor y compruébalo en la página publicada.

Preguntas frecuentes