(Anti) Social Development

(Anti) Social Development

by

How to Add a Flash Video to a Custom Facebook Fan Page Tab

LED Ring Flash (by Velo Steve)

Recently I’ve been studying FBML (Facebook Markup Language) to spice up my Facebook fan page.

One thing that I’ve discovered is that the Facebook Developer’s Wiki, while full of useful information, is even more difficult to understand than the WordPress Codex. Either it’s for people way smarter than me or the developers don’t want us common folk to understand what the heck they are doing ;-) The examples, however, for each tag are very helpful.

Another good place to get information or assistance about FBML is on the Static FBML Discussion page. There are a lot of people answering questions, providing links to tutorials and demonstrating working snippets of code.

So, what I wanted to learn was how to add a flash video, such as a youtube video, to a custom Facebook fan page tab using FBML rather than a Facebook YouTube Application. This code can be used on it’s own video tab or even within an existing tab such as Welcome, About, etc.

The Instructions

  1. First, you will need to add the Static FBML application and create a custom tab, if you haven’t already done so.
  2. Locate your flash video. This would be the link on YouTube or it’s location on your server. The URL to my video that I’m using in this example is http://www.youtube.com/watch?v=J_CjzJqoYtc
  3. You also need an image. It can be one of the frames on youtube or an image you have on your server. 2.jpg seems to be the default image frame used in the YouTube examples.
  4. The FBML code you can start with looks like the following:
    <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' />
  5. The parts of this code that have to be changed are:
    1. swfsrc=’http://www.youtube.com/v/xxxxxxxxxx’
    2. imgsrc=’http://img.youtube.com/vi/xxxxxxxxxx/2.jpg’
  6. The xxxxxxxxxx part is the ID number of the youtube video that you are using. You replace this in both parts. The ID is the part of the URL after v= so in my example it would be J_CjzJqoYtc
  7. Other parts of the code can be changed but aren’t necessary for the video to work properly.
    1. swfbgcolor=”000000″ – this is the background color. 000000 is black.
    2. imgstyle=”border-width:3px; border-color:white; – this sets the width and color of the border around the video
    3. width=’340′ height=’270′ – the size of the video. Remember that when Facebook finishes making their changes to Tabs and Boxes the area to work with will only be 510px wide.
  8. The final code that I used looks like the following:
    <fb:swf swfbgcolor="000000" imgstyle="border-width:3px; 
border-color:white;" 
swfsrc='http://www.youtube.com/v/J_CjzJqoYtc' 
imgsrc='http://img.youtube.com/vi/J_CjzJqoYtc/2.jpg' 
width='480' height='385' /> 
Click the image to start the video
  9. Please note that I added ‘Click the image to start the video’ below the code for the video. Facebook does not allow autoplay of these videos. It displays the image designated in our code. Clicking on that image will render the flash object and then the video can be started. Please don’t ask how to make the video autoplay – it can’t be done.

While working on this article, I made a simple tab called Video and added the code for it. You can view it on my fan page. And if you aren’t already a fan, it would be awesome if you became one.

I hope this was helpful. I’m still digging through the FBML documentation so I should have more articles for you soon.

photo credit: Velo Steve

It's Time!

Start your WordPress website project now!

Contact Me! >>



Keep Reading:
15 Best Facebook Tutorials (from this site)
Facebook Roundup: 37 Facebook Articles from 2010
How to Select Which Part of a Large Facebook Logo Will Be Your Avatar
How to Turn Off Facebook Notifications


Comments

    • Kim Woodbridge says

      Hi Vered – Oh me too! Although we may be in the minority. I would much rather read a tutorial than watch a video. I actually get annoyed when the only tutorial I can find is a video ;-)

    • Kim Woodbridge says

      Hi Krisit – With some styling the video could look really nice / cool. I was just trying to get it to work and didn’t do anything yet to actually make it pretty.

  8. Jamie Dunne says

    ~Hi Kim,

    Thanks for posting this – Great info …
    Ive being digging through numerous apps and code trying to do this..
    ..I guess its better to google and see how others did it!!

    I now have a nice face book fan page with optin & video to boot !!

    Thanks again.

    – Jamie Dunne

    PS:
    Nice blog here.
    .-= Jamie Dunne´s last blog ..New IM Weapon – Easy Video Player ! =-.

  9. Terri Brooks says

    I developed a video montage using One True Media. Can that be included in the Static FBML on a Fan Page Tab without uploading it to YouTube? I have tried to make it work, several times. It appears, but there is no way to show an image in which to click to view. If you hover over the page, you see the arrow change to a hand in which you can click to view. However, visitors would not know to do that.

    Any ideas?

    Thanks!
    Terri
    .-= Terri Brooks´s last blog ..Internet Marketing Solutions For 2010 =-.

    • Kim Woodbridge says

      Hi Terri – Does it work once you click on it? I would put instructions before or after the video telling them what they need to do to play it. Videos are kind of fussy on Facebook.

  10. Kelly says

    Kim you are an incredible woman. You have saved my insanity. The video is up and working. Still working on the page though. Did you know that after 6 hours online last night searching for answers YOU are the only person that has REAL SIMPLY EXPLAINED VALUABLE INFORMATION? Well you are. As far as Im concerned, when it comes to fbml – you are the one and only person to go to.

    Much respect
    Kelly

    • Kim Woodbridge says

      Hi Kelly – Thanks! I’ve found a lot of FBML information out there unnecessarily difficult to understand. Granted, some of it is a lot more complicated but a lot of it is pretty easy. One of my goals has been to learn how to do it and the rewrite the information in a way that anyone can understand. It’s almost like there is a FBML club that doesn’t want to let anyone in on their trade secrets ;-)

  12. Greg says

    Thanks for the tutorial.
    works great using youtube, I was trying to use a video of mine I have on facebook, I can get the video to play but I can not get a pic img in the box. How would I go about posting a facebook video?

  13. Sam says

    Hi Kim – Thanks for this great tutorial. I’ve had success with a facebook video but not my youtube video. The only difference i see is that my youtube video has a watch?v=nlin5buX3sI vs. youtube.com/v/nlin5buX3sI.

    Can you help me?
    I’m trying to get this youtube video:
    http://www.youtube.com/watch?v=nlin5buX3sI

    on my facebook page:
    http://www.facebook.com/pages/Hi5-Official-Corporate-Page/191009947590541

    here is the code that i have so far:

    The image loads but not the video.

    Thank You

    • Kim Woodbridge says

      Hi Sam,

      The code didn’t come through but that’s an issue with my comment form.

      The video has to be in this format

      swfsrc=’http://www.youtube.com/v/J_CjzJqoYtc’

      so yours would be

      swfsrc=’http://www.youtube.com/v/nlin5buX3sI’

      Otherwise make sure the video isn’t set to private.

Trackbacks

Comments are closed. Please contact me for specific questions or subscribe to my newsletter.

(Anti) Social Development

Sign Up!


Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

Follow Me

Pin It on Pinterest

asd

Sign Up!

Subscribe to the (Anti) Social Newsletter for WordPress Tutorials, Recommendations, Special Offers and More

You have Successfully Subscribed!