Qué es el VideoMarketing y por qué debería importarte
posicionar vídeos en youtube
Posicionar Vídeos en Youtube. 5 pasos clave.
Mostrar todo

Cómo insertar el Chat de Youtube en una Landing Page para Live Streaming

Seguramente en más de una ocasión has pensado lo bien que estaría poder insertar el chat de Youtube junto a su reproductor para hacer un live streaming en directo de una demostración de un producto o hacer una entrevista en la que además pudieras interactuar con tu audiencia.  Podrías usar la página normal de Youtube pero no lo haces porque usarla parece como que queda algo impersonal.  Pues déjame que te diga una cosa ¡Tienes toda la razón!  Pero ¿qué me responderías si te dijera que puedes insertar el chat de Youtube junto a su reproductor en una landing page de tu WordPress corporativo con todo tu diseño de marca y sin perder ni un ápice de funcionalidad?  Sería genial, ¿verdad?  Los suscriptores tendrían la sensación de que realmente están en tu página y además podrías aprovechar para añadir a la landing page todos los elementos que desees como poner enlaces para compartir, ofertas, descargas o enlaces a otro contenido que te interese.  Pues eso es lo que vamos a hacer ahora mismo en este tutorial.

Contenidos

Antes de crear la Landing Page e insertar el chat de Youtube…

WordPress es todo un universo y aunque la base es la misma para todos (lo que se suele llamar core) la plantilla que tenemos escogida y los plugins instalados determinan en alto grado sus funcionalidades finales.  Teniendo en cuenta que hay infinidad de temas y plugins puede ser que alguno de los puntos del tutorial se tenga que tratar de manera diferente aunque he procurado que sea apto para todo el mundo.

En esta publicación, además de explicar cómo insertar el chat de Youtube en la Landing Page también hablo un poco de cómo estructurar la página.  Así que si estás hecho un manitas y sólo quieres saber cómo insertar el chat de Youtube ve directamente a este apartado.

Anatomía de la Landing Page

La landing page que vamos a crear sigue una estructura típica con una cabecera con el título impactante, dos columnas en el cuerpo y luego el pie de página o footer. Para los menos versados recomiendo esta infografía de bluecaribu donde diseccionan las diferentes partes de la landing page y sus funciones.

Extracto de la infografía Anatomía de una Landing Page Perfecta de bluecaribu

Fijáos que en la esctructura podemos ver diferencias notables con una página normal de nuestra web en WordPress

  • No hay menús
  • No hay elementos que distraigan la atención como las barras laterales
  • El pie de página y la cabecera están completamente personalizados

En definitiva lo que estamos haciendo es una página web completamente independiente pero aprovechando la potencia de nuestra instalación de WordPress y de todos los elementos de diseño que ya utilizamos en ella.  Esto es así porque queremos que el usuario se concentre exclusivamente en el contenido de la landing page.

Como nuestra landing page no va a ser para promocionar un producto sino para transmitir un evento sustituiremos la sección de «la imagen vendedora» por nuestro reproductor incrustado de Youtube con nuestra emisión en directo y  la parte derecha la dedicaremos al chat y la información del evento.  El pie de página se puede usar para poner enlaces a redes sociales y que la gente comparta el evento.  El resultado sería algo parecido a esto.

Aspecto y disección de la landing page que vamos a realizar

Como véis es algo muy sencillo donde apenas hay elementos. Obviamente podréis hacer las modificaciones que deseéis para que se ajuste más a vuestros objetivos o diseño. Esto es solo una base sobre la que podéis evolucionar.

Consejo: Usa una herramienta de diseño estilo Photoshop para crear visualmente un facsímil de la página que vas a crear con todos los elementos.  Será mucho más fácil luego trasladar el diseño al editor de WordPress

Comenzando la estructura de la Landing Page

Como hemos dicho antes, cada web hecha con WordPress es un mundo.  Lo más conveniente sería poder disponer de alguno de los últimos temas que incluyen page builders basados en módulos como Visual Composer, Divi  o Muffin Builder.  Con estos módulos es realmente sencillo pero no os preocupéis porque intentaremos dar soluciones también para aquellos que aún no disponen de ellos.

Como hemos de crear una página sin cabecera ni barras laterales lo primero que hemos de hacer es mirar si nuestro tema dispone de una plantilla en blanco (blank template).  Si ese es nuestro caso crearemos una página con esa plantilla.  En caso contrario sigue leyendo.

Añadimos la página con la plantilla en blanco

Si no disponemos de plantilla en blanco instalaremos un plugin que nos habilitará esta plantilla.  Se llama «Blank Slate» y una vez activado podremos ir a nuestra página y seleccionar la plantilla «Blank Slate» de la misma manera que hemos mostrado en la imagen de arriba.  Puedes ver las características completas del plugin  desde aquí y descargarlo o buscarlo en la sección de plugins de WordPress e instalarlo y activarlo como cualquier otro plugin.

Una vez con la página en blanco ya podremos crear la estructura y llenar de contenidos la landing page con el editor visual o de HTML de WordPress o con el page builder de nuestro tema.  Crearemos la imagen de cabecera, el cuerpo dividido en dos columnas y el pie de página.

Insertando el chat de Youtube y su reproductor en la Landing Page

Llegamos a la madre del cordero.  Vamos a insertar el chat de Youtube y el reproductor de nuestro live streaming.  Para ello primero iremos a nuestro canal de Youtube y programaremos nuestra emisión en directo con todas sus opciones tal y como lo haríamos normalmente si lo hiciéramos directamente en Youtube.  Después, si queremos el reproductor de Youtube estándar, copiaremos el enlace de la página de visionado tal y como mostramos en esta imagen.

Este enlace lo pegaremos en el lugar exacto en el que queremos poner el reproductor (normalmente sería en la columna de la izquierda).  Tal cual, sin más.  Normalmente WordPress ya entendería que queremos insertar el reproductor y lo haría por su cuenta.   En el caso que nos demos cuenta que el tamaño del reproductor por defecto no se ajusta a lo que necesitamos deberás insertar un reproductor personalizado.  No te preocupes puesto que lo explicaré en el apartado de Ajustes finales de la Landing Page más adelante.

Para insertar el chat de Youtube es un poco más laborioso pero veréis que es muy fácil igualmente.  Lo primero de todo es copiar y pegar este código que te voy a poner aquí en el sitio exacto donde quieres poner el chat (normalmente la columna derecha).

<iframe src=https://www.youtube.com/live_chat?v=AQUI-VA-EL-ID-DEL-REPRODUCTOR&embed_domain=www.AQUI-TU-DOMINIO.com width="100%" height="600"></iframe>

Ahora hemos de ir de nuevo al enlace del reproductor y copiar el ID del mismo.  El ID lo podremos localizar al final del enlace justo después del símbolo «=» tal y como se ve en la imagen

Este ID lo pegaremos en la parte del código proporcionado anteriormente sustituyendo el mensaje indicador por el ID.  Haremos lo mismo con el mensaje del dominio sustituyéndolo por el dominio donde está alojado nuestro WordPress.  Así sería cómo quedaría en mi caso después de sustituirlo todo.

<iframe src=https://www.youtube.com/live_chat?v=RMXaAymffhg&embed_domain=www.streamyng.com width="100%" height="600"></iframe>

? Atención

En algunos casos nos comentáis que os aparecen algunos errores en la inserción del chat.

Gracias a la colaboración de nuestro videomarquetero Álex disponemos de una posible solución que es la de quitar las www del principio del dominio en el código de inserción.

Así en el ejemplo anterior si nos diera error podríamos probar con el siguiente código.

<iframe src=https://www.youtube.com/live_chat?v=RMXaAymffhg&embed_domain=streamyng.com width="100%" height="600"></iframe>

Como véis es exactamente igual pero en vez de www.streamyng.com quedaría simplemente como streamyng.com. Obviamente en vuestro caso tenéis que poner vuestro ID de reproducción y vuestro dominio en vez de streamyng.com.

No quiere decir que solucione todos los errores pero vale la pena probarlo en caso de problema.

Gracias, Álex!

Si hemos seguido todos los pasos, al hacer la vista previa de nuestra página deberíamos ver ya el reproductor en la columna izquierda y el chat en la de la derecha listos para recibir imágenes y mensajes.  Solo nos quedará poner los elementos del pie de página o footer que puede ser un botón CTA, botones sociales, una oferta a la cual queremos redirigir, etc.

Ajustes finales de la Landing Page

Con todos los elementos colocados en la landing page quedaría ajustar o incluso recolocar los elementos pues es muy posible que como en el ejemplo que os he puesto al principio haya un desajuste de alturas.  Ahora se tratará de ir jugando con la cantidad de texto, la posición del mismo y el tamaño tanto del reproductor como del chat.  Como habréis podido deducir, el tamaño del chat se puede cambiar con los atributos «width» y «height».  En mi caso concreto he hecho que la anchura sea la máxima permitida y luego he regulado la altura a 600 píxeles.  Es cuestión de ir jugando con los tamaños.

El reproductor de Youtube también puede ajustarse pero en ese caso deberemos copiar el código de inserción en vez del enlace directo.  Te lo explico paso a paso en esta galería.

Una última cuestión y además es importante. A raíz de los comentarios en este artículo algunos usuarios se han dado cuenta de que el chat no salía cuando accedías a la web con un móvil. Más paradójico es aún cuando pides en el navegador de escritorio las versiones móviles y estas funcionan correctamente.

El «error» se debe a una restricción del mismo Youtube a la hora de insertar el chat. Simplemente Youtube ha implementado cambios para evitar que se pueda usar el chat desde la versión móvil cuando está incrustado en una página web, como es nuestro caso.

Veremos si sale alguna solución y si eso ocurre no dudéis que volveremos a actualizar el artículo explicándola.

Y eso es todo.  Espero que os sea de ayuda y como siempre, aquí me tenéis para solucionar todas vuestras dudas.  ¡Hasta el próximo tutorial, StreamPros!

¡Compártelo!

32 Comments

  1. Gustavo Fabián Contreras dice:

    Hola Zapa, gracias por tus excelentes tutoriales. Soy muy novato y quiero saber si es posible insertar el chat en vivo de YouTube en una página gratuita de WordPress porque no estoy consiguiendo. En realidad no sé cuál es mi dominio… Gracias

    • Zapa dice:

      Hola Gustavo!

      Entiendo que cuando me dices ‘versión gratuita de WordPress’ te refieres a la que no hay que pagar por tener un dominio propio, ¿no? Si es así tu dominio debería ser del estilo eltitulodemiblog.wordpress.com Yo no utilizo esa versión pero entiendo que el funcionamiento ha de ser parecido y no deberías tener problemas en seguir el tutorial una vez estuvieras dentro del panel de control. Pero claro, para eso es imprescindible que sepas tu dominio. O por lo menos tu nombre de usuario y contraseña para saber si es wordpress.com u otra solución.

      Ya nos contarás qué tal. Cualquier cosa estamos por aquí 🙂

  2. David dice:

    Hola, veo el chat en el pc pero no en cuando accedo desde el teléfono móvil. Alguna sugerencia? Muchísimas gracias.

    • Zapa dice:

      Hola David.

      En el momento en el que hice el tutorial yo pude verlo sin problemas tanto en la versión de escritorio como la de móvil. No soy un experto en programación web pero el problema que describes podría ser por la configuración del CSS de tu tema de WordPress. Es posible que no sea «responsive» o que necesite algún código CSS adicional para que se pueda ver. De todos modos tampoco podría asegurarlo puesto que no soy experto en programación web ¿Has mirado que no aparezca debajo del todo en vez de al lado?

      Una solución o mejor dicho, una manera de saber qué está pasando sería usar el inspector web pidiendo la versión móvil e inspeccionar el código para ver si realmente el código del chat está ahí y por qué no se ve.

      Otra solución posible sería usar el nuevo editor de WordPress Gutenberg (sí, ese que tanta gente odia) y maquetarlo todo desde ahí. Pero no aconsejo actualizar a menos de estar seguro que tu tema y tus plugins son compatibles.

      Ve probando esto y nos cuentas a ver qué tal.

      Saludos

  3. Guillermo dice:

    Enhorabuena por el tutorial, claro y muy bien explicado. Lo he seguido y todo ha ido perfecto. Muchas gracias.

  4. Alfonso dice:

    Lo estoy intentando pero me dice que youtube me rechaza la conexion,¿ es por probarlo en u directo en oculto? aunque no deberia… gracias

  5. Alfonso dice:

    Buenas tardes, donde deberia aparecer el chat pone esto : La página http://www.youtube.com ha rechazado la conexión.

    El codigo que uso es este :iframe src=https://www.youtube.com/live_chat?v=Qd_OghSztaY&embed_domain=www.acuariosymascotas.com width=»100%» height=»600″></iframe

    Muchas gracias,
    Un saludo

  6. Alfonso dice:

    En este enlace puedes verlo directamente https://acuariosymascotas.com/directos/

    Muchas gracias

    • Zapa dice:

      Hola Alfonso. Si haces click en el enlace del iframe directamente sale un mensaje que dice que el chat está inhabilitado. Te paso alguna sugerencia.
      – Verifica que el chat esté habilitado en la configuración del directo de Youtube
      – Haz pruebas con el directo de youtube puesto en público (sin emitir)
      – Veo que estás usando Elementor. Mira de usar algún widget de html puro como prueba.

      Te paso el enlace de la página que creé como referencia para que puedas inspeccionar su código.

      https://www.streamyng.com/streamyng-webinar-pervasive-profit/

      ¡Espero que te ayude!

  7. Alex dice:

    Hola, ¿hay manera de integrar el chat en un video no público? Ya que quiero integrarlo en unaas conferencias privadas y la idea es que el chat también sea privado. Gracias

  8. Alex dice:

    Y ensayé poniendo tu iframe https://menteytrading.com/webinar/index.php Y sale
    «La página http://www.youtube.com está bloqueada
    La página http://www.youtube.com ha rechazado la conexión.

    ERR_BLOCKED_BY_RESPONSE»

    • Zapa dice:

      Hola Alex!

      Si lees el comentario de Alfonso más arriba parece ser que tiene un problema parecido al tuyo. Y esto puede ser debido a que puedes tener alguna característica en la configuración del evento o tu canal de Youtube que restrinja la inserción.

      Para estar absolutamente seguro de que esto es así tendrías que probarlo con un webinar abierto. No hace falta que estés emitiendo. Simplemente configurarlo en Youtube como si fueras a hacerlo.
      – Lo configuras en oculto de entrada para que no lo vea nadie.
      – Cuando tengas el chat insertado prueba a ponerlo público por unos segundos (SIN EMITIR!) y recarga la página donde lo has insertado a ver si funciona.
      – Vuelve a ponerlo oculto una vez veas el resultado.

      Si te ha funcionado durante el breve tiempo que lo has puesto público tendremos tendremos la prueba de que el problema está en la configuración del evento y no en la inserción en tu página.

      En mi ejemplo que podéis ver en este enlace https://www.streamyng.com/streamyng-webinar-pervasive-profit/ si hacemos click en el título del vídeo podréis ir a la página de Youtube correspondiente y veréis que el vídeo está oculto. Osea que SÍ es posible insertarlo con un vídeo oculto.

      Asegúrate de revisar la configuración del evento. Yo miraría directamente los permisos de inserción y de permitir comentarios.

      Prueba y nos comentas qué tal te ha ido!

  9. Alex dice:

    Ya me funciona, te cuento y para los demás que encontré la solución quitándole las WWW de embed_domain dejándolo así «…embed_domain=midominio.com».

  10. Antonio Moreno dice:

    Hola …perdona que te moleste. He seguido tus pasos, y en principio funciona..

    Pero …en la ventana del chat me sale este error: Bloqueado por la política X-Frame-Options
    Ha ocurrido un error al conectar con http://www.youtube.com.
    Firefox evitó que esta página se cargue en este contexto porque la página tiene una política X-Frame-Options que no lo permite.

    Uso una plantilla de Site Origin con Page Builder, y no se si el error está en la parte de la plantilla o del navegador …

    Si me puedes dar una pista, te lo agradezco. El player de Youtube se ve sin problema.

    • Zapa dice:

      Hola Antonio. Has probado la solución que aportó Álex? Prueba eliminando el «www» en la sección del «embed domain» y déjalo solo como «tudominio.com» en vez de «www.tudominio.com».

      Pruébalo y nos cuentas!

      • Miguel dice:

        Tengo el mismo error!
        Eliminé www y tampoco se resuelve. ¿Qué más podrá ser?

        • Zapa dice:

          Me salió ese error hace un tiempo en otro contexto diferente y realicé diferentes pasos para solucionarlo.
          – Actualizar wordpress a la última versión
          – Actualizar el tema a la última versión
          – Actualizar todos los plugins
          – Desconectar plugins uno a uno hasta que funcionara.

          En mi caso era el plugin de seguridad Wordfence el que causaba el problema y al final no hubo manera de resolverlo y lo sustituí por el WP all in one security. Hay veces que hay que recurrir a medidas drásticas ?

          Probad a ver si es eso o cualquier otro plugin que esté interfiriendo en el funcionamiento y nos contáis.

          Saludos!

  11. Roberto dice:

    Hola Carlos, buen día!!!

    Gracias por el artículo, ha sido de gran ayuda. Sin embargo me he dado cuenta que el chat aparece perfectamente cuando las visualizas desde un navegador desde la computadora, pero desaparece «literalmente» cuando accesas desde un teléfono movil.

    Revisé el ejemplo que nos das en este post y al parecer también en tu caso sucede lo mismo.

    ¿Hay alguna solución para esto? Sobre todo considerando que más del 90% del tráfico actual, llega por el movil.

    Yo lo implementé en esta página de un cliente: https://saltokuantico.com/seruv-en-vivo/

    • Zapa dice:

      Pues tienes toda la razón!

      Lo curioso del caso es que tanto en la vista de dispositivo móvil del inspector de Chrome como en el de Firefox se ve correctamente.

      Así que a raíz de tu comentario y viendo que a David más arriba le pasaba lo mismo he empezado a investigar concienzudamente (¡esto no puede quedar así ?) y me he encontrado con la respuesta. Resulta que se trata de una restricción impuesta por el mismo Youtube desde hace un tiempo. Así que la única manera de que se muestre el chat en el navegador del móvil es marcando la opción de «pedir versión de escritorio» para que te cargue la misma versión que en el ordenador.

      Desgraciadamente no es una opción práctica puesto que el chat se ve pequeño de narices al quedar al lado del reproductor y no pasar abajo. Totalmente inusable.

      A menos que alguien salga con alguna solución parece que no hay mucho que hacer al respecto. Y mucho me temo que será el principio del fin y en el futuro restrinjan totalmente la incrustación del live chat ☹☹. ¡Espero estar equivocado!

  12. Natalia dice:

    Hola! te hago una consulta: en algunos casos, a los espectadores en dispositivos de escritorio, pueden visualizar el streaming o el chat, las dos cosas juntas no. Y para poder visualizar el chat, los lleva a youtube y luego tienen que volver a realizar el registro para ingresar al streaming, lo que les lleva a perder varios minutos de clase en vivo. Tendrás una posible solución o lógica para seguir sobre ¿por qué sucede esto?

    Saludos, y muchas gracias

    • Zapa dice:

      Hola Natalia!

      Nos comentas que eso sucede en algunos casos. En otros deduzco que se ve todo bien. El hecho de que no sea generalizado ya nos da una buena pista de que lo que causa el problema debe estar en los ordenadores de la gente que no lo ve bien (no es cosa de mala implementación en principio).

      Puede ser por diversos motivos: Tipo de navegador, extensiones utilizadas, tipo de conexión, fallos de interpretación del código…

      Yo lo que haría sería mirar las características de navegación de un ordenador en el que se vea todo bien e intentar replicar estas características en el resto de ordenadores (Versión y marca de navegador, extensiones…)

      No sé si has leído en otros comentarios que Youtube directamente restringe la visualización en dispositivos móviles. Mucho me temo que en un tiempo ya nadie pueda visualizar correctamente este truquillo.

      Prueba lo que te he indicado y nos comentas qué tal. A lo mejor algún otro videomarquetero tiene más ideas de lo que puedes probar.

      Suerte!

  13. sergio dice:

    Muchísimas gracias!!

  14. Nicolas dice:

    Hola a tod@s, para la version Mobile me alcanzó con agregar &app=desktop&persist_app=1 a la URL del iframe. De esa forma forzamos que YouTube traiga la version Desktop y entonces el chat funcione siempre.

    Saludos

    • Zapa dice:

      Hola NIcolás. Es una buena solución intermedia. Como comentaba en este comentario la versión de escritorio funciona y se muestra el chat pero no es ‘responsive’ y se ve al lado del vídeo en vez de salir abajo. Eso comporta que el tamaño sea muy reducido y sea muy difícil (por no decir casi imposible) que sea usable.

      Seguramente tu aporte será muy útil para seguir investigando el tema. ¡Muchas gracias! ?

  15. Begoña dice:

    ¡Hola! Muchas gracias por este artículo. Hemos metido el chat en nuestro WordPress, pero solo lo vemos en la página si estamos logueados como admin, los usuarios de la web no pueden verlo. ¿Sabes por qué puede ser? ¡Gracias!

    • Zapa dice:

      Hola Begoña!

      Posiblemente sea porque el reproductor no sea público. De esa manera solo la gente con cuenta de Youtube que hayan ingresado pueden verlo. Mira de comprobarlo y nos cuentas ?

  16. ANDRES dice:

    ¡buenísimo y muy sencillo de implementar!

  17. david alberto dice:

    Es necesario tener el pluggin de blank-slate instalado en WordPress? Ya que yo no estoy usando WordPress

    • Zapa dice:

      Hola David. El tutorial está pensado para instalaciones de WordPress. Si no tienes WordPress instalado aún podrás insertar el chat pero necesitarás conocimientos de programación en HTML para crear la Landing Page y luego insertar el código.

      Saludos.

Responder a Zapa Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

  Acepto la política de privacidad

Información básica sobre protección de datos

Responsable » Carlos Zapater

Finalidad » Gestión de dudas y servicios a cliente

Legitimación » Consentimiento del interesado

Derechos » Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la información adicional

Información adicional » Puedes consultar la información adicional y detallada sobre Protección de Datos Personales en mi página web streamyng.com

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.