Contact Us
  • How to Add YouTube Videos or Flash to Facebook Static FBML Pages

    PLEASE NOTE: Having answered the same questions about embedding YouTube videos and Flash in Static FBML custom tabs and using FBML many many times, I’m closing comments on this article and have posted a troubleshooting post for embedding YouTube videos and Flash which addresses all the issues that cause users problems when implementing the fb:swf FBML tag on their custom tabs. Please refer to this article for help, as I’ve closed comments on this post.

    The troubleshooting article, combined with this tutorial and the many user comments, should address your issues and get you sorted out. Cheers!

    Related: How to Embed Your YouTube Channel Video Player in a Static FBML Page

    Related: Tutorial: Embedding Vimeo Videos in your Facebook Fan Page with Static FBML

    As detailed in my previous blog post on the Facebook application Static FBML, this Facebook app is a great way to create custom pages with layouts created in CSS/HTML, or by using Facebook’s proprietary FBML (Facebook Markup Language).

    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.

    More resources:
    Facebook Developer Wiki on Embedding Video

    Comments

    1. This is perfect – I am meeting with a friend this morning to look over Facebook Fan Pages and he likes video. We will play with this and see what he thinks.

    2. thinking about embedding some video into a custom tab (made via static-fbml)…. I’m doing some testing right now and I can embed a youtube video… but not video from any other source (photobucket, etc…). Any idea if facebook blocks other video hosting sites? thanks!

      Grant

      • As long as the source video is in Flash format (has the .swf extension) then you can pull it into an FBML page, as described above. I haven’t tried using it with Photobucket. What’s the URL of the video you’re trying to pull in?

        • This worked great, and then I logged off my facebook fan page and found that, when I clicked on the image, I got an “error on page” message in the taskbar, yet it works ONLY if I am logged in. Is there a solution to that?

          Thank you,

          • Weird. What’s the URL to the image? And how did you call it in the app? (Remember, when entering code in a blog comment, make the opening bracket “&lt;” rather than the opening angle bracket.)

        • Hi Tim
          I´m trying to insert an swf file into my company fan page at Facebook. I´ve insert some links in the swf file. When i export it from flash everything works but when i inserted it at facebook, the links doesn´t work! It´s some quind of security problem?
          Best regards
          Helder

          • Make sure the links are full URLs (aka “absolute”). Facebook actually makes a copy of your swf when it pulls it in, so it’s hosted on their servers.

    3. This is great, thanks! Question though… I am trying to embed an swf slide show of images that I would like to have auto start when a person lands on the page (rather than requiring an additional click to start it). Is that possible using fbml?

      • Hi Lori … You can’t run any JavaScript that autostarts when the page opens. It has to be triggered by a user action.

    4. Thanks for this Info. I’ve added the code as described, but there is an “x” in my video box instead of the still shot of the video. Also for my other static pages, I do not see any content. Any advice?
      Nothing shows in IE in any of the boxes.
      http://tinyurl.com/ybdsz76

      • All I can say is it *only* works for .swf files. Feel free to send the code you’re using.

        • This is the code:

          <fb:swf
          swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
          swfsrc=’http://www.youtube.com/v/J4v5IXbEauM&hl’
          imgsrc=’http://img.youtube.com/vi/J4v5IXbEauM&hl/2.jpg’ width=’340′ height=’270′ />

          • The URL for the video is good, but URL for the image (http://img.youtube.com/vi/J4v5IXbEauM&hl/2.jpg) doesn’t go to an image, so that’s probably why you’re not seeing anything. The image URL, obviously, must point to an image. I tested your code with a valid image URL and it worked fine.

            On another note, if you post code to a blog comment, you can’t use the opening and closing brackets: < and > You have to use the ISO codes for these which are: &lt; and &gt;

    5. Does this method of embedding a YouTube this way into a StaticFBML App get captured by YouTube’s Insight Stats?

    6. I’ve embedded the following code in a box on my fan page…

      … and while it works, the user has to click on the first frame to see the play arrow and other controls. Any idea how I can show this with requiring an additional click?

      • First, I can’t see the code you tried to paste into your comment. Remember, you can’t paste straight code into comments. The opening bracket of the opening tag can’t be “<” – you must use the ISO equivalent which is “&lt;”.

        As for having to click the first frame to get to the play arrow, that’s just how it works. I’m not aware of a workaround. If you find one, please update your comment. Thanks!

        • Ah, OK if that’s how it works. I’ll look around some more and see what I can find out. Also in the future I’ll post the code correctly :)

          Thank you!

    7. Thank YOU SO MUCH!!! I had everything working but the image when you landed on the page with the embedded video looked awful, it was a blurry mess!! I have never working on Facebook but was volunteering my time to help this non-profit. You solved the problem with the suggestion of using Photobucket, I took a screen capture, opened a photobucket account and in less than a minute had everything working!!! Thank YOU!!! The only thing that worries me is you have to click twice, once moves it past the jpg, the second starts the video, probably no way to fix that huh? Oh well, I need to do some more stuff for them……..

    8. Is there a way to do this with a SlideShowPro swf? My link is here: http://heathmcconnell.com/media/slideshows/ssp-director-shows/splash/slideshowpro.swf

      • I don’t see why not. It’s a swf. Just make sure you set the dimensions to fit, keeping the same aspect ration (but you probably know that). Try following the above instructions and see how it goes. Lovely pics, btw.

    9. admin :
      I don’t see why not. It’s a swf. Just make sure you set the dimensions to fit, keeping the same aspect ration (but you probably know that). Try following the above instructions and see how it goes. Lovely pics, btw.

      Hey I tried the above instructions here:
      http://bit.ly/4GspQY
      I still get nothing.

      Oh… and thanks for the comment on the images.

      • Yes, I tested your swf and it didn’t work. This from the Facebook Developer Wiki:

        Facebook prevents direct script access from Flash with allowScriptAccess=none. To link or call JavaScript from your Flash object, you can use Flash localconnection and the fb:fbjs-bridge tag.

        Could this possibly be the source of the problem? I also wonder about the file size of your swf. I’m unaware of any FB limitations re file size, but ….

    10. timware :
      Yes, I tested your swf and it didn’t work. This from the Facebook Developer Wiki:

      Facebook prevents direct script access from Flash with allowScriptAccess=none. To link or call JavaScript from your Flash object, you can use Flash localconnection and the fb:fbjs-bridge tag.

      Could this possibly be the source of the problem? I also wonder about the file size of your swf. I’m unaware of any FB limitations re file size, but ….

      I’ll check it out. thanks.

    11. Hello, In I.E, my video player does not stop when a visitor clicks another thumbnail of another video, So the visitor will hear audio from video 1 while the second video begins: App can be viewed here: http://septemberswells.com/

      • Well, that’s a bit outside my scope. I do know that IE is one big World of Pain that has brought nothing but headaches to Web developers for many years :)

    12. I can’t get it to work no matter what I do. This is my code:

      Can anyone see what’s wrong with it?
      Thanks

    13. <fb:swf
      swfbgcolor=”000000″
      imgstyle=”border-width:3px; border-color:white;”
      swfsrc=’http://www.youtube.com/watch?v=TWeH4XAjQTw’
      imgsrc=’http://www.youtube.com/v/TWeH4XAjQTw&hl=en_US&fs=1&.jpg’
      width=’425′ height=’344′ />

      Sorry, re-submitting code

      • First, I fixed your opening “< " tag code so that it rendered properly in your comment. But getting to your code, you didn't follow the instructions. The swfsrc should be:


        http://www.youtube.com/v/TWeH4XAjQTw

        rather than the actual URL you have there. I tested this and it works.

        Your value for the imgsrc goes to a JPG but it’s not really an image, but a Flash object. When you identify a proper img, then link to it. It can be at YouTube or anywhere else of the Web and you would use the full URL to the image. But your imgsrc links to a Flash object, not an image.

        I tested everything and it works.

        Also, make sure your code is in plain text, rather than rich text.

    14. Thanks, I’d really love to see the actual code that worked because pasting the links you published don’t help the page. So far the best I can do is:

      fb:swf
      swfsrc=’http://www.youtube.com/cp/vjVQa1PpcFOSPYJU3MevxkWzJJluNR8W1QvsKUhhoJM=’
      imgsrc=’http://futurerelicsgallery.com/PotteryImages/smallHHpot1.jpg’
      width=’250′ height=’207′ />
      Click the Image

      • Lori, you’re still using the wrong swfsrc URL. Read the instructions and my previous reply *carefully* …. the YouTube URL should be in *exact* format specified:

        http://www.youtube.com/v/xxxxxxxxxxx

        where “xxxxxxxxxxxx” is the video’s ID (a string of characters … see the original post, above).

        And the image you’re linking to with imgsrc is a valid image, but it’s also really huge, so you may want to scale it down.

        And I assume you are using “<fb:swf ” for the opening tag.

    15. I appreciate your help, and I did read carefully, maybe the problem is that I’m an artist and not a programmer. Can you dumb down your answer for me? I could help someone else. What I’m trying to get is the image that looks like the image my browser displays when I go to http://www.youtube.com/v/TWeH4XAjQTw&hl=en_US&fs=1&amp;.jpg
      From what I’m reading that says .jpg but it’s really not, so how do I find the actual jpeg file that looks like that image so my visitors will know to play the movie without reading a text that says “click on image”
      The only reason I had the code that works is because, well, it works, just not well. When I changed it to the “correct” link if didn’t work. And no, I’m not using a rich text editor and yes, I’m using the correct “<fb:swf", you're just not seeing it hear due to the complications of the blog and posting HTML tag into the comments section.

      • To get that image you want, you could do a screen capture. But I just don’t have the bandwidth to teach the basics of all these technologies. I’d google around to see how to get images, how to upload them to a server so they can be accessed, etc. You can uploaded images to Photobucket for use on the Web. I can’t dumb down any further. I think my instructions on the proper syntax for the swfsrc and imgsrc are as clear as I can make them. Best of luck, Lori.

    16. Ah, a screen capture, I didn’t see that mentioned elsewhere so I was looking for an actual image, which of course I found but then found out that it’s not really an image. I can do the screen capture, now that makes better sense.

      Thanks

    17. I am trying to put the flash from this site (www.corbeau.com/virtualjeep/) into a tab on my fan page (http://www.facebook.com/pages/Corbeau-Seats/183686269626?v=app_4949752878). I do not think that it is a simple .swf file to link to so I am currently very confused on where to start.

      The code on the actual web page looks like this for the flash:

      //

      I know this may be a whole different topic or beyond what your able to instruct on this thread but any information would be appreciated.

    18. Sorry the code didn’t show up in my post. Here it is again.

      //

    19. It’s not showing up so you’ll have to just go to http://www.corbeau.com/virtualjeep/ and view page source. My apologies for all the posts.

    20. Hi im trying to embed the google form frame into my facebook fanpage that i’ve been working on. But when i put this code:

      Loading…

      nothing shows up. Could you please help me with this issue. Thank you very much. Great posts anyway. :)

      • First, you can’t use iframes with Facebook Tab pages. Second, I can’t see any code in your comment. Please use the following substitute characters in your code so that it displays in a blog comment:

        “&lt;” instead of “< " (without quotes)
        "&gt;" instead of ">” (without quotes)

        If it’s a complicated Flash (.swf) you’re trying to embed, there are Facebook restrictions around Flash that calls external files in order to run, or auto-running JavaScript.

    21. I have downloaded 2 videos and am wondering how to spread them out under the videos tab? They are currently stacked on top of each other.

    22. hello i was wondering if you also knew how to post youtube videos to face book pages? I have a page but cant get a video on the page i have. it keeps posting it on my personal profile when i do it. Im using the youtube video box which creates a tab, but cannot seem to get a vid up on it.

    23. Hi Tim,

      I was able to eliminate one click by adding this: flashvars=”autoplay=1″

      So the code looks like this:

      <fb:swf
      swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;”
      flashvars=”autoplay=1″
      swfsrc=’http://www.youtube.com/v/dMH0bHeiRNg’
      imgsrc=’http://img.youtube.com/vi/dMH0bHeiRNg/2.jpg’ width=’340′ height=’270′ />

    24. My player is working great and the video is working great. I used the embed code that was provided by the author of the video and tweaked it to work with FBML.

      However, only one video will appear per page.
      Has anyone had a problem like this. I’m not a programmer so It could be something simple.
      I’ve tried putting them in separate table rows and separating them with line breaks but no matter what only one video will appear.

    25. I added a YouTube video to my Fan Page and it’s working great. But the video is quite small. Is there a way to make it bigger, to make it take up the whole page?

      Help would be appreciated!
      -Thanks

    26. Hi! First of all, thanks a lot for explaining all this. I was wondering. Now that I’ve followed your tips and tricks the embedded video appears in the tab “boxes” – however I can’t find a way to post this embedded video on the pages wall so that fans will get noticed. Is that possible and if yes, could you explain to me how?

    27. Hi, if i wana do an app which embed videos from youtube, and at the same time allow users to view the app and video from iphone, the example shown above does not support. Since iphone supports youtube video, is there a way that the video can be made playable on my facebook app on iphones?

    28. Hi,

      I am using the following code on my FB fan page, but everytime i click on the pciture it just disappears and does not take anywhere. Can you please help?

      • Well, you didn’t enclose your code within the <code></code> tags so I can’t see it. But from your description, it sounds like the img you specified is being found, but not the video file. Make sure the URL to the video is correct. Test it in your browser.

      • Hi Tim, sorry about not including the . Let me try doing this again. So the code is:


        Gender and Development: Interview with Gita Gopal

        Lessons from Kyrgyz Republic Health Sector Reform Projects I and II

        and as I mentioned before, when i click on the picture it takes me to no where. I double checked all the links and they seemed to be the right ones. Thanks in advance for your help.

        Bahar

        • I’d need to see the FBML code you’re using to play these videos. Just one will do. The links do go to videos, so they’re the correct links. I suspect the issue is with the coding.

          • Sorry, I used to include my FBML code. Here it is again:


            <fb:swf
            swfbgcolor="000000" imgstyle="border-width:1px; border-color:white;" swfsrc="http://www.youtube.com/watch?v=l1v8netwE5o" TARGET="_blank"
            imgsrc='http://img.youtube.com/vi/l1v8netwE5o/2.jpg' width='120' height='100' title='Gender and Development: Interview with Gita Gopal' />

            • Try it without the “TARGET” attribute. I don’t use that and it may be causing the code not to work. I also haven’t used the “title” attribute, so you may want to omit that, as well. And, as a rule, I’d be consistent with using single or double quotes.

          • Tim, i figured it out. The issue was not in using “title” or “traget” codes. I simply had to delete the word “watch?” from the link. Now I gotta figure out how to open the videos in the new window. Thanks much for your help.

    29. I have got the flash inserted into my FB page but the image is blurry, I have tried specifying a size per your instructions above, but it is still blurry – help :)
      This is what I have so far. Thx

    30. Here is the code for some reason it got dropped from original post.

      • When posting comments to this blog, you *must* surround your code with <code></code> or it won’t render! Per the instructions in bright red. As you’ll notice, your code didn’t come through.

        If you check the URL to your Flash file *outside* the context of the FBML page, how does it look? That is, if you access it directly. The blurriness could be the result of the width/height parameters you have set in the FBML code being larger than the actual size of the video. So check that.

          • <fb:swf width='651' height='488'
            swfsrc='http://www.MOCG-ISO.com/flash/BeyondISO.swf'
            imgsrc='http://www.mediafire.com/imgbnc.php/eb1d21c3a379a99153d175e79541e6092g.jpg' width='340' height='270'
            />

            • Your Flash URL checks out fine and seems to be vector-based and scalable. The image you point to that says “Please click to open” is 191px in width, 143px in height, so sizing it to 340 x 270, as you do, is going to distort the image.

        • sorry – I mean the blurriness if the image that has to be clicked to activate the flash rather than the actual flash presentation itself.

        • I just checked the jpg in MS Picture Manager and it says it is 340×255. No matter what I change the dimensions to on the fbml page is doesn’t change the clarity or size of the image. Can you suggest how I can rectify this I am open to creating a new image but don’t want to make the same mistake again. Thanks. FYI I created the current image in powerpoint saved it as a jpg and resized to what I thought was 340×270 but it actually made it 340×255

    31. I just resized to 191 x 143 and it looks just the same

    32. I tried using the code to pull a swf file. It works, however the original background color of the swf did not appear…

    33. I am having so much trouble doing this for my fan page. Here’s my code

      fb:swf swfbgcolor=”000000″ imgstyle=”border-width:3px; border-color:white;” swfsrc=’http://www.youtube.com/v/ vjVQa1PpcFP1cgHTihx2Tq33oo0w4BXZSx67fopxuTA imgsrc=’ http://www. screencast.com/users/LisaBorders/folders/Jing/media/7084dd3a-c0a1-4ea3-8594-bef88687f331 jpg’ width=’340′ height=’270′ /

    34. The image clicks to the video but then the video wont play. It just keeps loading…any ideas?

      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/4kRY6-opFWM'
      imgsrc='http://img.youtube.com/vi/4kRY6-opFWM/2.jpg' width='400' height='225' />

    35. I wanted to say thanks for all this info. This is by far the easiest, most accessible site on this subject that I’ve found. Facebook’s developer pages and wikis are not easy to follow, and not easy to find the info needed… Especially for someone with the attention span of a fruit fly, like me…

      Is there any reason why an .swf flash movie doesn’t automatically begin playing like it does on any other website?

      • Facebook doesn’t allow anything to happen on pages without the user first taking an action. So SWFs don’t activate, nor does JavaScript. Just the way it is. But then, FB isn’t just “any other website.”

    36. Hi. Can this only work with vido uploaded on You Tube? Could it be done using photbucket, as my video clip is there. If so what would be the code to use in the FBML tab?

      • As long as the output file you point “swfsrc” to is a .swf file, it should work. You might just try it out, putting the absolute URL to your photobucket video as the value for “swfsrc”.

    37. hi,used the codes and worked perfectly but can you help with this, my swf source code cant pull my .xml file and .php file form my server

      • When you reference the SWF file, FB creates a local version of it. Because that SWF file then references a local ‘config.xml’ file, FB couldn’t find that file and didn’t load anything. You can get around this by adding to the <fb:swf /> a flashvars variable that includes the absolute path of the config.xml:

        flashvars = ‘xmlFile=http://URL-to-config-file/config.xml’

    38. This tutoral was wonderful. I’ve read all the way through and still seem to be missing something – sorry if I missed the answer.
      My question – I used the code and it works perfectly with firefox. But, in IE 8 – when I click on photo everything disapears…… any suggestions?
      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/01_1pa7GGkE'
      imgsrc='http://i753.photobucket.com/albums/xx176/clovercity/creat2sell/leylas-youtube-snag-sm.jpg' width="250" hieght="150" />

      Thanks – Cindy

      • Hi Cindy, The paths to the SWF and the image appear to be correct.

        I notice that you misspelled “height” (hieght) – if it’s that way in your code, then IE could probably choke on it :)

        I also assume there is no manual line break in the path to the image.

        Otherwise, it all looks good.

      • Thank you! Thank you, Thank you! A simple mispelling was it. I really appreciate you taking the time to look at the code. Cindy

    39. Hi
      I´ve got a problem when i create my code of youtube player. I´ve got:

      And i think i´ve to get the /V/ after the youtube url.

      I tryed with your picture but it doesn´t works.

      Can you help me?

      Best regards

      Helder

      • Helder, You need to surround any code you put in your comment with <code></code>. Otherwise, it doesn’t show up at all.

    40. Hello,

      We’re trying to embed a flip-book flash file that calls other flash files within it. Each page is its own flash file.

      Here’s that online – http://www.tractionokc.com/newbnine/index.html

      Here’s what we’re using to embed, but the viewer doesn’t load the pages in.

      <fb:swf swfsrc="http://tractionokc.com/newbnine/movie.swf" width='760' height='480' imgsrc="http://tractionokc.com/trxn-loadr.jpg" />

      And here’s where we’re posting it so you can see what it’s doing.

      http://www.facebook.com/tractionokc?v=app_6009294086

      Thanks for any help you can offer in advance!

      Tyler

      • One thing you need to know about Flash and Facebook. FB makes a copy of your Flash on it resides on *their* servers, so any calls to other files have to be full/absolute URLs, rather than URLs relative to the main Flash.

        If there is a flashvars parameter for your Flash, make sure you include that in the tag:


        <fb:swf
        swfsrc = "http://tractionokc.com/newbnine/movie.swf"
        imgsrc = "http://tractionokc.com/trxn-loadr.jpg" width='760' height="480"
        flashvars = "[whatever they are" />

        • Thanks for the response. The software we’re using to generate the flip books is compiling all the files, so we’ll have to dig into that and see if we can work around it.

          Thanks again.
          Tyler

        • So, one more quick question. We’re looking into it and aren’t really very familiar with flashvars, and don’t find that exact term in this code we have, which is just an HTML file embedding the main .swf.

          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>Publication Name: </title>
          </head>
          <body style="margin: 0px;">
          <!--<ProductVersion>1.5.20</ProductVersion>-->
          <script language="JavaScript" type="text/javascript">

          function getURLParam(strParamName){
          var strReturn = "";
          var strHref = window.location.href;
          if ( strHref.indexOf("?") > -1 ){
          var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
          var aQueryString = strQueryString.split("&");
          for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
          if (
          aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
          var aParam = aQueryString[iParam].split("=");
          strReturn = aParam[1];
          break;
          }
          }
          }
          return unescape(strReturn);
          }

          document.write(
          '<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"n'+
          ' codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"n'+
          ' WIDTH="100%" HEIGHT="100%" id="flashMovie" align="middle">n'+
          ' <PARAM NAME="allowScriptAccess" value="sameDomain" />n'+
          ' <PARAM NAME="allowFullScreen" value="true" />n'+
          ' <PARAM NAME=movie '+
          ' VALUE="movie.swf?pageNumber='+getURLParam('pageNumber')+'" />n'+
          ' <PARAM NAME=quality VALUE=high />n'+
          ' <PARAM NAME=bgcolor VALUE=#ffffff />n'+
          ' <PARAM NAME=scale VALUE=noscale />n'+
          ' <EMBED src="movie.swf?pageNumber=' + getURLParam('pageNumber') + '"' +
          ' bgcolor=#ffffff WIDTH="100%" HEIGHT="100% '+
          ' quality="high"' +
          ' scale="noscale"' +
          ' name="flashMovie"' +
          ' allowFullScreen="true"' +
          ' TYPE="application/x-shockwave-flash"'+
          ' />n'+
          '</OBJECT>n');
          </script>
          </body>
          </html>

          With that said, we hate to lay too much work on you. So, if this is something that is going to task you more than you’d like for a comment on a blog, we can start a dialogue via email and, if successful, we’ll pay you for your time.

          Thanks again.

          Tyler
          tyler [at] tractionokc [dot] com

          • Sorry, this is outside what I can deal with on this blog. We can discuss your hiring my company HyperArts to look into this for you. tim at hyperarts dot com. We could estimate the time/cost for getting this Flash to work.

    41. hi there
      am trying to just put a jpeg image on the fbml page but dont know html whatsoever!!
      would love it if you could help me do what seems impossible but what probably seems ridiculously easy to you

      • I can’t provide support for basic HTML. There are tons of resource on the Web for this. And inlining a jpeg on a Static FBML page is just like doing it in regularly HTML, unless you’re talking about using it as the starter image for a video, in which case it’s laid out pretty well above.

    42. Hi there, thanks for the help on adding videos. I just have one question: is there a way to make the video auto-play after you click the activation image? Thanks

      • I don’t believe so, Justin.

        • Ok, I found a way to do it. You just add &autoplay=1 to the end of the source code and it works!

          • Great! I learn something new everyday! I tested and works great. As you say, just append: &autoplay=1

            at the end of the swfsrc URL, eg:

            swfsrc=’http://www.youtube.com/v/sXh4EuJa2TU&hl=en_US&fs=1&autoplay=1′

            Thanks Justin.

    43. Hey,

      I have got a little problem.
      The video works fine so far..and thx a lot for all ur tips.
      But I would like to let the video open in front of the backround.
      So that the back-picture stays.

      Here is the desgn:
      [ URL deleted … no such file ]

      I would like the video to appear in the pictureframe.
      But it doesnt work.
      When I click the video, the frame vanishs…and the video appears. that doesnt look nice :)

      could u help me?

      Greeting

      Hailie

      • Your URL was broken. Your question has to do with configuring Flash. I’d just google to find your answer, or check out more Flash-focused forums.

    44. I’d like to be able to put multiple videos on my FBML tabs. All my videos are on Blip.tv, here is the code for two videos I’d like to place together:

      [ URLs deleted ]

    45. I’m trying to publish a YouTube video to my wall with a preview image which will play when people click on the image by entering the following code into the text box on Facebook.

      <fb:swf swfsrc='http://www.youtube.com/v/6xM5rVp4cLI' width='480' height='272' imgsrc='http://farm5.static.flickr.com/4021/4461958463_7430a278b0.jpg' />

      After posting the code, I end up with the code in text box and some links. Do I need to wrap my code in some other FBML for this to work correctly?

      • You have to be putting this code in a Static FBML box. I checked out the URLs for the swf and the img and they’re good.

        • Thanks for the information about needing a Static FBML box. I was able to add the My Info application in Facebook as a tab on my profile page and the code worked there.

    46. So how would I go about using a vimeo video. I’ve tried to just substitute vimeo links instead of the youtube, but it’s not working.

    47. Having the video play without having to click twice is very important, so &autoplay=1 is pretty helpful. However I’m using a .swf file, not something on YouTube, so I’m pointing directly to the swf file (absolute link), so that doesn’t work.

      And in addition, I see lots of FB pages with embedded video, not just YouTube, and they all work without having to click twice.

      [ URLs deleted ]

      • You can add “&autoplay=1″ to the end of a .swf file, not just to the end of a YouTube URL. I imagine that the sites you referenced above use this method. Also, on canvas pages, as opposed to application tabs such as Static FBML, there isn’t the requirement of a user click before the Flash object loads. And, BTW, have you met “Nathan” who also just posted a link to his fan page from a comment on this blog?

    48. When I try adding “&autoplay=1″ to the end of the swf, it won’t play at all. Don’t see Nathan on this blog…I searched.

      • &autoplay works great on youtube videos, but no matter how I try it with a link to a xxxx.swf file, it won’t work. Neither does flashvars autoplay.

        • Appending “&autoplay=1″ to .swf has worked for me consistently. Send along the URL of the SWF you’re trying to autoplay.

      • I think the problem might be that autoplay is set to “false” or “0” in the SWF itself. When I clicked to view your Flash file, it doesn’t autostart. I tested appending “?autoplay=1″ to a different .swf file and it worked fine.

    49. Maybe that’s it. I know the SWF itself is not set to autosart. I appreciate your help. I’ll just put the video on YouTube and do it that way, since that works like a charm.

      I stared to work on a FB canvas since I tested it in the FB Developer sandbox, and it worked fine. But, the problem is that creating the canvas requires quite a bit more than I really need. Setting up the app on another server, etc. Not sure, that seems like quite a bit of complexity just to save one click on a video.

    50. Hi,

      Is it possible to embed the player into the videos tab of a normal facebook profile page (as opposed to a fan page)?

      I’ve tried everything and have done my best to follow your instructions with the code below but I don’t know where to paste it into the facebook profile.

      Thanks !

      :) Martin

      • Jennifer says:

        You go to the page and click on edit page. :)

      • Martin,

        It IS possible to embed the player on a personal FB profile. However, you will have to go about it the same way as you would with a fan page (install a new app). Instead of FBML, look for an app called My HTML: http://apps.facebook.com/my-html/

        The only down fall is the new tab that is created by My HTML, the name of the tab may not be changed. Same idea, different user type. Hope this helps.

    51. No Martin you can’t but you can do what I am doing – creating an FBML tab and just naming it video and embedding there.
      Do you know what I am doing wrong when trying to add more than one? I can get one to show but not another.
      thanks,
      liza

    52. jonathan says:

      may i know the maximum width and length for the swf???

      • If you’re putting it on a Static FBML tab page, I’d limit it to 520px in width, as Facebook will be reducing the width of application tabs to this width. Also, it depends on the actual size of the swf.

    53. You’re AWESOME – this worked perfectly inside my application on a tab.

    54. Hello,

      I have two Facebook pages that have ssp slideshows
      embedded in them. They seem to work okay in Firefox, but not in IE:

      On this one,
      http://www.facebook.com/evergreentheatre?v=app_4949
      752878&ref=ts the show is chopped off at the top on IE, but plays just fine in FF. I have tried increasing the height and it makes no difference, nor does the salign. I have also tried showall, no difference. Removing the scale line does not change it at all.

      Here is the code (for the first, which is a slideshow pro Director Gallery):
      <fb:swf
      swfsrc='http://www.shadowsandlight.ca/webgallery/evergreen_2010_ssp.swf' height="580" width="570" salign="T" quality="best" scale="bestfit"
      imgsrc='http://www.shadowsandlight.ca/placeholder.jpg' width='550 height='560' />

      On this second FB page, I cannot get the images to load on IE only (works fine in FF). The gallery and thumbs are all blank.
      http://www.facebook.com/pages/Steven-Kennard-
      Turned-Art-and-
      Sculpture/118883614790108?v=app_4949752878

      Code:
      <fb:swf swfsrc='http://www.stevenkennard.com/sk-
      turned.swf' height="660" width="560" salign="T"
      quality="best"imgsrc="http://stevenkennard.com/grid_pla
      ceholder.jpg" width="560'" height="660" />

      Any ideas please? I

      Cheers!

    55. Hi Ellie. Well, in the first fb:swf, I see that there is inconsistency between the height/width of the swf and the activation image. Perhaps that’s causing the cutoff in IE? I’m using Firefox on Mac and both your SWFs work just fine. I’m not in a position to troubleshoot IE issues here, but perhaps someone else can jump into the conversation…..

    56. Hi Timware (?)
      Thanks for checking it out for me and for letting me know it works okay in FF on Mac. I have changed the size of the activation image to match the swf sizes, but it didn’t make a difference, unfortunately. It was a good thought.
      They both work fine here on FF as well, which is the annoying thing.
      I hope someone else might have another thought.
      Cheers!

    57. Found the answer to question #1, as the flash file originally made had an incorrect measurement. This didn’t show in other embedded sites, oddly enough.

    58. Hello Tim!, Well first of all thanks for all the time you spent teaching and helping people like me on the hyperarts, that being said, I’ve been looking everywhere for a way to embed a video via fbml which i uploaded to the facebook video app, of course, i cannot use the embed code they provide:

      and of course, they dont give away where the .flv file is and neither do the .swf, so there’s no cut around using the fb:flv or fb:swf tag, is there any way to this ?!

      thanks a looot

      • If the video is a SWF, you just need to upload it to a Web-accessible server and link to it using the code in this post. But you could also upload the video to YouTube and link to it there. Everything is in this post.

    59. Hi! I embedded it into my fbml and when I went to look at it there was just the image of a camera and I clicked on it and it disappeared. Then I embedded yours to see if it would work and when I looked at it, the picture was there and then I clicked on it and it disappeared. Any ideas what I did wrong?
      Thanks

      • Did you test the URL of the video directly to see if it’s correct, by pasting it into your browser’s address bar? It sounds like your activation image URL is correct (assuming it’s a picture of a camera).

    60. Thank you so much – I’m learning.

      My question is so simple I’m embaressed. I want to make an a ftml tab that simply goes to an external web site when clicked. Is there a simple html code to do that. I can, and have, learned to embed a link that you have to click on, but want the tab to go directly to the external site. Possible?

    61. Hi,

      Great post!

      Is there anyway I can embed a YouTube custom video player (playlist) into a static FBML page?

      The method above only works for single videos.

      Thanks.

    62. I’d like to embed more than one video on only 1static page. Is this possible? i tried using the same code to embed 2 videos. I pasted the same code twice, just inserted the Youtube ID into the first code, then the other ID into the next. Didn’t work though. Only the first video showed. Help please?

      • You can easily add multiple videos. Make sure each instance of <fb:swf (that is, each video) is closed with the “/>” tag (without the quotes).

    63. Hi Tim

      Very good site, useful informations but I have been struggling to insert a flash slideshow using an external xml file. I can insert the flash animation, however I don’t know how to link it to the xml file needed to load pictures.

      Any ideas how to do so on a facebook fan page ?

      thanks

      Dewey

      • Make sure the URL to your XML file is the full URL (http://….). Facebook makes a copy of your Flash file on their servers, so relative URLs won’t work.

        • i av the same problem , cud u show a sample code of how to use an external xml file or an external php script.
          cheers.

          • Nope. I’m not a Flash developer. You’ll have to google around, I suppose.

            • Hi tim googled it and landed on your page. what i actually meant is using the method above, what code should i use in calling the external xml file from my server to facebook.
              thanks.

            • sidharth says:

              I also have the same problem. How do i load content from my server into the swf in a tabbed application ?..it seems flash doesnt load external content. I even tried the loading a crossdomain.xml and allowing *.facebook.

            • Flash will load external content, but URLs to that content have to be full/absolute URLs, not relative to the Flash file.

            • @asoto: As I said, this sounds like a Flash-encoding question. All I can tell you is that Facebook makes a copy of your Flash, so any calls to external files from your Flash file must use full URLs to the files.

    64. Asoto, I can’t provide any support for Flash. It’s not my area of expertise. I don’t even understand the question. Sorry.

    65. I just tried this at my job and it was perfect. Thanks!

      –GCII

    66. I’ve tried to embed my swf file in the fmbl box, but it doesn’t seem to work.

      Here is the code I’ve used


      <fb:swf
      swfsrc='http://jelly88.altervista.org/Altervista_ht/tast3.swf'
      imgsrc=http://sphotos.ak.fbcdn.net/hphotos-ak-sjc1/hs329.snc3/29060_106137226096002_106106049432453_47675_7049359_n.jpg'
      width='500'
      height='400'
      />

      I can perfectly see the file opening it directly on my web browser, but it doesn’t work with fbml, so that I only see a blank page.

      Can you help me?

      Thanks

    67. now my code looks like this

      but still it doesn’t work.

      the strange thing is that if i open the swf in my web browser, then i can see it also in the fbml. otherwise i can’t see it, for example if i clear the cache it disappears. i really can’t understand the reason of this.

    68. now my code looks like this

      <fb:swf
      swfsrc="http://jelly88.altervista.org/Altervista_ht/tast3.swf"
      imgsrc="http://sphotos.ak.fbcdn.net/hphotos-ak-sjc1/hs329.snc3/29060_106137226096002_106106049432453_47675_7049359_n.jpg"
      width="540px"
      height="430px"
      />

      but still it doesn’t work.

      the strange thing is that if i open the swf in my web browser, then i can see it also in the fbml. otherwise i can’t see it, for example if i clear the cache it disappears. i really can’t understand the reason of this.

      Read more: http://www.hyperarts.com/blog/how-to-embed-youtube-videos-flash-facebook-static-fbml-pages/comment-page-2/#comment-3715#ixzz0mh9kO5Wd

    69. good day! I just want to aks is there a way that I can put the comment box to that static page .coz i’ll be creating a promo page were users will watch a video on that static page and comment on that at the same time

    70. Hello,

      this is the code I put on my Fan page in the FBML box:

      <span style="color:#000080">
      <center>
      <strong>
      <font size=+1>Click on a gallery to launch.</font>
      </strong>
      </span>
      <p>

      <fb:swf

      swfsrc='http://www.photoshelter.com/swf/CSlideShow.swf?feedSRC=http%3A//www.photoshelter.com/c/tcharara/gallery/Horsemen-portfolio/G0000m1lZreSb138%3Ffeed%3Djson'

      img src='http://farm4.static.flickr.com/3097/3896050501_fefec2cf35.jpg'

      width='520' height='400'

      waitforclick='true'
      />


      Click on a gallery to launch.

      Unfortunately, I don’t get the static picture to display. Both links point to a usable file when used seperately in a browser, the above code only gives a blank. I can click on the blank and get the swf file to execute…

      Any ideas? here’s a link to the fan page:

      TIA,

      Tarek

    71. :( That’s like looking for your glasses and having them on your nose! ;-)

      Many thanks!

      Tarek

    72. Hi there, I’m having problems with the code. I have input the below, and when I try to launch the video it comes up with “Flash Player upgrade required”, this is on IE, Firefox, etc. at home and at work (on multiple machines), the Flash version is the latest.

      Anything wrong with the code??

      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/clJA2IKCovs'
      imgsrc='http://version1.europeana.eu/image/image_gallery?uuid=5a2e99d3-ce78-47ac-a7ed-0973e0d1e382&groupId=10128&t=1273490189296' width='425' height='354' />

      Thanks!

      • This sounds more like an issue with your computer software than the code you’re using. Did you check the Flash file directly in your browser with the above URL? Same error? The URLs do point to files, so the code looks fine.

    73. Does the same method apply when embeding an Mps3? I have a copy on my computer. Thanks!

      • For MP3s, just use this code:

        <fb:mp3 src=”FULL URL TO MP3 FILE”
        title=”TITLE”
        artist=”ARTIST” album=”ALBUM TITLE”/>

        Facebook then renders its MP3 player which is rather bland, but works great.

        • Hi Tim,i tried to use your code in my FB fan page static FBML and worked great.Is there a way i could make this video or mp3 autoplay? Thanks

          JR

          • As it clearly states in this post, add “&autoplay=1″ after “.swf”:

            name.swf&autoplay=1

            If it doesn’t work, it may be that the SWF has autoplay=0 baked in.

    74. Hi Tim, i tried to put “&autoplay=1″ but did not work.This is currently my code in FBML without the autoplay:

      Thanks,
      JR

      • Hopefully, right above the “submit” button when you make a comment is bright red text asking that you surround your code with <code> … </code>. Do you not see that, or at least not see the results of your comment above where there’s no visible code? Follow those instructions, and maybe I can help out.

    75. Hi Tim,sorry i’m not really good with HTML.The very 1st characters of my code looks like the one in post #35 where i put the “&autoplay=1″. Here is my code again without autoplay..

      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/t9cfDc2stls'
      imgsrc='http://img.youtube.com/vi/t9cfDc2stls/2.jpg' width='520' height='400' />

    76. When I input this code, the facebook page displays a blurry preview image. There are no indications that it is a video.
      Once you click the blurry image, it reloads as a clearer image with youtube’s logo and a “play” button.
      Is there a way to cause this to immediately load the player, skipping that first step featuring the blurry image?

      • As this post clearly states, you can’t get around having an activation image the user must click before the video or Flash loads. If your activation image isn’t the same dimensions as the width and height values in your fb:swf code, it will be distorted because it’ll be stretched out to fit the width and height you’ve set.

        • OK, I will look into that.
          Is it possible to set it to autoplay so that after users click the activation image, they don’t have to click the “play” button?

          • If you mean in the Flash file, I believe there is, although I’m not a Flash guy so I don’t know the details.

    77. gragg80 says:

      hey tim,

      maybe you can help me figure this out. the swf I am linking to seems to work fine in my browser but when I link to it from the tab on the facebook fan page all I get is a blank white screen.
      also, i am loading xml data into my swf but all of my links are absolute.

      here is the code i am using.


      <fb:swf
      swfsrc='http://www.joshuagragg.com/qsl_fbv3/qsl_fbv3.swf' imgsrc='http://www.joshuargagg.com/qsl_fbv3/qsl_fbv3.jpg' height='760' width='600' quality='best'
      />

      can you help me identify what am i doing wrong?

      thanks!

      • The URL to the “imgsrc” returns a 404 …. wrong URL, no image there. That’s what you’re doing wrong. Accessing the URLs directly through your browser is always the first thing to test.

    78. Hey there

      I’m wondering if there’s a way to add a “like” link to individual videos embedded from YouTube using fbml

    79. Crap. Thanks, though.

    80. ACK!

      So we can give style to the image but not the video itself, so if i give the img a margin the video does not follow, no matter what I do it won’t, tried swfstyle along with imgstyle – as well as wrapping it and a div and just moving it altogether.

      No dice because: Facebook auto wraps these ‘embed’ objects in divs – making it a block element & also because there’s no other styles to change according to the wiki besides “imgstyle”

      *Sigh*

      Point being is that i wanted round corners, so the only way around this is to spiff up something in Photoshop

    81. Thanks for the post, it helped me a lot when making a new tab for a work page. I am running into one problem though. I’m putting in multiple videos, 7 to be exact, from vimeo. They work great with no problems. However it will only show 5 videos. (the first is centered by itself with the others 2 in each row.) I guess I’m wondering if there is some height constraint? I couldn’t find any info on that as of yet. Thanks so much for your awesome posts!

    82. Hello,
      Does this work with .flv files? I have tried numerous different ways and I can get the image to display, or the video player but never both. On clicking the image it disappears but the video doesn’t play, if I just add the video it plays fine but there is no image. Any thoughts, other than uploading the videos themselves to youtube?

      Here is a snippet, the URL has been modified but I’m sure all the individual pieces work!

      <fb:flv
      flvsrc='http://www.XXXXXX.org/home.flv'
      imgsrc='http://www.XXXXXX.org/_facebook/_img/video-large-placeholder.jpg' width='320' height='176' /></fb:flv>

      Thanks for any suggestions!
      Bill

    83. Christine says:

      Hi
      Thanks! these instructions were very useful. However I am not a technical personal and although the video has been added to the fbml page, I can’t get it to be nicely positioned in the center of the page. Can you help? As I said not technical, no HTML skills :-)
      Christine

      • You need to put the fb:swf code inside an HTML container, a DIV or a paragraph. Set the width of the container, via CSS, to the width of the video. Then center the container by setting its margins, via CSS, to “margin: 0 auto” …. If you need any more help with HTML, I recommend http://www.w3schools.com.

    84. jenny :
      Hello,
      I used the code to play my audio sample mp3 files via FBML. I copied and pasted the code and inserted the relevant information etc. But, when I go to ‘Edit Page’ on my FB business page, and find the Tab (I named it Listen to Preview), I click on Play and it says ‘Undefined’. What does this mean and what do I need to do to fix this?

      The Code I put in is: <fb:mp3 src=”http://www.createyourday.com.au/downloads/Creation-01.mp3”
      title=”Creation”
      artist=”Create Your Day” album=”Tools for Creation”/>

      • It appears the quotes are everything are rich-text aka curly aka fancy quotes, not simply plain-text quotes which would be straight up and down. I think if you fix that you’ll get better results.

    85. How can I get a youtube video to autoplay on my facebook using FBML?

      I used &autoplay=1 and it just made my video play on the first click. This is great but I am still trying to get my video to autoplay. Its part of my welcome to the fanpage.

      thanks!

      • You cannot have a video autoplay without any clicks in FBML, that is the Facebook restriction. A user must take an action first. The autoplay code you used helps reduce the # of clicks from 2 to 1, and that’s the best we can do!

    86. i have done this for my fbml page and its working good. the only problem im having is when i click on the video to play it creates small spaces between the images on the top and bottom. can you help with this. here is the link

      http://www.facebook.com/pages/Noah-Benjamin/126406067396711?v=app_7146470109

      • Can anyone help me with this?? I’d appreciate it immensly!

        • Noah, I suggest putting the <fb:swf> code inside a containing DIV and set the width of that DIV. It looks like the container the video is in is at 100% width which is the default of a DIV or other container if you don’t specify the width.

    87. Anybody know how to add an Opt-In form on a static FBML page?

    88. Regina Jackson says:

      Nothing is working for me. What am I doing wrong
      <fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/LNmJJFnz_Zg&hl' imgsrc='http://img.youtube.com/vi/LNmJJFnz_Zg&hl/2.jpg' width='340' height='270' />

    89. Regina Jackson says:

      Never mind I got it.

    90. Hi Tim. My flash video works great. The only problem I have is that instead of the image for the background, I have a black box with the play arrow. Once I click, the video works. How can I get my image to be the background instead of the black box…or can I? thanks.

      • Per this post — and the instructions are very clear — you must point the “imgsrc” value to the image you want to be the activation image. I’m not sure what you’re pointing to now, but you should upload the image you want to use to your server or to Photobucket.com and then point the imgsrc URL to that image.

      • I have done that. I think. Sorry my code didn’t come through last time. Here it is. Thanks.

        <fb:flv src='http://www.servicelearningtexas.org/facebook/SLTX/video/VID_2010010458152.flv' width='475' height='316' title='Lift' salign='l' img='http://www.servicelearningtexas.org/facebook/SLTX/images/lift-screenshot.jpg' width='475' height='316' scale='showall'/>

        • There is nothing wrong with your code. I tested it with the same result: a black box with a white arrow with a 1px outline around it. The “img” attribute seems to be getting ignored. I tried a few different image calls, all with the same black-box result. Frustrating!

          • Thanks for trying. I guess if anyone solves it, they will post it. Again, thanks for your help.

    91. Hey!

      You deleted my comment about changing the image dimensions with imgstyle and included the bit in the post to make it seem like you knew the whole time! That’s not cool, man. SMH…

      Not that I expect this comment to show up or anything. You’re a fake, old man!

      • John, There must be a caching problem with your browser or something. I thanked you rather profusely and commented on your comment that I’d added the info to my post. And, oddly, you added your paranoid comment to this post rather than the one where the conversation took place!

        Go back to the post, reload the page, then reflect a moment on paranoia. You provided great info which I appreciated, and then killed the buzz with your pissy comment!

        I have a LOT of time invested in this blog and am sufficiently secure in myself to not try to claim someone’s input as my own. The whole point is to encourage others to contribute to the discussion, not just ask for help.

        Sounds like maybe you’ve been burned a few times, old man.

        • Well in that case, I apologize! Sorry, sir!

          Yes, I’ve been burned a few times by blog authors so sorry for being a paranoid freak!!

    92. Thx for your sharing a lot!!!!!! It helps!!

      I want my flash play automatically without clicking on the thumbnail image.

      May I know is there anyway to embed the flash object without a activation image ?

      • No! It’s stated clearly in this post, several times. Can’t be done. If the Flash is set to autoplay then it’ll play after the user clicks the activation image.

    93. refer to the site : http://wiki.developers.facebook.com/index.php/Fb:swf

      “On profile pages, an image appears first. When the user clicks the image, it turns into the Flash object. On canvas pages, the image is ignored, and the Flash object is directly included. ”

      It seems to be possible on a canvas page.. but I have no idea what canvas pages is..

      can you explain a little bit about it?

      I am not very good at web stuff… I am sorry about that…

    94. Lee Hanacek says:

      hey Tim

      i was wondering: is it possible to add a music player to the fbml tab.. and also how would one make the fbml page go down longer vertically

      Thank You

    95. Read through all the comments and didn’t see this question asked…Any help with positioning the video? Can you just wrap it in HTML code and position it that way… or is there special positioning code for FBML?

      Thanks in advance!
      Chase Brumfield

      • That’s right. Just wrap it in a DIV or other containing element and position that.

        • Annie Mac says:

          Chase–
          here’s the code I used to position my image:

          <div>
          <fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
          swfsrc='http://www.youtube.com/v/XXXinputvideo#'
          imgsrc='http://img.youtube.com/vi/XXXinputvideo#/2.jpg'
          width='190' height='130' style="position: absolute; width: 190px; height: 130px; top: 407px; left: 425px;" />
          </div>

          Where it says top that counts down pixels from the top of the page where you want it and the left counts over from the left side of the page…..

          • Thanks Annie. I would advise to position a container, in the Facebook environment, with something other than absolute positioning which I’ve seen get pretty buggy in Facebook. Absolute positioning isn’t for novices and it can result in strange & unexpected behavior outside the Facebook environment, let alone within Facebook.

            The one key thing to remember is that you MUST give the DIV that contains the absolute positioned container the “position: relative” rule.

    96. I have put my swf in at my page. Code:
      <p>
      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.sa-linx.co.za/ecert1.swf'
      imgsrc='http://admin.ecert.co.za//Data/Sites/1/images/picture.jpg' width='520' height='400' />
      <p>

      The image shows great but when I click on the image it only shows the corner of my movie.

      This is my page URL

      http://www.facebook.com/pages/Ecertcoza/297301710115?v=app_4949752878

    97. Just want to say thanks for all of this…I don’t know what most of us would have done without you!

    98. Annie Mac says:

      Tim–
      First off THANK YOU, I think the most helpful part of the article was seeing other people’s questions since I dealt with some of the same issues….

      But I read through the posts and couldn’t find an answer to this:

      When I click the activation image my video moves to the default top left position? I used tags to contain my video code but not sure why this is happening. I also tried putting the style attribute with the position under both the activation img and the swfsrc code….You can check out my test page here:

      http://www.facebook.com/pages/ServiceMagic-Photography/105272652839801?v=app_4949752878

      • Annie, I think it has to do with my response to your previous comment #97, above. As I said, before I event saw this comment, that absolute positioning in Facebook can get tricky. You must make sure the element that contains the absolute-position element has the attribute “position: relative”; otherwise, your absolute-positioned element will look for the nearest relative-positioned element and, not finding any it will just stop at the top-most container and be positioned relative to that.

    99. hey Tim, my website www.baileypizzio.com/Decarla/site/index.swf has code that plays an external mp3 but when I link to facebook the music doesn’t play. Is there a way outside of the facebook generated mp3 play to reincorporate my music into the site?

    100. I had not problem getting the youtube video into my FBML page. The problem is that after the video plays there is a selection of videos under it that are not mine and I don’t want them on my fanpage. Any suggestions?

      • I think you have to go to youtube where you uploaded the video… and then uncheck the “play related videos” option… or it’s an option that says something like that.

        Hope this helps…

      • I had this problem too, but found the perfect solution. I’ve taken this extract from YouTube’s help section…

        The parameter for disabling related videos for a video in the YouTube embedded player is “&rel=0″. By adding “&rel=0″ to the end of the video ID in the embed code, you’ll prevent related videos from showing in the player.

    101. So I’ve added a video and video image to a test facebook page to try to get this right. Everything works well except when I click the test image the video pops up at the bottom instead of where the image is… here’s the link to the page so you can see what I’m talking about… it’s the “welcome” tab at the top…

      http://www.facebook.com/pages/Test-Page-TGP/109336825785273?v=app_4949752878&ref=search

      And here’s the code that I’ve used…

      All help is greatly appreciated…

      Thanks,
      Chase Brumfield

    102. Hi,
      I am trying to integrate youtube video in my fbml page along with full screen button using parameter fs=1 but when I click on full screen button nothing happens. What should I do in this case? Please help me. I tried with static fbml & application page.

    103. Hi – I would like to know, while trying to embed a video into my static fbml image following your directions, how do I get the video to sit in the perfect place that I have design the image for it to sit into? I have a square area within my design for the placement of the video, how to I get the video in the correct placement? Thanks!

      • You’ll need to have CSS knowledge sufficient to be able to position an element. The fb:swf code should be placed in a DIV and then you need to position that DIV with CSS. You can learn about HTML & CSS at W3 Schools.

        • Is there not a simple code you could provide or point us novices too that would show us how to do this? Seems like it would be something standard that could be copied just like the code you provided.

    104. Thank you!

    105. suddenstealth says:

      I was able to get the youtube video on my fbml page, but I cannot get it to go full screen. Any ideas?

      • I don’t believe it’s supported. You can append “&fs=1″ to the swfsrc URL and this results in the 4-arrow icon for full screen displaying, but it doesn’t function.

    106. Hi, this is a great post, I do have one question:

      Is it possible to have the video play as soon as the person clicks the image? Right now the placeholder image shows up, the user then clicks that image and that image is replaced by the YouTube player image, then the user has to click again to play the video. Can the video play with a single click?

      Thank you!

      • Facebook requires a user action before running Flash or JavaScript. There’s no way around this. Set your video to autoplay to have the video play after the user clicks the activation image.

        To set to autoplay, add: &autoplay=1 to the end of the swfsrc URL. If it doesn’t autoplay after doing this, then the video may be hardcoded to not autoplay.

    107. Love your site…tons of very valuable info here. How do I center the video using the code you provide?

    108. Chase Brumfield :
      Whoops… forgot to add the code I guess?

      <!--formatted-->

      mind if you tell me the code that you use? you can message me in my facebook maqute17@yahoo.com

    109. One more question…how do I get the video to start on the play button rather than just show a random picture? Here’s what I’m referring to:

      http://www.facebook.com/TeensTransformingTowns?v=app_6009294086

    110. Subail Sunny says:

      hello,
      i have a problem. i have added the video following the instruction mentioned above.but there is a problem.when i click the image, width of the video player is expanding. and also height is reducing.i have added the image 640*480 px. when i click on the image,the video player size becomes about 720*300px(not perfect measurement of size.).here is my code:

      <div style="margin:0 auto; width:492px; background-image:url(http://www.wallcoo.net/animal/farm-animal/m01/funny-farm-animals-34.jpg); background-repeat:no-repeat;">
      <center>
      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px;" border-color:white;" swfsrc='http://www.youtube.com/v/RY9BLioRJe4' imgsrc='http://www.thefunnybox.com/wp-content/uploads/2009/01/funny-picture-photo-sign-ninjas-lockergnome-pic.jpg' />
      </center>
      <form action='http://tmel.org/contact.php' method='post'>
      <div>
      <label for='signup_name'>Name</label><br />
      <input id='signup_name' name='signup[name]' type='text' /><br />
      <label for='signup_email'>Email ID</label><br />
      <input id='signup_email' name='signup[email]' type='text' /><br />
      <label for='signup_phone'>Phone</label><br />
      <input id='signup_phone' name='signup[phone]' type='text' /><br />
      <input class='signup_phone' name='commit' type='submit' value='Sign Up' /><br />
      </div>
      <form/>
      </div>

      • Subail Sunny says:

        ooops….i forgot to add the height and width portion…..solved by my self. thank you for the tutorial.

    111. hello,
      i have a problem , too…

      i can see picture but after click i cant see my flash menu. please help me what is the problem

      thanks

      codes here:


      <!-- s.a. flashmenu -->

      <div style="margin:0 auto; width:180px;">
      <fb:swf
      swfbgcolor="000000"
      imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.ucuztatilsenligi.com/facebookdeposu/flashmo_113_vertical_01.swf'
      imgsrc='http://www.ucuztatilsenligi.com/facebookdeposu/menuresimi.JPG'
      width='180' height='400' />
      </div>

      <!-- s.a. flashmenu sonu-->

    112. OK so 3rd time lucky sorry for clogging up the page. I’m just so coded out I’m starting to see double!

      Please Help (as you can see I need it! lol) OK I have watched your tutorial & read your how to, but I will be damned if I can get the bloody thing working! Could you please please help me!

      Here’s what I copied of your tutorial:

      <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' />
      Here’s our Toutube vid url:
      http://www.youtube.com/watch?v=6D0lXHdzCEo

      So I Did:

      <fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/6D0lXHdzCEo'
imgsrc='http://i779.photobucket.com/albums/yy78/scruffles4/CandMfbWelcome.png' width='340' height='270' />

      It doesn’t work! What am I missing?

      • You’re missing spaces between parameters. When you copied and pasted my example code, you lost the linebreaks and everything runs together. Example:

        <fb:swfbgcolor=”000000″

        should be

        <fb:swf
        bgcolor=”000000″

        Make your code like this:

        <fb:swf
        swfbgcolor="000000"
        imgstyle="border-width:3px; border-color:white;"
        swfsrc='http://www.youtube.com/v/6D0lXHdzCEo'
        imgsrc='http://i779.photobucket.com/albums/yy78/scruffles4/CandMfbWelcome.png' width='340' height='270' />

        and it’ll work. I tested it.

    113. Christopher Smith says:

      Hi,
      I have got a Problem with the following Javascript on a Static FMBL on a Fanpage:

      <a href="#" onclick="if(document.getElementById('div1').style.display=='none') {document.getElementById('div1').style.display='block';} else {document.getElementById('div1').style.display='none';}">Klick</a>
      <span id="div1" style="display:none;">content</span>

    114. I can see the image but when I click on it, the video does not come up. I have it in a FBML box. Any clues gratefully received!! Its a widescreen video, will the new FB page sizes affect this??

      <fb:swf
      swfbgcolor='000000'
      imgstyle='border-width:3px; border-color:white;'
      swfsrc='http://www.youtube.com/watch?v=WKXEnRVeBo4&autoplay=1'
      imgsrc='http://www.rallyforlife.net/Why_Stillimage.jpg'
      width='600' height='385'
      />

      • You’re link goes to the YouTube PAGE and, as this tutorial makes clear, you need to get the URL from the EMBED CODE. Also, you better reduce that width to 520px or less because the right 80px will get cut off beginning August 23.

        • Thanks so much Tim,

          I’ve tried this code from the embed code (hard to tell where it stops)
          ‘http://www.youtube.com/v/WKXEnRVeBo4?fs=1&hl=en_US&rel=0′
          And I’ve tried this
          ‘http://www.youtube.com/v/WKXEnRVeBo4?fs=1&’

          But neither seem work. I’ve reduced the size of the video as you suggested!

          • I just tested the original code you sent, with the 2nd of the two URLs you just sent (both work):

            <fb:swf
            swfbgcolor='000000'
            imgstyle='border-width:3px; border-color:white;'
            swfsrc='http://www.youtube.com/v/WKXEnRVeBo4?fs=1&autoplay=1'
            imgsrc='http://www.rallyforlife.net/Why_Stillimage.jpg'
            width='600' height='385'
            />

            It worked fine.

    115. Thanks so much Tim! I was using the video image –

      imgsrc=’http://www.youtube.com/vi/watch?v=WKXEnRVeBo4′

      so that must have been causing the problem

    116. thank you for posting this
      i need help i post my video but the image doesnt show it has that ” broken file image ” with the little paper ripped ,

      but when i click the video the video shows … help i want it so others may see what they are viewing .. thanks

    117. Hi,

      THanks for all of your great articles. Very helpful. I am baffled with this though as I am getting the Upgrade Your Flash Player message with the video. I know I am running the current flash but I tried an upgrade anyways but the message still comes. Anyone else experiencing this or know what may be the cause?

    118. Hi this is a fantastic tutorial! Many thanks!

      I have a quick question though. My YouTube video is 580x360p yet Facebook requires an image with a width of 520 pixels.

      My image gets cut off if it’s 580 pixels wide (but isn’t squashed) or squashed if I make it 520.

      Any ideas?? Thanks again!

    119. Disco Ninja says:

      How do I make the details column on the left disappear in my Static FBML tab?

      Like in this example:
      http://www.facebook.com/pages/Test-Page-TGP/109336825785273?v=app_4949752878&ref=search

      • Tabs are shrinking to 520px. If you admin a tab, you’re seeing already. You can’t get rid of it. There are numerous posts on this blog about this and if you want to maintain a fan page, you best keep up with the ever-changing Facebook.

    120. Woops, I’ve just realised that I can change the dimensions of the video to 520 in YouTube.

    121. Mr. I have a problem, when I click on my video, it shows. but in other place, afar from the image. I need reproduce the video at the same margin of the image.

      Regards..

    122. Hi there,

      Just realised ive mafe my video in the 640 by 385 ratio but i need it to fix in the 520. Can I just alter the width in the code or will it shrink/crop it?

      • Just set the height/width parameters to 520px x 313px and it will display in full at that size.

        • Hi there,

          Put in those details and it worked alright, however I was left with a little bit of black border on the left and right so 318 for the height looked better!

          Thanks for all your help!

    123. I was trying to have an swf object and few images (from youtube’s video) below that. What I want is, when a user clicks on any image, the corresponding video will be loaded in the swf objec on the top. I am not able to do this using FBJS. Can U help?
      The page I am referring is at http://www.facebook.com/pages/BM/104957559562687?v=app_4949752878

    124. When you described “Position/Aligning your Video on the page above, you indicated that you can set the top and bottom margin to whatever we like. Will this allow us to position the video on top of an image we’ve already placed? If so, what is the code to specify top and bottom margin. Thanks so much for all the great info!!

    125. Would you consider doing a tutorial for embedding a CoolIris wall in a Facebook tab? I’ve embedded them in a website, but I’m unfamiliar with FBML.

    126. Hello everyone,
      does everyone know how to put like and recommend box to fbml page near flv files?
      My page looks like this now http://www.facebook.com/kinosiena

    127. This is a great post, thankyou for sharing! Is there any way to insert some extra code to remove related videos? They always show up after the video has finished and you can lose traffic away from the fan page.

      Thanks, Brad :)

      • Try adding “&rel=0″ to the “swfsrc” URL.

        swfsrc=’http://www.youtube.com/cp/vjVQa1PpcFNbP_fag8Pvon-YFxwXVQJTFzsNmHqblLI=&rel=0′

    128. Hi Tim, I tried your code for positioning the video but it doesnt work for me. I want to know how i can place the video on top of a picture or a background or exactly anywhere in my page . Thanks in advance.

    129. Tim… thanks for all the help. My question: with the following code, when clicking on the Video tab on my fb page, a blue ‘X’ or ‘?’ appears in the box that should display me imgsrc photo. If I click on that, it then takes me to my imgsrc photo, where I can click and play my youtube video. The imgsrc url obviously works by itself if I cut/paste it into another window.


      <div style="margin:0 auto; width:550px;">
      <fb:swf
      swfbgcolor="000000"
      imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.youtube.com/v/zNxALT0w14U&rel=0&autoplay=1'
      imgsrc='http://i843.photobucket.com/albums/zz358/barloweinteractive/Factor%20King/Factoring-video-image-Facto.jpg' width='550' height='385' />
      </div>

      * I tried this with, and without, the autoplay. I also tried matching the width/height of the imgsrc photo exactly to the youtube dimensions, and then I tried different variations just to see. Nothing changes either way. I always get the blue ‘X’ or ‘?’, depending on the browser I’m in.

      • In the imgsrc URL, replace the %20 (between Factor and King) with a space, and all should be well. The “%20″ is the ASCII equivalent of a space, and your browser probably replaced the space in that URL with the %20.

        File and directory names should NEVER contain spaces. They just cause problems, as you found out.

    130. This is very very frustrating. I can’t get it to work.

      This is my video I made http://www.youtube.com/watch?v=dLlbeENPpzk

      I tried to add the code you cave above and it doesn’t work. I added it into Jotforms which is a form builder and it shows up on there but when I put it into my fanpage it doesn’t show up.. Just shows the code I put in not the video box!!! Please help

      • I’m not sure what Jotforms has to do with displaying a video on Facebook using the <fb:swf /> tag. But if you copy the code correctly, and the URLs for the video and the imgsrc are correct, it will work. If it doesn’t read the troubleshooting part of this post.

    131. Hi any help that u could offer on embedding cooliris video wall on fbml?

    132. I have a fan page all sliced up in dreamweaver. I’m having problems on where I put all the code (placement) for the above code (for embedding the youtube video) so it doesn’t mess up my alignment on everything else.

      I can send you some code so you can see!

      Thank you for your help in advance!

    133. Hi

      Great tutorial. Apologies if this has been dealt with, but i’m stumped:

      Here’s my code:

      <div style="margin:0 auto; width:500px;">

      <fb:swf
      swfbgcolor="000000"
      imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.freelancesocialmediamarketing.co.uk/autoviewer/autoviewer.swf'
      imgsrc='http://www.freelancesocialmediamarketing.co.uk/images/img04.jpg' width='340' height='270' />

      </div>

      . . .and that swf works when I open it with a browser, but in the Facebook tab, all you see (once you click on the first image) is the navigation arrows.

      Am I doing something incredibly stoopid?

    134. Help! I’ve embedded the youtube video into a tab on my Facebook page. It works in the Facebook Test Console, but won’t work on my page? What am I doing wrong?

      Click on the video to learn more about our largest leaf pile photo contest.

      To enter the contest, or to view other entries click on the banner above.

    135. Hello!

      I want to embed a flash-foto-gallery in my staticFBML-Page, which draws its fotos from a XML-File containing absolute paths to fotos on my webspace. The Problem is: Facebook shows me the swf-File, but it doesn’t show the fotos! Any idea how to fix this?

      • Make sure the URL for the XML file is also the full/absolute URL, as Facebook actually makes a copy of your Flash file and puts it on its servers, so a relative path won’t work.

    136. Thanks for the fast response, but this doesn’t help me at all. :-( I don’t even know where to refer to the XML-File. Obviously, it’s not possible to load an external XML-File from an swf-File….

    137. Hi Tim, love your site, very helpful!

      I have embedded my YouTube video into my fan page but when the video player is much smaller than the image. Any tips?

      Here’s the tab in question:http://www.facebook.com/pages/Xiameter-from-Dow-Corning/148072768537082?v=info#!/pages/Xiameter-from-Dow-Corning/148072768537082?v=app_7146470109

      And my current code:

      <fb:swf
      swfbgcolor="#F88017"
      imgstyle="border-width:3px; border-color:white;"
      swfsrc="http://www.youtube.com/v/VXitKU4SrbM&autoplay=1&rel=0"
      imgsrc="http://i944.photobucket.com/albums/ad290/Xiameter/Xiameter_WhoWeAre_FINAL.jpg" width:"520" height:"520" margin:"auto">

      • You aren’t using the correct syntax. It should be equal signs:

        width=’520′ height=’313′

        I use that dimension for the height to retain the aspect ratio of the video which is 640 x 385. So reducing the width to 520 is making it 81% of the original width, and 313 is 81% of 385.

    138. No idea anyone? :-(

    139. Can you preload the swf? When I click the initial image there is a flash of white before the swf loads… I suppose I could put it in a div with a BG image the same as first frame of the video. Any other ideas?


      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:0px;"
      swfsrc='my swf'
      imgsrc='my initial image' width='520' height='340' />

    140. Hi timware, thanks for all the tips. I used the tutorial here to create a Facebook page that is basically a tribute to old songs. I have separated these songs via decades using the FBML Tabs. Here’s the page:

      http://www.facebook.com/pages/Memory-Lane/162062043811415?v=app_10531514314

      All the Youtube videos and FBML tabs are working. But what I lack are effective and working comment boxes. I was able to put comment boxes on each videos, made out of the simple fbcomments tag, but they’re not as dynamic as the usual Facebook comment boxes. They don’t appear on the user’s Wall even after said user has made a comment in my page.

      Another problem is that the videos in the application tabs do not have the usual “share” and “like” links which help in promoting the contents to other people’s Walls. Please help. Thanks!

      Robert

      • As for more dynamic comments feature, you’d need to do an iframe application and use XFBML comments where the comment appears on the user’s Wall. But then you won’t have the comments listed on the page. You’re up against Facebook limits.

        As for sharing, you can use the fb:share-button FBML tag. You can’t have a Like button on a Static FBML page, but can on an external/iframed XFBML Like button, part of the open graph.

    141. timware :

      As for sharing, you can use the fb:share-button FBML tag. You can’t have a Like button on a Static FBML page, but can on an external/iframed XFBML Like button, part of the open graph.

      Thats not correct, you CAN have a like-Button on a static FBML-Page, I did it myself. You just have to use the fb:comments-Tag and set the div.comment_body to Display:none. That’s it.

      • Sascha, Can you provide a link to the Static FBML tab where you got this to work. I know I’ve tried, and I can get it to *appear* to have the link function, but clicking on it doesn’t change the actual state at the top. If it works, then if you have already liked the page, your custom Like should only show the “Unlike” link, not the Like button. And, if you’re not a fan of the page, when you click the Like button you created with fb:comments, the Like button at the top should disappear. Please confirm you *really* got it to work.

        I’ve previously tried the exact same method you described, with no success.

    142. I did it on the Facebook Page of Condor: http://www.facebook.com/pages/Condor/58867199966

    143. Tab “Willkommen!” (it’s german).

    144. I guess the most important point is: you have to use the fb:comments-tag with meta tags and set the “returnurl”. That’s what I found out after weeks of trying.

      • I tested your tab and, as I suspected, clicking that fb:comments-generated Like button doesn’t actually result in my Liking the page. The Like button remains at the top and there’s no post to my Wall that I’ve liked the page.

        Does your testing actually result in something different?

        This Page has a Like button in a pop-up dialog that works as I describe, but it’s not done with Static FBML:

        http://www.facebook.com/AvonProductsInc?v=app_153816914639769

    145. Hi Timware, is there a way to incorporate css to make the “swfsrc” have a hover effect?.

      This is my page:
      http://www.facebook.com/pages/Traffik-Phurbu/131622340221448?v=app_10531514314

      This is the hover i want for the youtube video:
      http://www.facebook.com/pages/Traffik-Phurbu/131622340221448?v=app_10339498918

    146. Of course, i tested the like button several times (i work in an internet agency :-)) Here it works as it is supposed to work. If you press “Like”, you actually “like” the page, with a post in your stream. I don’t know why it doesn’t work for you, but for me and my colleagues it works.

    147. P.S.: You should check your wall, the “like”-post in your stream often appears some posts under a recent post.

    148. I tested it again, it still works. So it should work for you as well… You can add me in facebook to see the prove (stream on my wall)…

      • Hi Sascha, I checked again and you’re correct! I was misled by the fact that the clicking of the Like button doesn’t remove the Like button at the top, but if I refresh the page it *does* go away, and, as you said, I did find the post to my profile.

        So THANKS! This is my favorite part of doing this blog, where I get set straight pretty quickly when my knowledge needs tweaking.

        Feel free to come in and set me straight any time….

    149. Thanks for the help – it worked great! I have found the YouTube app to be to be entirely too intrusive for my Facebook page visitors & even received a few complaints about it.

      This gives me much more control over the content that is displayed.

      Thanks again.

    150. Can you please let me know how to size the image differently from the video? As in have the image at width=’450′ height=’140′ and when clicked, the videos expands to higher dimensions like w450, h500? Please and thank you.

    151. Thanks for your Article and your many Answers!
      But i have the same Problem as the other people.
      WHY DOES MY CODE NOT WORK?
      On eyery how-to i see the same example-code and i copy her and i copy there, replace here, replace there and nothing works…
      I´m Whitelisted by Facebook and my Code looks nice – i dont understand whats wrong! i tried everything (with http://www., without http://www., with meta-tags, all combinations and flashvars…puuuh)
      Here my Code:

      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
      <head>
      <fb:swf swfsrc="http://www.comod-music.de/fbplayer/test.swf"
      width="100" height="100"
      imgsrc="http://www.comod-music.de/fbplayer/img.jpg"> </fb:swf>
      </head>

      • Take out everything but the <fb:swf> … </fb:swf> code.

        Facebook supplies all the DOCTYPE and <head> </head> stuff on its side. You just plug in the content that would go between the <body> </body> tags.

        Your FBML for the fb:swf tag looks fine. Just get rid of that other crap.

    152. Thanks for the response, but it does not seem to expand. This is what I have

      <div style="margin:0 auto;">
      <fb:swf
      swfbgcolor="000000
      imgstyle="border-width:3px; border-color:white; width=450px; height=140px;"
      swfsrc='http://www.youtube.com/v/vVGbPFdU96A&
      autoplay=1'
      imgsrc='http://i54.tinypic.com/5165bs.jpg' width='450' height='450'/></fb:swf>
      </div>

      • You gotta read closer, Adrian! Not equal signs for the width/height values in imgstyle …. colons, like the other style rules. Coding is all about the details. Little errors like that break stuff. But live and learn :)

        • Oh sorry, that was my old code, I did change it to the colons but it still hasn’t worked. Thanks.

          • Hah! I see that this approach isn’t working! But this will:

            Add: imgclass=”activate-img” (or whatever you want to name it)

            to the parameters. Then create that class in your stylesheet and set the width and height values there.

            I tested this and it works.

            Sorry for the misdirection!

    153. I think the swf-file makes problems. YouTube videos have now works, and “http://stage.pokkari.net/scripts/flash/showplayer.swf?file =” as well. Only my swf convert Facbook not an embedded video to, but it remains a link! does anybody knows a preloader for swf for flashvars like ?file=… without any graphical things, but only a preloader?

    154. i speak about wall post / status post with meta-tags!

    Trackbacks

    1. […] my earlier post on embedding Flash or YouTube videos on your Static FBML page, I described how Static FBML supports the embedding of Flash objects, including YouTube […]

    2. […] How to Add / Embed YouTube Videos & Flash in Facebook Static FBML pages – A very clear tutorial on how to show a YouTube video on a Facebook Fan Page. Make sure you install the Static FBML app, then use the FBML markup here. […]

    3. […] previously posted a tutorial on embedding YouTube videos or other Flash objects (SWFs) in a Facebook Fan Page with Stati…. So how is this done with Vimeo […]

    4. […] Youtube o Flash con FBML […]

    5. […] Shared How to Add / Embed YouTube Videos & Flash in Facebook Static FBML pages | HyperArts. […]

    6. […] The folks over at HyperArts offer several really good posts on customizing Facebook Pages with FBML and embedding YouTube/Flash in Facebook. […]

    7. […] To add videos, you can find information here. Otherwise, Google is your best friend. […]

    8. […] Tutorial: Embed YouTube Videos and Flash in Static FBML Tabs […]

    9. […] from YouTube but this is a great article giving simple step-by-step instructions of how to do it: How to Add YouTube Videos or Flash to Facebook Static FBML Pages. So my edit page now looks like […]