Design, Coding, SEO and Social Media Marketing, WordPress & Facebook

I previously posted a tutorial on embedding YouTube videos or other Flash objects (SWFs) in a Facebook Fan Page with Static FBML. So how do you embed Vimeo videos in your Static FBML box?

UPDATE: August 18, 2010:
It appears Vimeo has moved on from Flash to HTML5 for their embedded videos, for compatibility with iPads & iPhones: http://vimeo.com/blog:334. It's called "Universal Player." Says Vimeo: "We are not discontinuing the old embed code and as long as you use the sharing buttons in the Share box or the auto-share, sharing to these sites will work."

To deal with this you'll need to get the new URL from Vimeo. After selecting the video, click the "Embed" icon, then click on the "old embed code" link:

Grab that embed code from the screen displayed. Get the URL for the "swfsrc" from <param name="movie" value="USE THIS URL" .... />. If you want the video to autoplay after the user clicks the activation image, change "autoplay=0" to "autoplay=1" in the URL code. It should work fine.
(End Update)

PLEASE NOTE: If you can’t get it working, make sure:

• The URLs to both the activation image (imgsrc) and the video 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.
• You have closed the <fb:swf> tag, with "/>". If the tag isn’t closed, it won’t work.
• All quotes 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' ).

Embedding your Vimeo videos in Static FBML

1. Go to Vimeo and locate the video you wish to embed in your Static FBML box.
2. When you mouse over the video image, you'll see the option to "embed" — click the "Embed" button:
   
3. Copy the embed code. From this code copy the value for "embed src" (highlighted in blue, below):
   
4. Paste this value into "swfsrc" in the FBML code for embedding the object:
   Here's the code you put on your Static FBML page:

   <fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://vimeo.com/moogaloop.swf?clip_id=1658217&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='400' height='302' />


   The "imgsrc" parameter is the source for an "activation" image to load the video. Facebook requires this "user action" before it will load JavaScript or Flash on a Fan Page application tab such as Static FBML.

   For the "imgsrc" value, you can point this URL to an image you have hosted on a Web server, or to the image Vimeo uses to identify the video, which would be the image you clicked on the get to the video's page.

   To see this image's URL, just right-click it and select "View Image" (Firefox or Safari) from the popup window, and you'll see the image URL in the browser address bar at the top of your browser:
   

   If you use Internet Explorer, right-click the image, select "Properties" from the popup window, and you'll see the image URL value in "Address (URL)".

   Your final code would look like this:

   <fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://vimeo.com/moogaloop.swf?clip_id=1658217&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1'
imgsrc='http://images.vimeo.com/12/97/71/129771927/129771927_200x150.jpg' width='400' height='302' />


   The video's width and height values are also in the original embed code you copied from the Vimeo site, in the <embed src= ...> tag.

   Copy the above code into your Static FBML page. It should work.

   If you can't see the activation image (imgsrc) or the video, check the URLs by pasting them into your browser address bar to access the image or video directly. If you the URLs don't resolve to the intended files, then you've probably copied them incorrectly.