Learn To Embed A Video On Facebook Page

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

PLEASE NOTE:

  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:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' 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:

http://www.youtube.com/watch?v=JOt2Qp0H9G8&feature=related

You would replace “xxxxxxxxxx” with “JOt2Qp0H9G8″ in both places, resulting in:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'
imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' 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 = 'http://www.youtube.com/v/JOt2Qp0H9G8&autoplay=1'

The value “imgsrc” is the preview/activation image. The YouTube thumbnails are small( usually 120×90 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 340×270 dimensions (or whatever dimensions you wish — the 340×270 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;">
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI='
imgsrc='URL-TO-YOUR-ACTIVATION-IMAGE' width='492' height='391'/>
</div>

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.

VN:F [1.9.13_1145]

Previous Add You Own Custom Share Image for Each Page or Post - Wordpress Plugin
Next 10 Different Types of Facebook-"ers" - Which One Are You?

About author

Jarrett Gucci
Jarrett Gucci 289 posts

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

You might also like

Video Gallery 0 Comments

Select All Friends Facebook Trick

VN:F [1.9.20_1166] please wait… Rating: 9.3/10 (3 votes cast) TESTED 7-12-11 Here is how to do it: Go to your Event, Group or Page and click  “Suggest To Friends” or

Video Gallery 0 Comments

Facebook Fan Page Post Insights

Page administrators, go take a look at your wall. Under the newest posting, you’ll see that page insights now show up in real time. Until this morning, page administrators had

Video Gallery 0 Comments

Add You Own Custom Share Image for Each Page or Post – WordPress Plugin

TIME TO SHOW FACEBOOK WHO’S BOSS!!! Presenting The All New “Add Custom Share Image” Plugin For WordPress   Don’t let Facebook pick the image that is displayed when someone Shares,

Video Gallery 0 Comments

Produce HD Movies With Windows Movie Maker

Windows movie maker is great software, for it allows you to edit and make videos easily for free. However, Windowsmovie maker 2.6 cannot render videos in HD. High definition (HD)

0 Comments

No Comments Yet!

You can be first to comment this post!

Leave a Reply