Posted on 4 January, 2010 By Kim Woodbridge 23 Comments

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

 
Share

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


Related Posts:
  • How to Use the Facebook Livestream Application for Static Content and Dynamic Comments
  • How to Show an April Fool’s Day Message on Facebook Using FBML
  • FBML – How to Add a Share Button to Your Facebook Fan Page
  • Updated: How to Unhide a Facebook Application or Page
  • Upcoming Facebook Changes to Boxes and the Box Tab that Will Impact Your Custom Fan Pages
    • Posted In : Facebook
    If you enjoyed this post, please subscribe to my RSS Feed. You can also connect with my Facebook page or follow me on Twitter.



    23 Responses to “How to Add a Flash Video to a Custom Facebook Fan Page Tab”

    Trackbacks/Pingbacks
    1. FMBL – How to Add a MP3 to a Tab on Facebook Fan Page | (Anti) Social Development
    2. How to Use Facebook's Livestream Application | WordPress and Facebook Consultant | (Anti) Social Development
    Leave a Comment
    You may use: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .

    CommentLuv Enabled

    Recent WordPress Bookmarks

    Recent Comments

      • Ari Herzog: Agreed on the updates/inbox snafu. I rarely see page updates and I know where they are! .-= Ari Herzog´s last blog .....
      • jayson: Kim, Love the themes. I am looking to update the theme on my site to something more appropriate. My site is all abou...
      • vered: "I wish more people would use this. I think it’s silly when I get updates for things occuring in Kansas and California –...
      • Dennis Edell @ Direct Sales Marketing: I was speaking generally, not specifically this month. how exactly do you work things? .-= Dennis Edell @ Direct Sales M...
      • Lucy Beer: Unfortunately I think next to no-one actually sees those "Updates". They're buried in a subsection of the inbox and I do...
      • Kim Woodbridge: Hi Marbella - Thanks! I had a great time....
      • Kim Woodbridge: Hi Julie - I'll probably try kayaking again next summer but I don't know if I will become much of a kayaker - I had a di...
      • Kim Woodbridge: Hi Vered - If you ever get the chance, you should go. It's like a different world - it's so quiet and peaceful....

    About

    Kim Woodbridge is an accomplished Information and Technical Consultant specializing in the entire implementation of a WordPress based website including installation, theme design, upgrades, unique customizations and ongoing site maintenance.

    Wordpress Services

    • Installation, upgrades and maintenance
    • Conversion of existing html and css templates
    • Theme and plugin recommendations
    • CSS customizations
    • Troubleshooting and tweaks for unique situations
    • Customization for individual blogging goals and needs
    • Training and advice