domingo, 18 de julio de 2010

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:

  1. 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.
  2. 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.
No es HTML ordinario lo que hace falta, hay que usar códigos de Facebook. En la pestaña (a la que accederemos a través de “Editar página” y luego clicando en “Editar” en el apartado FBML) habremos de incluir lo siguiente:

<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.

Aspecto de un vídeo de YouTube en una pestaña FBML de Facebook

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).

Artículos relacionados:

77 comentarios:

Anónimo dijo...

Hola,
muchas gracias por este tutorial y el otro sobre la personalización de las páginas en Facebook. Me han sido de mucha utilidad.
Un saludo,
Roberto.

Santi Folch dijo...

De nada amigo, me alegra haberte sido útil. Cualquier cosa ya sabes, coméntala libremente que también estamos para aprender :)

Anónimo dijo...

Hola,
Gracias por dar un buen tutorial, esta bien detallado y me a ayudado mucho.
Saludos cordiales.
Juriko.

Santi Folch dijo...

De nada Juriko, encantado de haberte sido útil.

Tiempos Modernos dijo...

Gracias por el artículo! Pero tengo un problema…cuando accedo a la pestaña no se ve nada , he de hacer click en el espacio en blanco para que se vea la ventana del video, tiene que ver con que he eliminado la linea de codigo del jpg? en la dirección de you tube que uso no hay jpg...

Tiempos Modernos dijo...

Solucionado!:

http://algodeblogs.blogspot.com/2010/10/como-anadir-youtube-videos-o-flash.html

era el tema del jpg, le he añadido el autoplay para evitar dos clicks!
gracias!

Santi Folch dijo...

En efecto era por haber quitado la línea del jpg. De todas formas, tal y como dice en el artículo que apuntas, los vídeos no pueden arrancar automáticamente (si lo has conseguido muestranos tu página por favor ;)).

De ahí poner una buena imagen de presentación. Por cierto, el artículo apunta una posibilidad interesante: para posicionar el vídeo puede usarse también CSS: colocamos el vídeo en un div y lo colocamos con el atributo style.

Ej: <div style="margin:0 auto; width:492px;"> Código del vídeo </div>

DATOS PERSONALES dijo...

Hola Santi ,
Soy José Luis , gracias por tomarte el tiempo de colgar toda esta info . Resulta que estoy colgando videos con está en el tutorial y funciona muy bien , ahora, cuando salgo de la pagina de editar para poder visualizar como ha quedado , entro el la pestaña y el video se ve borroso hasta que pincho sobre él. Esto es así siempre o algo estoy haciendo mal ?.

Saludos y gracias !

Santi Folch dijo...

Hola José Luis, en efecto es así siempre. Desgraciadamente la imagen previa que pone YouTube tiene muy baja calidad (estropea mucho el resultado, la verdad).

Para eso está la imagen previa que se explica en el artículo. Te recomiendo que hagas una captura de un buen momento de tu vídeo, o cojas una buena foto, la subas a un alojamiento de imágenes como Picasa o ImageShack, y la pongas finalmente como imagen previa.

Recuerda que has de cortarla (con Photoshop o cualquier editor de imágenes) al tamaño exacto de tu vídeo. Un saludo y suerte!

DATOS PERSONALES dijo...

Hola Santi , gracias por tu respuesta .

Apenas te envié el mail anterior , me di cuenta que la consulta que te había hecho estaba respondida en una parte del articulo (error mío) .
Ahora, he intentado subir una foto a flick para utilizarla como imagen previa (siguiendo todos los pasos (imgsrc='http://URLimagen/nombreimagen.jpg' ) y no la puedo visualizar (exactamente se ve el famoso cuadrado azul con el "?" dentro ) .

Todo esto puede ser por el tamaño de imagen o algo así ? y por ultimo como podría congelar una imagen del video ? ya que eso me resultaría más util.

Perdona por tanta demanda de info , lo que retorne será bien recibido.

Saludos !
José Luis

Santi Folch dijo...

No te preocupes Jose Luis. Bien, si no te funciona es que has hecho algo mal. A buen seguro no has puesto bien la ULR de la imagen.

Esto me anima a escribir un tutorial sobre esto en el futuro. Cuando subas la imagen tienes que asegurarte de copiar la URL de la imagen sola (algo en lo que es fácil equivocarse). La forma de comprobarlo es que la imagen se vea sola en el navegador. Debe haber algún botón que diga "mostrar imagen" en el servicio de alojamiento que hayas usado. Puedes probar también a hacer clic derecho sobre la imagen y elegir "mostrar imagen".

El objetivo es que la imagen aparezca sola en la página. Esa es la URL que habrás de copiar y poner entre las comillas.

Puedes ver un ejemplo en la página de Facebook de este blog, lo acabo de hacer y funciona perfectamente :).

En cuanto a congelar la imagen de un vídeo... pues haciendo una captura con la tecla "ImprPant", y luego CTRL+V en un documento en blanco de Photoshop.

DATOS PERSONALES dijo...

Hola Santy , al final si que funcionó , mi error era que copiaba el código html incorrecto en mi flickr (sumado a mi mala manía de preguntarlo todo antes de rebuscar un poco más en busca de la solución )

Gracias por tu tiempo y si sacas algún otro tutorial estaré alerta ya que estos me han servido mucho .

Un abrazo !

Santi Folch dijo...

jaja no te preocupes que nos pasa a todos. Me alegra haberte sido de ayuda.

Saludos!!

Jersson H. dijo...

Muchas gracias por el tuto... me fue de gran ayuda en mi proyecto... :)

Leti dijo...

Hola Santi primero que nada gracias por el tutorial!
Mi pregunta es como puedo agregar un fondo?
Gracias!

Santi Folch dijo...

Hola Leti, de nada :). A ver, para poner un fondo tienes que meter todo lo que haya en la pestaña dentro de un DIV. A esta etiqueta div le puedes poner una imagen de fondo, colores, etc...

Por ejemplo yo acabo de poner en mi pestaña FBML un div de color gris, con el texto alineado al centro.

Tendrías que poner algo como esto:

<div style="background-color:TUCOLOR;background-image:url('LA-RUTA-COMPLETA-DE-TU-IMAGEN')">

AQUÍ TODO LO DEMÁS

</div>

Te recomiendo lo que a todos, mírate un poco el CSS, te será realmente útil para usar internet.

Profecias y Culturas dijo...

Eres un maestro la verdad que nos va a servir seguro, y creo que funcionara. Es decir aún no lo he probado por la excitación de haber encontrado la respuesta en tu blog. MAESTRO!

Anónimo dijo...

Hola Santi,

Después de volverme un poco loco logré poner el codigo fbml en Facebook. Pero por más que trato no logro que el video salga centrado en la imagen de fondo y que al reproducirlo pueda ponerlo en pantalla completa.

Si pudieses ayudarme te lo agradeceria eternamente.

Atentamente,

Jordi Puig
gipsy@decallaos.com

Santi Folch dijo...

Hola Jordi, vamos a ver, para centrar el vídeo has de usar HTML o CSS, igual que con cualquier otro elemento.

Es decir, pones todo dentro de un DIV, y lo centras:

<div style="text-align:center;">
TODO LO DEMÁS
</div>

Respecto a poner el vídeo en pantalla completa poco podemos hacer. Se muestra en el tamaño que le hayamos indicado (tal y como se explica en el artículo).

Guty Montana dijo...

Sencillamente perfecto!Santi me has solucionado en 2 minutos un problema de meses,he buscado y he buscado y en ninguna página lo explicaban con claridad pero aqui lo he entendido a la primera.Excelente explicación!Gracias por este magnífico aporte!

Santi Folch dijo...

jajaja! me alegro muchísimo de haber sido útil Montana :)

Guty Montana dijo...

De gran utilidad! y aqui os dejo (por si os puede servir) la manera de hacer que el video se reproduzca con un solo click.
Hay que pegar "&autoplay=1" seguido de la UD del video de you tube.Quedaria así:

swfsrc = 'http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1'

Anónimo dijo...

hola Santi!!
muy bueno todo ayudo y mucho!!
consulta:
como hago para agregarle, a la "pestaña FBML", el boton me gusta?

y a los videos le puedo agregar botones como: "me gusta" y "compartir"?

Santi Folch dijo...

Gracias por la info Guty. De todas formas tengo un artículo que explica muchas más opciones para los vídeos de YouTube (que empiecen en un momento concreto, con o sin loop -repetición-, etc... Echa un vistazo aquí ;)

http://www.comunicacion-multimedia.info/2010/05/colocar-videos-de-youtube-con-inicio.html

Anónimo: el botón de me gusta sale por defecto arriba de la página para los no fans. Lo que suele hacerse es, sencillamente, poner una flecha hacia él (dibujada en una imagen). Junto a la flecha suelen ponerse frases como "hazte fan", etc... Que yo sepa no puede ponerse botones a los vídeos en sí, habrás de contentarte con los botones de "me gusta" y "compartir" del propio Facebook.

ana dijo...

Hola, me leido todo y no me ha quedado muy claro como usar el código de facebook. Quiero subir en una pestaña de facebook un catalogo que tengo alojado en "http://issuu.com/publications" y no consigo que se muestre en la pestaña, podrías ayudarme??? no encuentro mucha información sobre el código de facebook y veo que tu estas muy puesto en el tema y te explicas muy bien. Gracias de antemano!

ana dijo...

ya lo he conseguido!!! perdona las molestias!

mejiajuly dijo...

Muchas gracias por publicar este artículo, es excelente, bien explicado y detallado, no hay razón para perderse en los pasos.

Los felicitos!
Att.: July Mejía

Santi Folch dijo...

No pasa nada. Y si tenéis dudas preguntad sin problema, cuando tenga un rato siempre las miro.

Además, muchas veces aprendo cosas nuevas al hacerlo ;) Saludos!

Almudena dijo...

Te tengo que felicitar por tus articulos, son muy buenos y me han ayudado muchisimo.

Te quería preguntar cómo puedo poner más de un video en una pestaña de Facebook. Yo lo que he hecho es copiar el código que das es este artículo dos veces, uno debajo de otro con el correspondiente ID del video. Pero sólo me sale el primero.

Muchas gracias,

Almudena

Santi Folch dijo...

Hola Almudena, muchas gracias :)

Respecto a tu pregunta tal vez te hayas equivocado en algo, he probado a poner un segundo vídeo en mi pestaña y funciona bien.

Puedes mirar en la página de Facebook del blog, al final de la pestaña he puesto un segundo vídeo de YouTube, de la misma manera que el primero. Es raro, debería funcionarte a ti también.

milenko dijo...

Hola Santi, Antes que todo felicitarte por compartir conocimientos con todos los que queremos dedicarnos a los medios digitales.
Mi nombre es Sergio Arias
y tengo el siguiente problema con la publicación del video de you tube en mi pagina de fb.

no se ve nada, y eso que seguí todo tu tutorial:
mira este es mi codigo:






así se me ve la pestaña:

http://on.fb.me/eoZpHb

si no ves el c´digo te lo puedo enviar por interno si no te molesta..

saludos cordiales

Amapola dijo...

Hola, tengo el mismo problema de Milenko, crees que puede ser por el cambio de formato que van a sufris las fanpages?

Agradezco tu respuesta, muchas gracias por tus tutoriales!

Santi Folch dijo...

Hola Sergio y Amapola: por favor enviadme por e-mail el código que hayáis puesto, a ver si detecto algún fallo. Hace tres días coloqué un segundo vídeo en la pestaña y funcionó bien, luego no creo que sea eso.

También, si lo preferís, podéis poner el código aquí, quitando los corchetes <> para que lo acepte el formulario de comentarios.

Amapola dijo...

Hola Santi, agradezco tu atención...!

Este es el código, probé con distintos videos y se sigue viendo blanco... Tambien probe borrando la linea de la imagen...

fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/crX31v5sJp4
imgsrc='http://img.youtube.com/vi/**********/2.jpg' width='340' height='270' /

Santi Folch dijo...

Bien, veo dos fallos Amapola:
El primero es que no has cerrado las comillas en la cuarta línea, el segundo es que, en la quinta línea, no has sustituido los asteriscos por el ID del vídeo. El código correcto sería:

fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/crX31v5sJp4'
imgsrc='http://img.youtube.com/vi/crX31v5sJp4/2.jpg' width='340' height='270' /

Recuerda poner los corchetes de entrada y salida. Verás como funciona :)

Amapola dijo...

Muchas gracias Santi, ahora sí, muchisimas gracias por tu atención.!

cuet10 dijo...

hola como mi nombre es Alvaro y queria agradecerte por tan excelente tutorial, segui todos los pasos que indicas y me funciona, pero como siempre no faltan los herrores y en mi caso es que en primera instancia cuando entro a la pagina muestra la imagen del video y tengo k hacer clic sobre ella para que salga la opcion de play y asee poder reproducirlo

Santi Folch dijo...

Hola Cuet, en el tutorial viene la solución para tu problema. Puedes sustituir la imagen inicial por otra que tu quieras, léete la parte final del artículo.

Si quieres que aparezca el icono de play desde el principio, podrías incluirlo en tu imagen inicial mediante Photoshop.

Oziel Garza dijo...

Hola.

Primeramente quiero recalcar que estas haciendo un excelente trabajo, hay pocas personas y paginas que ofrecen informacion sobre este tema.

En cuanto a mi duda, he estado investigando mucho sobre como colocar un video sobre un background y no he podido hacer que se vea todo el background, solo la parte donde aparece el video.

este es mi codigo:






Quiero darle medidas al background.

Como puedo hacer esto?

de antemano gracias!

Oziel Garza dijo...

No aparece mi codigo, lo trato de agregar y marca un error, no puedo agregar etiquetas div en los comentarios.

Santi Folch dijo...

Hola Oziel, es que el formulario de comentarios de Blogger no acepta los corchetes (<>). Si quieres poner códigos ponlos directamente sin los corchetes.

Respecto a tu pregunta, puedes usar CSS. La manera sería englobar el vídeo dentro de una etiqueta DIV y darle a ésta medidas concretas y un background. Después, el vídeo puedes posicionarlo mediante la propiedad margin o padding. Te pongo el código sin los corchetes:

div style="widht:520px; height:600px; background-image:url('AQUÍ LA URL DE TU IMAGEN EN INTERNET');"

AQUÍ EL CÓDIGO DEL VÍDEO (puedes meterlo dentro de otro div, y con la propiedad style darle un padding y un margin)

/div

Con este código el background mediría 520x600 píxeles, ese sería el tamaño de la imagen que tendrías que diseñar para el fondo. No puede ser más ancho porque se cortaría la imagen (520 píxeles es el espacio disponible).

Un sáludo y ánimo. Por cierto, te recomiendo que estudies CSS, te vendrá muy bien para trabajar en internet, y hay mucha documentación disponible.

Santi Folch dijo...

Atención, he escrito mal una cosa. He puesto widht, y es WIDTH. Así pues, el código sería:

div style="width:520px; height:600px; background-image:url('AQUÍ LA URL DE TU IMAGEN EN INTERNET');"

Oziel Garza dijo...

Excelente! muchas gracias, leyendo en tu blog puede saber como hacerlo, eh estado trabajando en este proyecto.

http://www.facebook.com/Electronic.music.mty?v=app_4949752878

Lo unico que me falta es editar varios datos que me faltan, tengo otra duda, por que aparecen espacios entre las imagenes que inserto en la pestaña?

he colocado un background negro para que no se noten mucho los espacios aun asi no me gusta como se ve.

Gracias por dedicarnos unos minutos a novatos en el tema.

Oziel Garza dijo...

Gracias ya lo eh solucionado agregando marging-top -4px.

Seguire tu blog, es excelente!

Saludos!

Melissa dijo...

Si el video está en www.dailymotion.com como sería el código?

Anónimo dijo...

Hola buenas,me gustaría saber como insertar un hipervínculo hacia mi web,a una imagen sola que tengo en la pestaña fbml,es posible?

Santi Folch dijo...

Hola Melissa, buena pregunta :) La verdad es que no lo sé, habría que investigarlo.

Anónimo: es muy sencillo, estudia un poco de HTML. Debes poner la imagen dentro de una etiqueta <A>

Javier. dijo...

Hola Santi.

Tengo una duda, es posible extraer el codigo FBML, de alguna pestaña?

Lo eh intentado sin tener exito.

Espero puedas ayudarme.

Santi Folch dijo...

Hombre, poder se puede. Si usas Firefox sólo tienes que seleccionar el contenido que te interese con click izqdo. pulsado y luego, con click dcho., elegir "ver código fuente seleccionado". Otra posibilidad sería ver todo el código fuente de la web y buscar la parte de la pestaña.

Zone Fitness Gym dijo...

hola gracias hice todo lo que ahí indicas y aun así no me aparece el vídeo no se xq? introduje el ID pero no me sale nada incluso lo puse con comillas y sin comillas como sale en el ejemplo agradecería que me ayudes gracias

Santi Folch dijo...

Sin problema, pon el código que has puesto (sin los corchetes, para que lo acepte el formulario de comentarios).

Pon también la URL de tu vídeo.

Porras dijo...

Hola, me sale todo bien pero al intentar cambiar la imágen desaparece el vídeo. Ya he leído que a lo mejor he puesto mal la URL pero la verdad es que está bien :( Esta es la URL que estoy poniendo entre las comillas de la imágen: http://www.flickr.com/photos/porras1981/5515310395#/photos/porras1981/5515310395/lightbox No se si este mal... Pero a mi me sale ahí la foto.

Anónimo dijo...

mi pregunta es acabo de crear una página como hago para colocar la información sea visible la entrar a la pag sin necesida de darle a la propia pestaña de información.

Jose dijo...

Hola Santi quisiera que me ayudaras, quisiera saber como hacer algo como esto

http://www.facebook.com/JessieJOfficial?sk=app_165003120220383

la verdad soy nuevo en esto y no se mucho, ya he intentado de todo, ya se como subir las imágenes. también se como subir los vídeos, pero no se como hacer las dos cosas juntas! no puedo ubicar el video donde quiero, ademas siempre que subo el video me sale un cuadro TRANSPARENTE y tengo que dar click para que me aparesca el video me ayudarias???

Santi Folch dijo...

Bueno, puedo intentarlo :) A ver, lo primero que te digo es lo de siempre: estudia HTML y CSS. Sin eso no vas a poder trabajar en internet.

Yo de ti lo tendría en cuenta. Bien, con CSS puedes dotar a un contenedor DIV de una imagen de fondo, y poner encima el vídeo. Osea, dentro de una etiqueta DIV, con la imagen que diseñes como background, pones el vídeo. Lo mejor es poner el vídeo a su vez dentro de otra caja DIV, para posicionarla mediante padding y margin (más atributos CSS).

Es todo lo que sé. Suerte y un saludo!!

dfernandez dijo...

Hola Santi estuve leyendo tu blog y me parece muy interesante, pero quisiera que me puedas ayudar como puedo poner botón me gusta a los videos, y si tuvieras un código para enlazar todo un canal youtube en facebook y con botón me gusta para cada uno.

Por favor necesito esta información, ya que voy buscando como un mes para un proyecto y no la encuentro. Te agradecería enormemente tu respuesta.
Un saludo desde Peru - Lima

Graciassss

Santi Folch dijo...

Hola dfernandez, me temo que no puedo ayudarte, no conozco los códigos que necesitas para hacer lo que quieres.

Sin duda debe ser bastante complicado. Si te enteras de cómo hacerlo por favor comenta.

Un saludo

diego dijo...

Hola por mas que he probado con el codigo que postean por todos lados no logro poner el video en mi fanpage.

No se que ocurre.

Este es mi codigo:



agradezco la ayuda a dsaavedra@crepic.org.co

Mil gracias

diego dijo...

fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/2LwzKrraChs'
imgsrc='https://dl-web.dropbox.com/get/Photos/facebookcrepic/videoimagen.jpg?w=279d98ec'
width='260' height='260'

Santi Folch dijo...

Hola Diego, he estado mirando tu código y creo que lo que falla es la imagen. El vídeo está bien, pero la ruta que pones en imgsrc no funciona.

Esto se debe a que tu imagen no está en un sitio público, sino en espacio privado de internet. Para que funcione has de poner la imagen en un alojamiento tipo imageshack o picasa.

diego dijo...

Hola Santi como estàs?

mil gracias por responder...

No creo que sea el sitios donde se encuentra la imagen pues las otras imagenes que tiene la fanpage estàn albergadas en el mismo sitio.

probe con esta imagen en otro sitio y no funciona tampoco...

http://www.imagengratis.org/images/videoimagen.jpg

Metì todo el còdigo en una celda de una tabla. El codigo es:
MA = mayor que
ME = menor que

ME td MA MEfb:swf

swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='www.youtube.com/v/2LwzKrraChs'
imgsrc='www.imagengratis.org/images/videoimagen.jpg'
width='260' height='260' /MA
ME/tdMA

Santi Folch dijo...

Pues sobre lo de MA y ME la verdad es que no sé nada (parece que sabes más FBML que yo ;)).

Aunque veo que las rutas no incluyen "http://" antes de las www. Así puede que no funcione (has de poner la ruta completa, incluyendo http://).

Por lo demás lo de la imagen no era ninguna tonteria. Donde la has puesto ahora sí es un sitio público, y se mostrará sin problema en tu pestaña.

No te puedo decir más. Un saludo!!

Anónimo dijo...

Hola Santi Sabes Que Me Pareció Muy Buena Tu Ayuda Sobre Las Demas Personas Me Gustaría Saber Si Sabes Como Agregar Un Video dailymontion en una pestaña de fbml (Facebook). Me gustaría que me dieras el código para agregar el vídeo algo así.

https://www.facebook.com/Chileazul.cl?sk=app_7146470109

Por Favor Me Puedas Ayudar Necesito Tu Ayuda.

Santi Folch dijo...

Pues no sé como hacerlo, lo siento :)

Anónimo dijo...

hola Santi, tengo una pregunta, no se si antes sucedia esto pero ahora (quizas por las actualizaciones de youtube o de fb) el video se mete dentro de un recuado donde sale en el borde derecho la bara de subir y bajar y en el borde inferior la barra de desplazarse a los lados, no se si me explico ojala me entiendas, el caso es que eso se ve feo y pues me gustaria saber como se puede eliminar eso y que se vea el video limpio a todo su ancho y alto...

Gracias

Santi Folch dijo...

mmm, eso suena a que la ventana en que se muestra el vídeo es demasiado pequeña, por eso aparecen manejadores de scroll vertical y horizontal.

Prueba a dar un tamaño mayor al lugar en el que hayas puesto el vídeo (tal vez en una celda demasiado pequeña de una tabla, o en un div de medida fija...). Si no está contenido en ningún sitio, prueba también a poner medidas mayores en width y height.

Me comentas qué tal, ¿vale?

Anónimo dijo...

Hola, gracias por responder, por cierto sale anonimo pero mi nombre es andy, mira le aumente el tamaño 20 pixeles mas y asi se quito el manejador vertical y se ve mucho mejor aun sigue el horizontal pero no importa no se ve tan feo ya jaja mejor asi que como estaba...

Gracias Santi

emmanuel villanueva dijo...

Disculpe , cual es el apartado '' FBML '' , y en donde esta ubicado ? no lo encuentro me podrias ayudar . Gracias .

Santi Folch dijo...

uy emmanuel, me parece que tienes muy poca información...

Puedes mirar este artículo, en el que se explica todo:

http://www.comunicacion-multimedia.info/2010/03/pestanas-fbml-de-facebook-usos.html

indiekarma dijo...

Y si a este se le quiere añadir una imagen de fondo? como se le hace. saludos

Santi Folch dijo...

Te digo lo mismo indiekarma, mira en el artículo que cité antes.

De todas formas ya te comento que puede hacerse con HTML o CSS. Las pestañas FBML lo aceptan. Aunque claro, has de conocer esos lenguajes...

Anónimo dijo...

Hola antes que nada gracias por la informACIÓN. Me sale todo bien pero tengo un problema que es que el video me queda insertado en un cuadro con skrolls, como puedo evitar esto?

Santi Folch dijo...

Muy sencillo, haz más grande el cuadro :)

Los manejadores de scroll aparecen cuando el contenido no cabe en el contenedor, así pues da valores mayores a width='340' height='270' (hasta que quepa tu vídeo).

Playzon dijo...

lo logre hermano, ya tengo mi video con autoplay en mi pagina, gracias por el tuto :D

mi page es: https://www.facebook.com/pages/Playzon-Snow-wesc/250864934959028

Santi Folch dijo...

Genial Playzon :)

Oye, pero he ido al muro de página, no a la pestaña "Welcome"... No la tienes configurada para que la gente vaya allí primero.

(por si no lo sabías, que igual así es como lo quieres)

Andrea dijo...

Hola, tengo un problema, cuando voy a la pagina de bienvenida, me sale la imagen donde empieza el video pero le doy click y ya no funciona, sale en blanco y no pasa nada ? que hage ante esto? Gracias

Santi Folch dijo...

ATENCIÓN: Facebook ha eliminado el lenguaje FBML (hace ya meses). Procedo por tanto a declarar obsoleto todo el contenido de este artículo. No me siento feliz con esta decisción de FB, que ha tirado el trabajo de meses de mucha gente, incluido el mío, literalmente a la basura.