Como botón (CTA)
El link vive detrás de un botón ciego. El cliente no ve qué hay del otro lado: ni miniatura, ni contexto. Clic de fe.
[ Ver promoción → ]Hoy
Un link de Instagram tiene tres destinos, y los tres son callejones
El anuncio de hoy es un formulario de campos sueltos: título, texto, una imagen subida, un video de YouTube, un botón. El contenido social — que es lo que Mogos produce todas las semanas — no cabe en ninguno.
Como texto (contenido)
Pegado en la descripción sale como texto plano — ni siquiera clickeable. Una URL de cuarenta caracteres mirando al cliente.
https://www.instagram.com/reel/DAbC123…Como video (videoUrl)
El campo de video solo entiende YouTube, Vimeo y archivos directos. Un reel cae al fallback gris de «formato no soportado».
Formato de video no soportadoLos tres callejones existen porque el modelo piensa en campos. La corrección no es agregar un campo más — es pensar en contenido.
La idea
Una URL pegada. El sistema hace el resto
El admin no elige «tipo de contenido» en un dropdown: pega el link y ya. La plataforma lo lee, reconoce el proveedor y decide cómo mostrarlo. La misma lógica que ya existe para YouTube y Vimeo, extendida a los canales donde Mogos publica de verdad.
| El admin pega… | El sistema entiende | El modal muestra |
|---|---|---|
| youtube.com/watch?v=… · youtu.be/… | Video de YouTube | Player 16:9 · ancho |
| instagram.com/p/… | Post de Instagram | Embed 4:5 · medio |
| instagram.com/reel/… | Reel de Instagram | Embed 9:16 · vertical |
| tiktok.com/@mogos/video/… | Video de TikTok | Embed 9:16 · vertical |
| vimeo.com/… | Video de Vimeo | Player 16:9 · ancho |
| …/video.mp4 · .webm | Archivo de video | Player nativo · ancho |
Todo por los endpoints públicos de embed de cada proveedor — sin tokens de API, sin llaves que vencen, sin backend nuevo. Instagram y TikTok exponen su iframe oficial para posts públicos; es lo mismo que usa su propio botón «Insertar».
La dirección
El modal camaleón: la forma la decide el contenido
El modal de hoy mide 500px siempre. Un reel vertical adentro quedaría diminuto entre bandas muertas. En la propuesta el contenedor hereda la proporción de lo que muestra: el chrome — título, texto, botones — es mínimo y acompaña; el contenido es el protagonista.
Nueva ruta aérea China–Caracas
Mira cómo funciona el nuevo corredor en 90 segundos.
Cerrar
Cotiza tu envío
Así llegó el contenedor de agosto
Ver en Instagram
Nuevo almacén
@mogosgroupRecorrido del nuevo almacén ✈
En móvil los tres casos convergen: el modal ocupa el ancho útil de la pantalla y el contenido vertical se siente nativo — un reel en el modal se ve como un reel en Instagram.
Del lado del admin
Pega el link y ve lo que verá el cliente
Los campos videoUrl + imagen se consolidan en un campo de contenido. Al pegar, el proveedor detectado aparece al instante — y el preview en vivo del anuncio (que ya existe en el admin) muestra el modal exactamente como lo verá el cliente, con su forma ya decidida.
Crear anuncio · contenido
https://www.instagram.com/reel/DAbC123xyz/
Instagram · Reel
se mostrará embebido, vertical
Acepta links de Instagram, TikTok, YouTube, Vimeo o un archivo de video. Si el link no se reconoce, el anuncio lo ofrece como botón.
Preview en vivo
Así lo verá el cliente
Nuevo almacén
@mogosgroupRecorrido del nuevo almacén ✈
Resiliencia
Cuando el embed no carga, nunca queda un hueco gris
Un post privado, un bloqueador de contenido, la red del cliente: los embeds de terceros fallan, y el anuncio tiene que degradar con dignidad. Escalera de tres peldaños — cada uno más simple, ninguno roto.
El embed carga
El iframe del proveedor responde y el contenido se muestra adentro del modal, con la forma que le corresponde. Es el caso del 95%.
Card con miniatura
Si el iframe no responde, aparece una tarjeta con la miniatura del contenido, el nombre de la cuenta y un botón que dice a dónde va.
Botón honesto
Sin miniatura disponible, el botón dice el destino — «Ver reel en Instagram» — nunca un genérico «Click aquí». El anuncio sigue completo: título, texto y CTA.
La miniatura del peldaño 2 llega en dos tiempos: primero el poster manual que ya existe (bannerImageUrl), después la automática vía og:image (fase 3).
La base
Seis decisiones que sostienen la pieza
Embeds oficiales, sin tokens
Instagram (/p/·/embed, /reel/·/embed) y TikTok (/embed/v2/·) exponen iframes públicos para contenido público. Cero llaves de API, cero mantenimiento de credenciales.
Detección por URL, en el cliente
El mismo patrón del getEmbedUrl() que hoy resuelve YouTube y Vimeo, extendido con dos regex más. Una función pura, testeable, compartida por modal y preview.
Un campo conceptual: contenido
El form del admin pasa de tres campos de media a uno inteligente. videoUrl existente sigue funcionando — los anuncios viejos no se tocan.
La forma la decide el contenido
Tres anchos de modal (ancho · medio · vertical) derivados del aspect ratio detectado. En móvil convergen al ancho útil de pantalla.
Fallback en escalera
Embed → card con miniatura → botón honesto. Detectado con onload/timeout del iframe. Ningún estado deja el modal roto.
Solo el modal
Top banner, floating bottom y pantalla de mantenimiento siguen siendo texto + CTA. El modal es el escenario; los banners son el susurro.
Cómo se construye
Tres fases, cada una útil por sí sola
El modal aprende
Detección de Instagram y TikTok, embeds en el modal, las tres formas del camaleón y el fallback de botón. El cliente ya ve reels embebidos.
apps/clientEl admin ve lo que pega
El campo inteligente con badge de proveedor y el preview en vivo espejo del modal real. Publicar contenido deja de ser un acto de fe.
apps/adminLa miniatura propia
Scrape de og:image con cache en el API para que la card de fallback tenga preview automática, sin subir screenshots a mano.
apps/api