Generador de inserción de X (Twitter)

Introducción

El Generador de inserción de X (Twitter) de Toollect convierte cualquier URL de tuit en el código de inserción oficial que X publica para mostrar publicaciones en otros sitios web – el blockquote twitter-tweet más widgets.js – con un clic, una vista previa en vivo antes de copiar y todas las opciones de visualización que ofrece la interfaz de X. Pega un enlace, elige tus opciones, previsualiza, copia, pega. Todo el ciclo tarda segundos.

La fricción que elimina le resulta familiar a quien haya incrustado un tuit a mano. El cuadro de diálogo del publicador de X genera el código, pero reparte sus opciones en pantallas separadas, no expone controles para ocultar medios ni para la alineación, y no ofrece control numérico del ancho para vídeos. Escribir el blockquote a mano funciona hasta que un atributo mal escrito deja el tuit como un enlace pelado para siempre. Esta herramienta ensambla el marcado exacto que widgets.js espera, traduce tus opciones a los atributos data-* correctos y te muestra el render real antes de que nada llegue a tu página.

El generator ofrece dos modos tras una barra de pestañas. Publicación construye la tarjeta clásica para cualquier tuit – texto, fotos, vistas previas de enlaces – con tema, ancho de 220 a 550 px, idioma de interfaz, alineación, visibilidad de conversación y medios, Do Not Track y una opción para omitir la etiqueta script compartida. Vídeo optimiza el mismo tuit para su reproductor, con un ancho de hasta 1920 px escrito en el atributo data-media-max-width que merecen los clips grandes. Ambos modos hablan directamente con el punto final oEmbed público de X – sin clave API, sin registro y sin servidor de Toollect en medio.

Casos de uso

Incrustar contenido de X aparece en más sitios que en una entrada de blog, y los dos modos reparten el trabajo de forma natural.

Blogs y contenido editorial

Un artículo de opinión que cita a una figura pública, un artículo técnico con el tuit de anuncio incrustado, un blog deportivo con el clip del momento – los casos clásicos. El modo Publicación con los ajustes predeterminados cubre los tuits de texto; cambia al modo Vídeo cuando el tuit es principalmente un clip y el reproductor debe dominar la columna.

Redacciones y cobertura en directo

Los periodistas incorporan publicaciones de testigos y comunicados oficiales en la cobertura continua. La velocidad importa y también la verificación – el generador normaliza cualquier enlace compartido sobre la marcha, ya sea un enlace de la app con parámetros de seguimiento, formas legacy de twitter.com o variantes de vista de foto, en una referencia canónica del tuit, y la vista previa confirma que el tuit aún se renderiza antes de publicar la historia. Ocultar conversación mantiene el hilo centrado en la declaración citada en lugar de la discusión anterior.

Documentación y redacción técnica

Las notas de versión, changelogs y tutoriales citan cada vez más hilos de ingenieros como fuentes primarias. Ocultar medios colapsa las vistas previas de enlaces a texto para una lectura más tranquila, el selector de idioma muestra los botones de acción y las marcas de tiempo en el idioma de la documentación, y Omitir script mantiene libres de etiquetas duplicadas las páginas que ya cargan widgets.js globalmente – bibliotecas de componentes, temas de documentación.

Sitios de marketing y portafolios

Tuits de elogios de clientes como prueba social, hilos de fundadores como historia de marca. La alineación Centrado coloca un único testimonio en una columna estrecha; Do Not Track señala respeto por la privacidad al público europeo; la vista previa verifica cada tarjeta antes de enviarla.

Cómo funciona

La herramienta ejecuta cuatro pasos:

1. Analizar y canonicalizar la URL – la entrada se compara con la gramática de enlaces de X para tuits – un nombre de usuario (sin @, 1–15 letras, dígitos o guiones bajos), la ruta status y un ID snowflake de 15–19 dígitos en x.com o twitter.com con prefijos opcionales www./mobile./m. Los parámetros de consulta como ?s=20&t=… se ignoran en lugar de limpiarse – la URL canónica reconstruida simplemente nunca los incluye. Las rutas sin nombre de usuario como /i/web/status/… del cliente web se rechazan con un mensaje dedicado porque el punto final oEmbed no puede resolverlas.
2. Construir la solicitud oficial – tus opciones se convierten en parámetros de consulta del punto final oEmbed público de X (publish.x.com/oembed?url=…) – maxwidth, theme, lang, hide_thread, hide_media, align, dnt, omit_script. El punto final no requiere clave y está diseñado sin límite de tasa – existe precisamente para que los CMS conviertan URLs en inserciones.
3. Obtener el marcado oficial – una única petición HTTPS GET devuelve el HTML del blockquote exactamente como lo formatea X, con tus opciones ya horneadas como atributos data-*. Tu navegador habla directamente con X; ningún servidor de Toollect toca la solicitud.
4. Postprocesar y previsualizar – la etiqueta script del servidor se elimina y gestiona por separado (para que la vista previa cargue widgets.js exactamente una vez sin importar cuántas veces regeneres), el modo Vídeo reescribe el atributo de ancho en el cliente (ver abajo por qué), y el blockquote entra en el área de vista previa. La herramienta vigila el iframe renderizado e informa honestamente si nunca aparece.

Cambiar cualquier opción regenera toda la cadena – nueva solicitud, marcado fresco, vista previa rehecha – así que el código que copias siempre coincide con lo que estás viendo.

Formatos de URL compatibles

El generador acepta cualquier forma de URL que identifique un tuit con su nombre de usuario, y rechaza todo lo demás con un mensaje específico.

Formatos aceptados

Las variantes de vista y los parámetros basura tras el ID del tuit simplemente se ignoran – la inserción apunta siempre al tuit mismo, que renderiza sus propios medios. El prefijo https:// y la barra final son opcionales.

Formatos rechazados

El caso sin nombre de usuario bajo /i/web/status/… merece énfasis porque es la sorpresa más común. X entrega esa forma cuando una URL de tuit se copia del cliente web sin abrirlo. El generador la rechaza deliberadamente – pasarla al punto final produciría un fallo silencioso – y te pide el enlace completo. El analizador de URLs de X (Twitter) de este sitio resuelve estos enlaces a su forma canónica si prefieres arreglar la URL en vez de volver a copiarla.

Anatomía del código de inserción

La salida es el mismo código que produce la maquinaria de X, con tus opciones aplicadas. Una inserción de publicación con los valores predeterminados se ve así (contenido abreviado):

<blockquote class="twitter-tweet" data-width="550">
  <p lang="en" dir="ltr">Just setting up my twttr</p>
  &mdash; Jack (@jack)
  <a href="https://x.com/jack/status/20?ref_src=twsrc%5Etfw">21 de marzo de 2006</a>
</blockquote>
<script async src="https://platform.x.com/widgets.js" charset="utf-8"></script>

Recorriendo las partes:

• La clase del blockquote – twitter-tweet es el gancho que busca widgets.js. Cada elemento con esta clase en la página se convierte en una tarjeta renderizada.
• data-width (publicaciones) – el ancho máximo de renderizado en px. X lo recorta internamente a unos 250–550 independientemente de lo escrito, así que el generador mantiene tu valor elegido en el rango honesto.
• data-media-max-width (vídeos) – cuán ancho pueden expandirse los medios dentro de la tarjeta, hasta 1920 px. Presente solo en modo Vídeo – ver Publicación frente a vídeo para por qué el generador escribe este atributo.
• data-theme="dark" – presente solo si eliges Oscuro. Renderiza texto claro sobre fondo oscuro con el aspecto de tarjeta oscura.
• data-lang – presente siempre que se selecciona un idioma concreto, inglés incluido. Localiza los textos propios del widget – formato de fecha, el puente «Leer más», etiquetas de acciones – pero nunca el texto del tuit. Solo Automático omite el atributo; widgets.js recurre entonces al idioma de la página.
• data-conversation="none" – añadido por Ocultar conversación en una respuesta. Sin él, widgets.js antepone un resumen colapsado de la publicación padre.
• data-cards="hidden" – añadido por Ocultar medios. Las vistas previas de enlaces, fotos y vídeos quedan colapsadas; solo renderiza el texto.
• data-align – flota la tarjeta a izquierda o derecha, o la centra, respecto a su contenedor. Ausente con alineación Ninguna.
• data-dnt="true" – añadido por la exclusión de personalización. Indica a X que no use la inserción ni sus visitas para sugerencias personalizadas ni publicidad.
• El párrafo con la línea de autoría – el contenido visible antes de que corra widgets.js – texto del tuit, autor y un enlace a la publicación. Es la experiencia permanente para visitantes sin JavaScript o con el script bloqueado, y degrada con elegancia a una cita normal.
• La etiqueta script – widgets.js desde platform.x.com, cargada async. Una por página basta para cualquier número de inserciones – para eso existe la opción Omitir script.

Publicación frente a vídeo

Dos pestañas, un tuit, dos trabajos distintos. Cambiar de pestaña regenera de inmediato – no hay estado obsoleto.

¿Por qué escribe la herramienta data-media-max-width ella misma? Porque el punto final oEmbed de X no puede. Las pruebas confirman que el punto final recorta cada parámetro maxwidth – incluidos los tuits con vídeo – al rango de publicación 220–550, y nunca emite el atributo data-media-max-width que llevan las inserciones de vídeo. Ese atributo pertenece al flujo interno de publish.x.com, donde el generador de vídeo incrustado decora el marcado después. El generador reproduce exactamente esa decoración – elimina el data-width recortado del servidor y escribe tu ancho elegido en data-media-max-width, así una inserción de vídeo de 1200 px mide realmente 1200 px en tu página.

En la práctica la regla de decisión es simple. Si el tuit se lee bien como tarjeta – Publicación. Si quitar el reproductor lo vacía – Vídeo, y dale al reproductor el espacio que necesita.

Opciones de inserción

Cada control corresponde a un atributo o un parámetro de solicitud. Predeterminados entre paréntesis.

Idioma (predeterminado: el idioma de la página) – ofrece Automático más los 34 idiomas que X incluye para textos del widget. Cada selección concreta, inglés incluido, se envía como parámetro lang y se escribe en data-lang, de modo que el chrome del widget queda fijado donde sea que pegues el código. Localiza marcas de tiempo y etiquetas de acciones alrededor del tuit, nunca las palabras del tuit. Automático omite tanto el parámetro como el atributo – widgets.js renderiza entonces en el idioma que declara la página anfitriona; encaja en sitios multilingües, pero hace que la salida dependa del lugar donde se pegue.

Tema (Claro, solo pestaña Publicación) – Oscuro envía theme=dark y escribe data-theme="dark". Claro es la ausencia del atributo.

Ancho (550 publicación, 560 vídeo) – tecleado como número exacto, recortado al rango válido en cuanto abandonas el campo. Las publicaciones envían maxwidth; los vídeos dirigen la reescritura client-side de data-media-max-width. Los valores fuera del rango de una pestaña no sobreviven al campo – 9999 en Publicación se convierte en 550, 100 en Vídeo se convierte en 560.

Alineación (Ninguna) – Izquierda, Derecha o Centrado escriben align en la solicitud y data-align en el blockquote. Centrado es la forma discreta de colocar una sola tarjeta en un artículo ancho; Derecha deja que el texto fluya alrededor.

Ocultar conversación (desactivado, solo pestaña Publicación) – envía hide_thread=true, que el servidor traduce a data-conversation="none". Solo tiene sentido en respuestas; en un tuit independiente no cambia nada.

Ocultar medios (desactivado, solo pestaña Publicación) – envía hide_media=true, traducido a data-cards="hidden". La inserción se convierte en una cita pura.

Omitir la etiqueta script de widgets.js (desactivado) – envía omit_script=true y suprime la etiqueta script en la salida. Para sitios que ya cargan widgets.js una vez globalmente – varias inserciones, un script. Si tu página no tiene widgets.js, déjalo desactivado; el blockquote solo se renderiza como texto estático para siempre.

Excluirse de la personalización de X (desactivado) – envía dnt=true y escribe data-dnt="true". X documenta esto como excluir la inserción y sus páginas de sugerencias personalizadas y publicidad personalizada.

Uso

1. Pega la URL del tuit en el campo de entrada – cualquier formato aceptado de la tabla anterior.
2. Pulsa Generar (o Enter). El código aparece en la caja de salida y la vista previa se abre automáticamente con el render real de X.
3. Elige la pestaña – Publicación para la tarjeta estándar, Vídeo para tuits centrados en el clip. Cambiar regenera con las opciones y el rango de ancho de esa pestaña.
4. Ajusta las opciones – idioma, tema, ancho, alineación, las casillas de visibilidad. Cada cambio vuelve a solicitar y renderizar; la caja de código nunca diverge de la vista previa.
5. Revisa los diagnósticos – si no aparece ninguna tarjeta, el aviso sobre la salida dice si el script de X fue bloqueado o el tuit no puede incrustarse.
6. Copia el código y pégalo en el HTML de tu página donde deba aparecer el tuit.

Una entrada que no coincida con ningún formato compatible limpia la salida y se explica – o bien el mensaje de enlace inválido o, para rutas sin nombre de usuario, la petición del enlace completo. Borrar restablece entrada, código y vista previa en un paso.

Tutorial

Sigue un enlace real a través de ambas pestañas.

Paso 1 – Pega un enlace de la app. Copia la URL de un tuit tal como la comparte la app móvil, con parámetros de seguimiento incluidos:

https://twitter.com/new27brigade/status/2090248985391014324?s=20&t=FakeNonce

Pulsa Generar. El analizador lee más allá del dominio legacy y de los parámetros s y t hasta el tuit mismo – new27brigade, estado 2090248985391014324 – y el código generado apunta a la forma canónica. La vista previa se abre y la tarjeta se renderiza.

Paso 2 – Oscurece. Pon el Tema en Oscuro. El código gana data-theme="dark" y la vista previa se re-renderiza en paleta oscura. Fíjate en la nueva solicitud – el tema se hornea en el servidor, por eso cada cambio de opción vuelve a llamar al punto final en lugar de editar la cadena localmente.

Paso 3 – Estrecha. Teclea 350 en Ancho y pulsa Enter. El atributo pasa a ser data-width="350" y la tarjeta se encoge. Prueba a teclear 9999 y haz clic en otro lado – el campo vuelve a 550, porque X recortaría ahí de todos modos.

Paso 4 – Localiza la interfaz. Pon el Idioma en japonés (日本語). El código gana data-lang="ja" y la marca de tiempo en la vista previa se reformatea según la convención japonesa. El texto del tuit queda exactamente como está – la opción gobierna solo las etiquetas propias de X.

Paso 5 – Cambia a Vídeo. Haz clic en la pestaña Vídeo. La herramienta vuelve a solicitar con el conjunto de parámetros de vídeo y reescribe el marcado – data-width desaparece, data-media-max-width="560" aparece, y el selector de tema desaparece del panel. Arrastra el ancho a 1200 – el reproductor se expande. Este tuit es un clip de ejercicio militar, así que el modo Vídeo le va bien; para un anuncio de texto volverías a cambiar.

Paso 6 – Copia y envía. Pulsa Copiar y pega en una página HTML simple. Ábrela – el reproductor se renderiza a pleno ancho. Ese es el contrato completo – el mismo código, el mismo render, en tu página.

Vista previa y diagnóstico

La vista previa ejecuta el widgets.js auténtico de X contra tu blockquote exacto, así que falla exactamente donde fallará tu página. Dos avisos, dos significados distintos:

Ambos avisos se disparan solo tras esperas generosas – veinte segundos para la descarga del script, quince más para el render – así que las conexiones lentas no producen falsas alarmas. Un tuit incrustable se renderiza muy dentro de esas ventanas.

Un detalle mecánico digno de mención – la primera generación descarga widgets.js y lo conserva para la sesión. Las regeneraciones – nuevas opciones, cambios de pestaña – lo reutilizan y le piden procesar el nuevo blockquote, así que las vistas previas posteriores aparecen más rápido que la primera.

Consejos profesionales

• Emparéjalo con el analizador de URLs. El analizador examina y limpia un enlace – tipo, ID snowflake, claves de seguimiento; el generador convierte el enlace limpio en código. Archiva con el analizador, publica con el generador.
• Una etiqueta script, muchas inserciones. Las páginas con varios tuits deberían cargar widgets.js una vez – marca Omitir script en cada salida excepto la primera, o cárgalo tú mismo en la plantilla y omítelo en todas.
• Ocultar medios convierte el tuit en cita. Para citas editoriales donde una vista previa de enlace distrae, Ocultar medios más Ocultar conversación dejan solo las palabras y la autoría.
• Centra los testimonios individuales. Alineación Centrada en un diseño amplio se lee como diseño intencional; la izquierda por defecto rara vez es lo que quiere una página de marketing.
• Iguala el idioma del widget al idioma de la página. Una página japonesa con botones RETWEET en inglés parece inacabada – los idiomas concretos fijan el chrome, que es la parte de la que eres responsable; si insertas el mismo embed en plantillas multilingües, elige Automático y deja que widgets.js siga a cada página anfitriona.
• Activa Do Not Track para páginas orientadas a la UE. El flag está documentado por X y se propaga por la inserción – una señal de un clic que la tarjeta respeta la privacidad del visitante.
• Diseña para la columna, luego fija el ancho. Las publicaciones terminan físicamente en 550 px; la vista previa muestra el resultado real en el tamaño de tu contenedor antes de comprometerte.

Alternativas

¿De qué otras maneras puedes poner un tuit en una página?

El diálogo de compartir de X es la alternativa más cercana y la fuente del mismo blockquote – pero su personalización se detiene en idioma, ocultar conversación, exclusión de personalización y un tamaño de vídeo grueso, y no ofrece ruta a hide_media, align ni un maxwidth preciso. La vía API compra control total a precios de pago y aun así te deja el renderizado. Los servicios de terceros interponen sus propios scripts. El generador ocupa el término medio práctico – marcado oficial, opciones completas, confirmación visual inmediata.

Frente a las APIs oficiales

Tres superficies oficiales tocan la incrustación de tuits, y el generador está construido directamente sobre la más amable.

El generador llama al punto final oEmbed exactamente como está documentado – la misma solicitud que haría un plugin de CMS, hecha por tu navegador. Añade lo que al punto final le falta – normalización de entrada, la decoración data-media-max-width del modo vídeo, gestión de etiquetas script y diagnósticos. La X API v2 está deliberadamente fuera – desde que su cambio de precios de febrero de 2026 eliminó la capa gratuita, leer tuits a través de ella cuesta dinero por capacidades que el punto final gratuito ya cubre para fines de incrustación.

Generador de inserción frente al analizador de URLs

Toollect ofrece dos herramientas de X que aceptan los mismos enlaces, y la división del trabajo merece una mirada:

El analizador es el analista; el generador es el constructor. Un flujo de publicación usa legítimamente ambos en orden – analizar para identificar y normalizar a qué apunta un enlace caótico, luego generar para ponerlo en la página. Coinciden en gramática por construcción – un enlace que el analizador acepta como tuit es un enlace que el generador incrusta.

Lo que no hace

Los límites, nombrados para que nunca se confíe demasiado en la herramienta:

• No incrusta cronologías, perfiles, listas, espacios ni hashtags. Son superficies distintas de X con otro marcado; el soporte de perfiles del punto final oEmbed produce anclas de cronología, no tarjetas de tuit, y el generador las rechaza. Una herramienta dedicada sería el vehículo honesto si hay demanda.
• No resuelve enlaces sin nombre de usuario. /i/web/status/… llega sin el nombre de usuario que requiere la forma canónica, y la herramienta no adivina. Abre el enlace, copia la URL completa.
• No resuelve acortadores t.co. Un enlace acortado desnudo no lleva identidad de tuit; pega el destino.
• No anula la privacidad ni el borrado. Cuentas protegidas, publicaciones eliminadas y autores que deshabilitaron la incrustación producen código correcto que no renderiza nada. Ninguna herramienta puede cambiar eso.
• No verifica tuits antes de la solicitud. La validación es gramatical. Si el tuit existe lo responde solo el punto final – un tuit no disponible emerge como solicitud fallida.
• No estiliza el widget. Colores, tipografías y chrome dentro de la tarjeta renderizada son cosa de X. Solo la colocación (alineación, ancho) y la presencia (conversación, medios) son tuyas.
• No instala el código. Lo que copias es lo que pegas; la herramienta no puede entrar en tu CMS o constructor de páginas.

Solución de problemas

Privacidad y manejo de datos

Esta herramienta es honesta acerca de su tráfico, mayor que el de sus hermanas de cero solicitudes pero todavía directo a X.

• Generar envía la URL del tuit a X, una vez por acción. Pulsar Generar o cambiar cualquier opción hace un único GET HTTPS a publish.x.com/oembed con la URL canónica del tuit y tus opciones. La solicitud va de tu navegador a la infraestructura de X – ningún servidor de Toollect la proxya, la registra o la ve.
• La vista previa carga la maquinaria propia de X. Renderizar la tarjeta obtiene widgets.js de platform.x.com, el iframe renderizado de la infraestructura de sindicación de X y los medios de sus hosts de imágenes – exactamente el tráfico que el código copiado producirá en los navegadores de tus lectores.
• Do Not Track se propaga. Con la opción activada, el código generado lleva data-dnt="true", la señal documentada por X para excluir la inserción y sus vistas de página de sugerencias y publicidad personalizadas.
• Sin cuenta, sin almacenamiento, sin analítica. La herramienta no guarda estado entre visitas; cerrar la pestaña termina todo.
• Publicar el código significa que tus visitantes hablan con X. Esa es la naturaleza de incrustar – vale la pena decirlo claramente. Si necesitas un flujo de trabajo de X estrictamente sin conexión, el analizador de URLs de X (Twitter) de este sitio hace todo su trabajo con cero peticiones de red.

Especificaciones técnicas

Detalles:

• Punto final – GET https://publish.x.com/oembed?url={canonical}, sin clave, respuesta JSON, sin límites de tasa documentados; parámetros maxwidth, theme, lang, hide_thread, hide_media, align, dnt, omit_script
• Gramática de entrada – hosts x.com / twitter.com con prefijos opcionales www. / mobile. / m.; nombre de usuario [A-Za-z0-9_]{1,15}; ID de tuit de 15–19 dígitos; esquema, barra final, variantes de vista (/photo/1, /video/1, …) y cadenas de consulta tolerados y descartados
• URL canónica de salida – https://x.com/{username}/status/{id}
• Contrato de ancho de publicación – 220–550 px inclusive (el punto final recorta valores exteriores; histórico por defecto 325, por defecto de la herramienta 550); ancho de vídeo 560–1920 px aplicado client-side a data-media-max-width porque el punto final no puede emitirlo
• Idiomas – Automático o cualquiera de las 34 configuraciones regionales del widget de X; cada selección concreta escribe data-lang, inglés incluido – solo Automático lo omite
• Gestión de scripts – las etiquetas script del servidor se eliminan; https://platform.x.com/widgets.js se carga una vez por sesión con un timeout de 20 segundos; el vigía de renderizado sondea el iframe cada 500 ms hasta 15 segundos y luego informa
• Política de repetición – cada cambio de opción o pestaña emite una nueva solicitud oEmbed; las solicitudes idénticas en vuelo se colapsan mediante un guard de ocupación
• Alojar la salida por tu cuenta requiere – script-src y frame-src permitiendo https://platform.x.com (más https://platform.twitter.com para fragmentos legacy) e img-src permitiendo https://abs.twimg.com y https://pbs.twimg.com
• Soporte de navegadores – todos los navegadores modernos (API clipboard; runtime ES5 requerido por el propio widgets.js)

Características

• Genera el código de inserción oficial de X (Twitter) desde cualquier URL de tuit con un clic – modos de publicación y vídeo en una sola herramienta
• Replica las opciones del propio publicador de X – tema claro/oscuro, Automático más 34 idiomas de interfaz, ancho preciso, alineación, ocultar conversación, ocultar medios
• Observa una vista previa en vivo renderizada por el widgets.js oficial de X antes de pegar el código
• Controla el ancho con precisión – 220–550 px para publicaciones, 560–1920 px para vídeos mediante data-media-max-width
• Respeta a tus visitantes – interruptor Do Not Track integrado y una opción para omitir etiquetas widgets.js duplicadas
• Generador gratuito en el navegador con diagnósticos claros cuando el script de X está bloqueado – sin clave API, sin registro

Preguntas frecuentes