Contact Us

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

    October 9, 2009 By

    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

    Filed Under: Social Media, Website Programming Tagged With: , , ,
    • http://www.rpoconsulting.com/ Ben Stone

      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.

    • http://facebook.com/bellinghamalive grant

      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

      • http://www.hyperarts.com timware

        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?

        • Dave

          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,

          • http://www.hyperarts.com admin

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

        • http://www.cm-matosinhos.pt Helder Gonçalves

          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

          • http://www.hyperarts.com admin

            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.

    • Lori

      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?

      • http://www.hyperarts.com admin

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

    • http://www.nubranchliving.com Tyra

      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

      • http://www.hyperarts.com admin

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

        • http://www.nubranchliving.com Tyra

          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′ />

          • http://www.hyperarts.com admin

            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;

    • Jeff

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

    • Larry

      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?

      • http://www.hyperarts.com admin

        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!

        • Larry

          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!

    • http://bestsites4professionals.com Jodi

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

      • http://www.hyperarts.com admin

        Nope, no way to avoid the two clicks to play the video. Facebook requires that a user activates flash before it can be displayed.

      • Analisa

        Thanks for your kind words! We work hard to provide helpful advice to our community, not just our clients. If you feel so inclined, we would appreciate a quick review of our services on Yelp: http://www.yelp.com/biz/hyperarts-web-design-oakland

    • jed

      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

      • http://www.hyperarts.com 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.

    • jed

      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.

      • http://www.hyperarts.com 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 ….

    • jed

      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.

    • http://www.chrisspada.com Chris Spada

      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/

      • http://www.hyperarts.com admin

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

    • http://http//futurerelicsgallery.com Lori Buff

      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

    • http://http//futurerelicsgallery.com Lori Buff

      <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

      • http://www.hyperarts.com admin

        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.

    • http://http//futurerelicsgallery.com Lori Buff

      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

      • http://www.hyperarts.com admin

        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.

    • http://http//futurerelicsgallery.com Lori Buff

      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.

      • http://www.hyperarts.com admin

        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.

    • http://http//futurerelicsgallery.com Lori Buff

      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

    • http://www.corbeau.com Ryan Graham

      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.

    • http://www.corbeau.com Ryan Graham

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

      //

    • http://www.corbeau.com Ryan Graham

      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.

    • Boy

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

      • http://www.hyperarts.com admin

        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.

    • Jeff

      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.

    • matt

      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.

      • http://www.hyperarts.com admin

        Well, there’s YouTube Video Box, a Facebook application that creates a YouTube tab and allows you to pull in your videos. We use it on our HyperArts Fan Page.

    • Leo

      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′ />

      • http://www.hyperarts.com admin

        Where can I see it in action?

    • http://zeustext.com Logan

      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.

    • Kayla

      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

      • http://www.hyperarts.com timware

        Well, um, have you tried changing the width & height parameters in the code to the actual size of the video?

    • http://www.facebook.com/bertkoenders Loeki

      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?

    • Berger

      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?

    • Bahar

      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?

      • http://www.hyperarts.com admin

        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.

      • Bahar

        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

        • http://www.hyperarts.com admin

          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.

          • Bahar

            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&quot; TARGET="_blank"
            imgsrc='http://img.youtube.com/vi/l1v8netwE5o/2.jpg&#39; width='120' height='100' title='Gender and Development: Interview with Gita Gopal' />

            • http://www.hyperarts.com admin

              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.

          • Bahar

            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.

    • Lins421

      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

    • Lins421

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

      • http://www.hyperarts.com admin

        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.

        • Lins421

        • Lins421

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

        • Lins421

          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

    • Lins421

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

    • http://www.wangker.com Francis

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

    • http://www.lisaborders.remax.com Lisa

      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′ /

    • andy

      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&#39;
      imgsrc='http://img.youtube.com/vi/4kRY6-opFWM/2.jpg&#39; width='400' height='225' />

      • http://www.hyperarts.com admin

        Not sure what the problem is, Andy. The video plays when accessed directly and your code looks good. Sorry!

    • http://www.mdostudio.com m a r c o

      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?

      • http://www.hyperarts.com admin

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

    • sharon

      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?

      • http://www.hyperarts.com admin

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

    • Pingback: Embed a YouTube Slideshow of Your Channel in Facebook Static FBML Tab Page

    • http://www.bytesizeng.com asoto

      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

      • http://www.hyperarts.com admin

        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’

    • http://www.clovercity.com Cindy

      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&#39;
      imgsrc='http://i753.photobucket.com/albums/xx176/clovercity/creat2sell/leylas-youtube-snag-sm.jpg&#39; width="250" hieght="150" />

      Thanks – Cindy

      • http://www.hyperarts.com admin

        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.

      • http://www.clovercity.com Cindy

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

    • http://www.cm-matosinhos.pt Helder Gonçalves

      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

      • http://www.hyperarts.com admin

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

    • Pingback: Dayn W Creative » Bookmarks for March 4th through March 8th

    • http://tractionokc.com Tyler Smith

      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&quot; width='760' height='480' imgsrc="http://tractionokc.com/trxn-loadr.jpg&quot; />

      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

      • http://www.hyperarts.com admin

        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&quot;
        imgsrc = "http://tractionokc.com/trxn-loadr.jpg&quot; width='760' height="480"
        flashvars = "[whatever they are" />

        • http://tractionokc.com Tyler Smith

          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

        • http://tractionokc.com Tyler Smith

          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&quot; 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

          • http://www.hyperarts.com admin

            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.

            • http://tractionokc.com Tyler Smith

              Gotcha. Thanks! Might be in touch.

    • Julia

      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

      • http://www.hyperarts.com admin

        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.

    • Justin

      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

      • http://www.hyperarts.com admin

        I don’t believe so, Justin.

        • Justin

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

          • http://www.hyperarts.com admin

            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.

    • http://www.selig.eu Hailie

      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

      • http://www.hyperarts.com admin

        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.

    • http://www.axxisagency.com Mariano

      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 ]

    • Paul

      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&#39; width='480' height='272' imgsrc='http://farm5.static.flickr.com/4021/4461958463_7430a278b0.jpg&#39; />

      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?

      • http://www.hyperarts.com timware

        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.

        • Paul

          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.

    • KImi

      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.

    • Pingback: Tutorial – Embed Vimeo Videos on Your Facebook Fan Page – Static FBML

    • http://shockrocketstudio.com Hal

      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 ]

      • http://www.hyperarts.com admin

        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?

    • http://shockrocketstudio.com Hal

      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.

      • http://shockrocketstudio.com Hal

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

        • http://www.hyperarts.com admin

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

    • http://shockrocketstudio.com Hal
      • http://www.hyperarts.com admin

        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.

    • http://shockrocketstudio.com Hal

      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.

    • http://www.inspiredassets.co.uk Martin Skinner

      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

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

      • http://www.visionfirstmedia.com Jason Beetham

        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.

        • http://www.hyperarts.com timware

          Also, you used to be able to do this with MyInfo on Personal Profiles, but Facebook is killing that. The MyInfo App Page says it all….

    • Pingback: Motor de Reservas de un hotel en Facebook

    • http://www.facebook.com/famousfootwearfans liza

      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

    • jonathan

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

      • http://www.hyperarts.com timware

        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.

    • http://www.matchboxdesigngroup.com Brent

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

    • http://www.shadowsandlight.ca Ellie

      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&#39; height="580" width="570" salign="T" quality="best" scale="bestfit"
      imgsrc='http://www.shadowsandlight.ca/placeholder.jpg&#39; 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!

    • http://www.hyperarts.com timware

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

    • http://www.shadowsandlight.ca Ellie

      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!

    • http://www.shadowsandlight.ca Ellie

      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.

    • http://www.iequezada.com isaac quezada

      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

      • http://www.hyperarts.com timware

        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.

    • Karen

      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

      • http://www.hyperarts.com timware

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

    • http://www.facebook.com/pages/East-of-The-Arch-Real-Estate/370238628639?v=app_7146470109 Bob Ashauer

      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?

      • http://www.hyperarts.com timware

        Pretty sure this is not possible, Bob.

    • Mark

      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.

      • http://www.hyperarts.com timware

        You should just follow the instructions in my post for embedding YouTube channels on Static FBML pages. Go to YouTube Custom Player page and log in (if not already); in the “Content” section select your playlist from the options presented, generate the code and use the full URL path in the <embed> tag (everything between the double quotes after “src=” in the embed src. Should work fine.

    • cds

      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?

      • http://www.hyperarts.com timware

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

    • Dewey

      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

      • http://www.hyperarts.com timware

        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.

        • asoto

          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.

          • http://www.hyperarts.com timware

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

            • asoto

              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

              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.

            • http://www.hyperarts.com timware

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

            • http://www.hyperarts.com timware

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

    • http://www.hyperarts.com timware

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

    • http://www.gytnews.com Glenn

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

      –GCII

    • Irene

      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&#39;
      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

      • http://www.hyperarts.com timware

        You omitted the opening single quote for the “imgsrc” … add that and it should work, Irene.

    • Irene

      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.

    • Irene

      now my code looks like this

      <fb:swf
      swfsrc="http://jelly88.altervista.org/Altervista_ht/tast3.swf&quot;
      imgsrc="http://sphotos.ak.fbcdn.net/hphotos-ak-sjc1/hs329.snc3/29060_106137226096002_106106049432453_47675_7049359_n.jpg&quot;
      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

    • http://pinoyscreencast.com techie.biox

      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

    • http://www.tarekcharara.com Tarek Charara

      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&#039;

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

      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

      • http://www.hyperarts.com timware

        “img src” should be “imgsrc”.

        • http://www.tarekcharara.com Tarek Charara

          Many thanks again!

          T.

    • http://www.tarekcharara.com Tarek Charara

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

      Many thanks!

      Tarek

    • Dean

      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&#39;
      imgsrc='http://version1.europeana.eu/image/image_gallery?uuid=5a2e99d3-ce78-47ac-a7ed-0973e0d1e382&groupId=10128&t=1273490189296&#39; width='425' height='354' />

      Thanks!

      • http://www.hyperarts.com timware

        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.

    • http://www.pcys.org Andrea

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

      • http://www.hyperarts.com timware

        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.

        • http://www.fingerswalk.com JR

          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

          • http://www.hyperarts.com timware

            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.

    • Pingback: / / / / / / / / / / / / utopic_US / / / / / / / / / / / / – Vida social, que le dicen…

    • http://www.fingerswalk.com JR

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

      Thanks,
      JR

      • http://www.hyperarts.com timware

        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.

        • http://www.fingerswalk.com JR

          I hope this will read..

    • http://www.fingerswalk.com JR

      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&#39;
      imgsrc='http://img.youtube.com/vi/t9cfDc2stls/2.jpg&#39; width='520' height='400' />

      • http://www.hyperarts.com timware

        Well, if you did this:
        http://www.youtube.com/v/t9cfDc2stls&autoplay=1

        it would work. You should always test both the link to the SWF and to the image directly in your browser to make sure they are correct. Testing your YouTube URL shows that the URL is correct but that the video has been removed.

        • http://www.fingerswalk.com JR

          Thank you Tim! I will try this.

          Good day,
          JR

    • BG

      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?

      • http://www.hyperarts.com timware

        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.

        • BG

          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?

          • http://www.hyperarts.com timware

            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.

    • gragg80

      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&#39; imgsrc='http://www.joshuargagg.com/qsl_fbv3/qsl_fbv3.jpg&#39; height='760' width='600' quality='best'
      />

      can you help me identify what am i doing wrong?

      thanks!

      • http://www.hyperarts.com timware

        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.

    • http://Www.semesteratsea.org Dave perks

      Hey there

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

      • http://www.hyperarts.com timware

        Not that I’m aware of.

    • http://Www.semesteratsea.org Dave perks

      Crap. Thanks, though.

    • http://www.vincenttobiaz.com Vincent Tobiaz

      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

    • http://www.nctv17.com Tim.B.

      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!

      • http://www.hyperarts.com timware

        I don’t think I can help you there, Tim. I assume you’ve read my post on embedding Vimeo videos in Static FBML. It’s not clear whether you’re trying to embed a slideshow of videos or just coding them in separately.

    • http://www.twitter.com/Bill_Lord Bill Lord

      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&#39;
      imgsrc='http://www.XXXXXX.org/_facebook/_img/video-large-placeholder.jpg&#39; width='320' height='176' /></fb:flv>

      Thanks for any suggestions!
      Bill

      • http://www.hyperarts.com timware

        Your code isn’t correct. According to the Facebook Developer Wiki, it should be “src” and “img”, NOT “flvsrc” and “imgsrc”. So that’s where I’d start.

    • Pingback: Custom Facebook landing pages | Aggie Webmasters

    • Christine

      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

      • http://www.hyperarts.com timware

        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.

    • http://www.createyourday.com.au jenny

      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”/>

      • http://www.hyperarts.com timware

        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.

    • Pingback: How to: Set Up A Professional Facebook Page | Penn Olson

    • http://JackIntheBoxCareers Karina

      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!

      • Analisa

        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!

        • Noah

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

    • Noah

      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

      • Noah

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

        • http://www.hyperarts.com timware

          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.

    • http://www.IWantMyGVO.com Jeff Willis

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

    • Regina Jackson

      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&#39; imgsrc='http://img.youtube.com/vi/LNmJJFnz_Zg&hl/2.jpg&#39; width='340' height='270' />

    • Regina Jackson

      Never mind I got it.

    • Jana

      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.

      • http://www.hyperarts.com timware

        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.

      • Jana

        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&#39; width='475' height='316' title='Lift' salign='l' img='http://www.servicelearningtexas.org/facebook/SLTX/images/lift-screenshot.jpg&#39; width='475' height='316' scale='showall'/>

        • http://www.hyperarts.com timware

          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!

          • Jana

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

    • John

      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!

      • http://www.hyperarts.com timware

        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.

        • John

          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!!

    • Ray

      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 ?

      • http://www.hyperarts.com timware

        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.

    • Ray

      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…

    • Pingback: Tutorial: How to Embed Photobucket Slideshow in Facebook Static FBML Tabs | HyperArts

    • Lee Hanacek

      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

      • http://www.hyperarts.com timware

        Yes, using the fb:mp3 FBML tag:
        http://developers.facebook.com/docs/reference/fbml/mp3

        Our video tutorial on embedding mp3s on a Facebook fan page using Static FBML

        Not sure what you mean about making a page “go down longer vertically.”

        • Lee Hanacek

          thanks tim that was really helpful. . just one more question:
          How would one get the mp3src to go over the picture like the video does.. example: i created a square picture that will hold the little play buttons so it looks clean but they only go underneath the picture rather than on top of it .. the video src goes over the picture…is there a way to get the mp3′s to do that also
          Thanks

    • http://www.thegiveproject.com Chase Brumfield

      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

      • http://www.hyperarts.com timware

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

        • Annie Mac

          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#&#039;
          imgsrc='http://img.youtube.com/vi/XXXinputvideo#/2.jpg&#039;
          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…..

          • http://www.hyperarts.com timware

            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.

    • http://articles.sa-linx.co.za Maryke

      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&#039;
      imgsrc='http://admin.ecert.co.za//Data/Sites/1/images/picture.jpg&#039; 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

      • http://www.hyperarts.com timware

        If you access the URL of your SWF directly, that’s how the movie looks. So you need to fix that movie.

    • http://www.northsoundgraphicdesign.com Tamara Smith

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

    • Annie Mac

      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

      • http://www.hyperarts.com timware

        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.

    • http://Facebook Jason Pizzio

      hey Tim, my website http://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?

    • http://marketingpearloftheweek.tv Dr. Alan Weinstein

      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?

      • http://www.thegiveproject.com/blog Chase Brumfield

        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…

      • http://www.videodonut.com Matthew Urmenyhazi

        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.

        • http://www.reelseo.com Mark Robertson

          Getting rid of the related videos is easy… use the following code

          <!--formatted-->

          Note the “&rel=0;&showinfo=0″

    • http://www.thegiveproject.com/blog Chase Brumfield

      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

      • http://www.thegiveproject.com/blog Chase Brumfield

        Whoops… forgot to add the code I guess?

        • http://www.thegiveproject.com/blog Chase Brumfield

          Code doesn’t appear when I wrap it in the code tags so i’ll just paste it this way

          • http://www.thegiveproject.com/blog Chase Brumfield

            ok no matter how i try to put this code in it doesn’t show up ;( ?

      • Ezra Tucker

        Hey Chase! I’m trying to do exactly what you did. I have the video embedded but I was wondering how you got the image to show on the whole page and get your video to show within the image?

        This is what i have so far.

    • http://computerzworld.com computerzworld

      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.

    • Walt

      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!

      • http://www.hyperarts.com timware

        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.

        • http://www.guardraildamageahead.com @scottayres

          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.

          • http://www.hyperarts.com timware

            I’ve added this, Scott. Check out the above instructions, under the “Positioning / Aligning your Video or Flash”.

    • Walt

      Thank you!

    • suddenstealth

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

      • http://www.hyperarts.com timware

        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.

    • frank

      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!

      • http://www.hyperarts.com timware

        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.

        • frank

          That worked perfectly! Thank you!!

    • http://www.dynanicsocialmediastrategies.com Tracey Tarrant

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

      • http://www.hyperarts.com timware

        Hi Tracey, Many people have asked this question so I’ve added instructions for positioning the video on the page to this post. Basically, you put the fb:swf code inside a container DIV and position that DIV with CSS.

        • http://www.dynanicsocialmediastrategies.com Tracey Tarrant

          Thanks Tim I missed that.

    • Hi

      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

    • http://www.dynanicsocialmediastrategies.com Tracey Tarrant

      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

      • http://www.hyperarts.com timware

        Read the post, Tracey. Try using autoplay, as described above.

    • Subail Sunny

      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&#039; imgsrc='http://www.thefunnybox.com/wp-content/uploads/2009/01/funny-picture-photo-sign-ninjas-lockergnome-pic.jpg&#039; />
      </center>
      <form action='http://tmel.org/contact.php&#039; 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

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

    • http://www.facebook.com/Derman.Iskender Serdar ALKAN

      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&#039;
      imgsrc='http://www.ucuztatilsenligi.com/facebookdeposu/menuresimi.JPG&#039;
      width='180' height='400' />
      </div>

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

      • http://www.hyperarts.com timware

        I check everything out & it seems fine. I’m really not sure why the Flash doesn’t load after clicking the activation image. Perhaps there are flashvars needed to run the Flash? You might need those flashvars laid out via the: flashfvars=”FLASH VARS” parameters. More here: http://developers.facebook.com/docs/reference/fbml/swf

    • http://www.scrufflesmedia.com.au Carolyn

      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&#039; 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&#039; width='340' height='270' />

      It doesn’t work! What am I missing?

    • Christopher Smith

      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>

      • http://www.hyperarts.com timware

        I would suggest you use FBJS and the “clicktoshow” and “clicktohide” features. I can’t troubleshoot your JavaScript.

        • Christopher Smith

          thank you i have got the correckt code no
          if(document.getElementById(‘div1′).getstyle(‘display’)==’none’){
          document.getElementById(‘div1′).setstyle(‘display’, ‘block’; } else { document.getElementById(‘div1′).setstyle(‘display’, ‘none’; }

    • Uns

      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&#039;
      imgsrc='http://www.rallyforlife.net/Why_Stillimage.jpg&#039;
      width='600' height='385'
      />

      • http://www.hyperarts.com timware

        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.

        • Uns

          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!

    • Uns

      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

    • kristal

      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

      • http://www.hyperarts.com timware

        It sounds like the URL to your image is incorrect. Check it directly in your browsers.

    • zac

      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?

    • http://www.videodonut.com Matthew Urmenyhazi

      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!

    • Disco Ninja

      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

      • http://www.hyperarts.com timware

        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.

    • http://www.videodonut.com Matthew Urmenyhazi

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

    • Pingback: Creating a Great First Impression with a Custom Landing Tab | Caroline~Grace

    • Chucho

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

    • Nicole

      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?

      • http://www.hyperarts.com timware

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

        • Nicole

          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!

    • Sriya

      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

    • http://www.johngeddert.com Kristin Moore

      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!!

    • Lori

      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.

    • Giedre

      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

    • Brad

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

      • http://www.hyperarts.com timware

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

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

    • Bien

      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.

    • Pingback: Creating an Attractive Facebook Fan Page | MLM Dream Saver

    • http://www.factorking.com John

      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&#039;
      imgsrc='http://i843.photobucket.com/albums/zz358/barloweinteractive/Factor%20King/Factoring-video-image-Facto.jpg&#039; 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.

      • http://www.hyperarts.com timware

        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.

        • http://www.factorking.com John

          Thanks, Tim!!

    • Marisa

      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

      • http://www.hyperarts.com timware

        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.

    • http://www.bbbs.co.za Derickd

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

    • ew

      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!

    • http://www.freelancesocialmediamarketing.co.uk Michael Ingram

      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&#039;
      imgsrc='http://www.freelancesocialmediamarketing.co.uk/images/img04.jpg&#039; 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?

    • Kathleen

      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.

    • Sascha

      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?

      • http://www.hyperarts.com timware

        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.

    • Sascha

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

    • Kristina

      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&quot;
      imgsrc="http://i944.photobucket.com/albums/ad290/Xiameter/Xiameter_WhoWeAre_FINAL.jpg&quot; width:"520" height:"520" margin:"auto">

      • http://www.hyperarts.com timware

        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.

    • Sascha

      No idea anyone? :-(

    • toph

      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' />

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

      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

      • http://www.hyperarts.com timware

        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.

    • Sascha

      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.

      • http://www.hyperarts.com timware

        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.

    • Sascha

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

    • Sascha

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

    • Sascha

      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.

      • http://www.hyperarts.com timware

        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

    • http://perrspective.com Dolma

      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

      • http://www.hyperarts.com timware

        I’m not aware of a method of creating a hover effect over the video itself.

    • Sascha

      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.

    • Sascha

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

    • Sascha

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

      • http://www.hyperarts.com timware

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

    • http://www.easytoursofindia.com Dave

      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.

    • Adrian

      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.

      • http://www.hyperarts.com timware

        Just add the dimensions in the “imgstyle” parameter which accepts standard CSS:

        imgstyle=”width:450px; height:140px;”

    • http://comod-music.de comod

      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"&gt;
      <head>
      <fb:swf swfsrc="http://www.comod-music.de/fbplayer/test.swf&quot;
      width="100" height="100"
      imgsrc="http://www.comod-music.de/fbplayer/img.jpg"&gt; </fb:swf>
      </head>

      • http://www.hyperarts.com timware

        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.

    • Adrian

      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&amp;
      autoplay=1'
      imgsrc='http://i54.tinypic.com/5165bs.jpg&#039; width='450' height='450'/></fb:swf>
      </div>

      • Tim Ware

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

        • Adrian

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

          • http://www.hyperarts.com timware

            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!

    • http://comod-music.de comod

      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?

    • http://comod-music.de comod

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

    • Pingback: Embedding Videos or Flash in Facebook Static FBML Custom Tabs with fb:swf – Troubleshooting FAQ | HyperArts