lunes, 4 de octubre de 2010

Inserta ustream a una pagina de Facebook

Articulo Principal: Insert Ustream with static FBML

Hace unos días teníamos que hacer una transmisión de video en vivo para un cliente vía su Like/Fan Page.

Decidimos utilizar el servicio de USTREAM para el streaming de video porque es uno de los mejores.

Para insertar cualquier elemento (en este caso el video en vivo) dentro de una pestaña de Facebook necesitamos utilizar código FBML.

Empecé el google search con ustream fbml static y no encontré nada que resuelva mi problema exactamente así que modifiqué la búsqueda a youtube fbml static y encontré esto:


swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”


imgsrc=’’ width=’340′ height=’270′ />

Luego un par de neuronas hicieron conexión y recordé que USTREAM da servicio de embeder por HTML con un código como este:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ width=”400″ height=”251″ id=”utv658922″><param name=”flashvars” value=”autoplay=false&amp;brand=embed&amp;cid=637790&amp;locale=en_US”/><param name=”allowfullscreen” value=”true”/><param name=”allowscriptaccess” value=”always”/><param name=”movie” value=”″/><embed flashvars=”autoplay=false&amp;brand=embed&amp;cid=637790&amp;locale=en_US” width=”400″ height=”251″ allowfullscreen=”true” allowscriptaccess=”always” id=”utv658922″ name=”utv_n_816458″ src=”” type=”application/x-shockwave-flash” /></object>

Lo que sigue es intercambiar las partes que he señalado con negrita


swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”


imgsrc=’’ width=’340′ height=’270′ />

Sólo faltaría modificar la url de la imagen previa antes de cargar el video


Parece algo elemental pero no encontré nada en google =)

PD: USTREAM ofrece un servicio de hacer la conexión con facebook pero no es automatizado debes completar un formulario y esperar por la respuesta 2 semanas por lo menos.

Como añadir YouTube Videos o Flash a Paginas Facebook con Static FBML Pages

Articulo Original: How to Add YouTube Videos or Flash to Facebook Static FBML Pages

As detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by using Facebook's proprietary FBML (Facebook Markup Language).

Recently, someone asked us how to embed video in a Static FBML page. Well, you can actually embed any Flash object using FBML, and it's pretty easy. Here's how it's done if you want to embed a YouTube video (Note: you can use this technique to embed any Flash object with the .swf extension).


  1. Static FBML can only be used on Fan Pages, not Personal Profiles or Group pages.

  2. You can only use CSS and HTML in these pages, and FBML.

  3. Your video cannot start playing when the page loads. Facebook requires a user action (usually a click) to load Flash or run JavaScript.

  4. To position your video on your page, put the fb:swf code in a containing DIV, set to the width of the video, and position the DIV using CSS.

If you can't get this working::

  • Check your URLs: Make sure the URLs to both the activation image (imgsrc) and the video or Flash object are correct. You can test them by pasting the URL into your browsers address bar and accessing the image or video channel directly. If you can’t access them via this method, your URL is incorrect.

  • URLs are case sensitive: All directory and file names after the domain name are case sensitive. One misplaced capital and it won't work!
  • Close the fb:swf tag Make sure you have closed the <fb:swf> tag, with "/>" (without the quotes). If the tag isn’t closed, it won’t work.

  • Make sure quotes match and are closed: It doesn’t matter if they’re single (‘) or double (“), but they must match and they must be closed (width=’xxx’ or width=”xxx” – NOT width=’xxx or width=”xxx or width="xxx' ).

Embed a YouTube video using FBML

Here's the code you put on your Static FBML page:


swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"


imgsrc='' width='340' height='270' />

Replace "xxxxxxxxxx" with the YouTube video ID, which is the string of characters after the "v=" in the URL in your browser's address bar (up to the "&" or anything following it, if you see that after the string of letters and numbers). For example:

You would replace "xxxxxxxxxx" with "JOt2Qp0H9G8" in both places, resulting in:


swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"


imgsrc='' width='340' height='270' />

You can also change the values for "swfbgcolor" and "imgstyle" to your preferences.

The value "swfsrc" is the absolute URL to the Flash file you want to embed (YouTube videos are in Flash format).

The Preview / Activation Image — imgsrc

Facebook requires a user action (usually a click) to trigger Flash or JavaScript to run. There is no way around this requirement. The "imgsrc" image is the image the user will see in place of your video. When s/he clicks the image, your video loads.

To eliminate a second click to start the video after it loads, try setting your video to autoplay so that it plays immediately when the user clicks the activation image. You do this by appending "&autoplay=1" to the swfsrc URL:

swfsrc = ''

The value "imgsrc" is the preview/activation image. The YouTube thumbnails are small( usually 120x90 pixels), so you don't really want to use those for your activation image.

You can change the "imgsrc" URL to point to any image online, so you should probably create your own image at the 340x270 dimensions (or whatever dimensions you wish — the 340x270 is just an example), upload it to your server (or use an image hosting service like Photobucket to host your images).

On your Fan Page, an image appears first (the value of "imgsrc"). When the user clicks the image, it turns into the Flash object.

Positioning / Aligning your Video on the Page

If, for example, you want to center your video/Flash on the page, you need to put it inside a containing DIV and position the DIV using CSS, as in this example using the width of 492 pixels:

<div style="margin:0 auto; width:492px;">



imgstyle="border-width:3px; border-color:white;"


imgsrc='' width='492' height='391'/>


The "margin:0 auto" centers the containing DIV on the page. You can set the top and bottom margins to whatever values you wish, but the left and right values have to be set to "auto" to center the DIV.

The above is ONLY an example; set the values appropriate to your video/Flash.

Feel free to ask questions via comments, and I'll try to help.