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

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

landing page under construction

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.

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.

estructura de landing page donde insertar el chat de youtube.

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.

Landing page final explicada

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ñadir plantilla para insertar el chat de youtube

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.

Copiar enlace para insertar el reproductor de Youtube

Copiamos el enlace del reproductor de Youtube

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

Copiar enlace para insertar el chat de Youtube

Copiamos el enlace del reproductor de Youtube

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>

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.

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!

¿Te ha sido útil el artículo?
[Votos: 2 Promedio: 3]

Propietario y fundador de Streamyng.

Especialista en desarrollo y arquitecturas de productos audiovisuales corporativos.

Apasionado de las nuevas tecnologías, Internet y todos los cachivaches que caigan en sus manos.

¡Compártelo!

2 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í 🙂

Deja un comentario

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.