YouTube en Facebook: colocar vídeos en pestañas FBML
*Actualización: Facebook ha eliminado el lenguaje FBML, y con él las pestañas. Así pues este artículo ha quedado totalmente obsoleto.
Esta entrada trataba sobre lenguaje FBML, concretamente explicaba cómo colocar una ventana con un vídeo de YouTube en una pestaña FBML estático. Era un poco complicado de hacer, ya que no bastaba con copiar el código HTML que nos facilita el propio YouTube. Era no obstante algo que se hacía habitualmente en las páginas profesionales de esta red social, especialmente en las landing Facebook pages que veíamos en el artículo anterior. Conservamos el artículo a modo de registro "histórico" (a día de hoy inútil para cualquier otro fin).
--- A continuación el antiguo artículo ---
En primer lugar la lista de artículos sobre el tema para facilitar la navegación:
- Pestañas FBML de Facebook: usos profesionales y breve tutorial. Artículo anterior en el que vimos algunas landing pages y explicamos la forma de colocar una pestaña de este tipo en nuestras páginas de Facebook.
- YouTube en Facebook: colocar vídeos en pestañas FBML. Artículo actual, en el que vamos a ver el caso específico de la colocación de vídeos de YouTube, así como los códigos para modificar el tamaño en el que aparece y su colocación.
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/**********'
imgsrc='http://img.youtube.com/vi/**********/2.jpg' width='340' height='270' /> En lugar de los astericos (*) pondremos el ID del vídeo de YouTube en cuestión. El ID es la serie de números y letras que van a continuación de “v=” en la URL del vídeo.
Por ejemplo, para un vídeo con la URL: http://www.youtube.com/watch?v=grPD0YA-iJA el ID sería “grPD0YA-iJA”. Es lo que habría que poner en lugar de los asteriscos.
Modificando el valor de widht y height podríamos conseguir que la ventana (y con ella el vídeo) se mostrara a un tamaño diferente. En cuanto a la colocación del mismo (por ejemplo en un punto concreto de una imagen de fondo, algo muy habitual en el uso profesional de esta técnica) habría que englobar el código antes citado en una celda dentro de una tabla. De esa forma podríamos colocar el vídeo en el lugar deseado (jugando con las medidas de las filas y celdas).
¡Espero que os sea útil! La respuesta al dilema la hemos obtenido de este artículo de Hyperarts.com. El resultado puede verse en la página de Facebook de este blog.
Personalizar videos de YouTube en las pestañas FBML estático (imagen previa, tamaño, etc...).
Recientemente se me ha consultado sobre la forma de poner un vídeo de YouTube en “autoplay” dentro de la pestaña de Facebook, es decir, que el vídeo empiece directamente al entrar en ella.
Bien, he investigado el tema y he averiguado que no es posible hacer esto. Seguramente por seguridad Facebook no permite el arranque automático de objetos Flash o JavaScript (los vídeos de YouTube están todos en formato Flash), determinando que el usuario ha de hacer click en ellos para su inicio. No podremos decirles que se inicien automáticamente (cosa bastante sencilla fuera de Facebook, consultad el artículo sobre colocación de vídeos YouTube con autoarranque y/o sin vídeos relacionados si queréis más información).
Sin embargo aún nos quedan otras opciones para presentar el vídeo que pongamos, tanto en su tamaño y formato como en la imagen previa (obligatoria) que nos aparece.
Volvamos al código que hemos insertado en la pestaña:
<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/**********'
imgsrc='http://img.youtube.com/vi/**********/2.jpg' width='340' height='270' /> Aunque no podamos arrancar el vídeo directamente sí podemos cambiar la imagen previa. La línea que contiene
imgsrc (image source, ruta de la imagen), sirve para indicar la URL de la misma y colocarla. La que YouTube pone por defecto tiene una calidad muy baja (seguramente por eso se me hizo la consulta), pero introduciendo una nueva ruta dentro de las comillas de imgsrc se puede poner una nueva. Por ejemplo podría hacerse un cartel de presentación en formato JPG y subirlo a internet, indicando la ruta de la nueva imagen para que nos sirva de presentación al vídeo. La nueva línea debería quedar de la siguiente forma:
imgsrc='http://URLimagen/nombreimagen.jpg' Bastará con copiar la ruta completa que aparezca en el navegador y pegarla entre las comillas.
También podremos indicar las medidas del vídeo variando los valores de width y height (en la línea justamente inferior), así como el grosor del borde y su color (en la primera línea,
border-width y border-color, respectivamente).
Suscribirse a las noticias (o comentarios, dentro de cada artículo)
