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
- Go to Vimeo and locate the video you wish to embed in your Static FBML box.
- When you mouse over the video image, you'll see the option to "embed" — click the "Embed" button:
- Copy the embed code. From this code copy the value for "embed src" (highlighted in blue, below):
- 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.
ShareThis
Technorati Tags: embed video, Facebook, fan page, FBML, Static FBML, vimeo
embed video, Facebook, fan page, FBML, Static FBML, vimeo
This entry was posted by timware on Friday, March 26th, 2010, 12:07 pm and is filed under Social Media / Inbound Marketing, Static FBML & FBML. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.
@mrjyn
October 24, 2010
Facebook Page Video Embed Tutorial (you think this isn't some tedious shit?) Vimeo on Your Facebook Fan Page
http://vodpod.com/dogmeat | Vodpod
Your feed will be far more interesting and fun if you follow some friends.
You added
Tiny Dancer (Feat. Posterous Chipmonks and Elton John) - Ironik
You added
Tiny Dancer (Feat. Posterous Chipmonks and Elton John) - Ironik
You added
By comparison, my cat almost puked on my head in bed this morning via Lex10 GlyphJockey
You added
By comparison, my cat almost puked on my head in bed this morning via Lex10 GlyphJockey
You added
Animated Clarence Thomas Porn Addict (Taiwan)
You added
Animated Clarence Thomas Porn Addict (Taiwan)
You added
Screamin' Sirens - Love Slave for valiant, taquila and pleasant
You added
Screamin' Sirens - Love Slave for valiant, taquila and pleasant
You added
Turk Rock
You added
Turk Rock
Comments
Dogmeat As I awoke this morningwhen all sweet things are bornA robin perched on my window sill to greet the coming dawnHe sang his sweet song so sweetly and pausedfor a moments lull Download now or watch on posterous Elvis_Ode_To_A_Robin.mp4 (2166 KB) I gently raised the window and crushed his fucking skull. handwritten poem by Elvis, recorded just days after his release from Baptists Memorial Hospital, November 1973.http://post.ly/yJIH http://whatgetsmehot.posterous.co Read More
15 hours ago
You added
Elvis crushed his fucking skull (Best Elvis Video Ever!)
Comments
Dogmeat As I awoke this morningwhen all sweet things are bornA robin perched on my window sill to greet the coming dawnHe sang his sweet song so sweetly and pausedfor a moments lull Download now or watch on posterous Elvis_Ode_To_A_Robin.mp4 (2166 KB) I gently raised the window and crushed his fucking skull. handwritten poem by Elvis, recorded just days after his release from Baptists Memorial Hospital, November 1973.http://post.ly/yJIH http://whatgetsmehot.posterous.co Read More
15 hours ago
You added
Elvis crushed his fucking skull (Best Elvis Video Ever!)
Comments
Dogmeat one of my most popular dailymotion videos on http://dailymotion.com/mrjyn Dogmeat Channel with over 1.5 Million Views! Subscribe to My New YouTube Cynophagie http://www.youtube.com/cynophagie Go like Dogmeat blog http://whatgetsmehot.posterous.com on Facebook http://www.facebook.com/dogmeat.fb here's my oldest blog What Gets Me Hot: http://whatgetsmehot.blogspot.com here's me on facebook http://www.facebook.com/cynophagie With over 10,000 Posts and Videos in the What Gets Me Hot family library, make s
Oct 25, 2009
Moon Unit Zappa Valley Girl
You added
Moon Unit Zappa Valley Girls
You added
Moon Unit Zappa Valley Girls
Watch videos, comment, collect, even upload videos right from your phone!
Dear Posterous: Is there any fucking reason for pulling the 'html' out of Posterous Profiles?
By comparison, my cat almost puked on my head in bed this morning via Lex10 GlyphJockey
By comparison, my cat almost puked on my head in bed this morning.
Comments
Dogmeat via mlevit.posterous.com Permalink | Leave a comment » Read More
85 mins ago