Contact Us
  • Embedding Video and Flash in Static FBML with the fb:swf Tag – Troubleshooting

    If you can’t get your fb:swf FBML tag working on your Facebook Fan Page custom tab, you will most likely find the reason why below.

    I’ve answered hundreds of questions from my readers concerning their issues implementing FBML on their tabs, and it always comes down to some common mistakes and/or misunderstandings.

    NOTE: If you copy and paste examples, MAKE SURE you change the URL and other values to reflect your preferences and settings!

    TIP: Knowledge of HTML and CSS is important in working with Static FBML. A great resource for learning HTML and CSS is W3Schools. As we can’t offer support for coding, check out this resource!

    If you check your code against the information CAREFULLY, you should be able to track down any problems you’re having with your FBML code.

    THE BASICS: Using fb:swf on your Static FBML Custom Tab

    • Internet Explorer 8 / IE 8 DOES NOT support styles inlined with the <style> … </style> tags! The other major browsers DO support inlined styles, but not IE 8. To have your CSS styles render properly in all browsers, you should use an external stylesheet, and use the <link /> tag to apply it to your tab. Example:

      Static FBML External Style Sheet

      Inlining styles directly in the HTML mark-up tags is supported across all browsers — Example:

      <div style="margin-top:15px; text-align:center;">

      But this can get cumbersome and certain types of CSS styling can’t be done using this method.

      TIP: Facebook caches your external stylesheet. To force Facebook to update its cache when you make changes to your stylesheet, add this bit of code to the end of the stylesheet URL: ?v=10.0. Example:

      <link rel="stylesheet" type="text/css" href="http://www.YOURDOMAIN.com/your-stylesheet.css?v=10.0" />

      Whenever you make changes to your stylesheet, increment the number (10.0, 10.1 … 11.0, etc.) and save your FBML tab.

    • You CAN’T have your video or Flash start playing when the page loads. Facebook requires a user action (usually a click on an “activation” image — the “imgsrc” value) to load Flash or run JavaScript. If you add “&autoplay=1” to the end of the URL. Example:

      swfsrc='http://www.youtube.com/v/RjWKPdDk0_U&autoplay=1'

      your video or Flash will begin playing AFTER the user clicks the activation image. However, if the video is hard-coded to have autoplay=0, you may not be able to set it to autoplay.

    • To center or otherwise 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. Example:

      <div style="margin: 1em auto;">
      <fb:swf
      YOUR CODE HERE
      />
      </div>

      Setting the CSS for the containing DIV to “margin:1em auto” will center the video on the tab. (You can change “1em” to “0” or whatever margin size you want for the top and bottom of the DIV). You can inline the style as in the above example, or create a class name and giving the containing DIV that class, then add the class to your external stylesheet. Example:

      .center { margin:1em auto; }

    • To make your activation image and your displayed video different sizes, NOTE that the values for “width” and “height” in the fb:swf tag are ONLY for the displayed video size. And adding “height” and “width” values to “imgstyle” values doesn’t work (which is very misleading!).

      To have a different size for the activation image, add: imgclass=”activate-img” (or whatever you want to name the class) to the parameters. Then create that class in your stylesheet and set the width and height values there. Example:

      <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'
      imgclass="activate-img" width='340' height='270' />

      Then, in your CSS:

      .activate-img { width: XXpx; height: XXpx; }

      Replace “XX” with the height and width values you want.

    • FULL-SCREEN mode won’t work on your custom FBML tab. Your video may show the icon (4 arrows) for full-screen mode, but this won’t work on your Facebook tab.

    TROUBLESHOOTING Why Your FBML Code Isn’t 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 browser’s address bar. Example:Browser Address Bar

      and accessing the image or video directly (a YouTube video in the above example). 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. Example:

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

    • Make sure the “imgsrc” URL points to an image, NOT to a page with an image! One of the most common errors when trying to point to an image on an image-hosting service like Flickr or Photobucket is not getting the URL to the image itself. When on the page for your image at the hosting service, you should see a link to “Share this image” or something similar. That’s where you can get the URL.
    • If you’re using an XML file with your Flash to pull in data, make sure all URLs are absolute (i.e., include the “http://”). Facebook makes a copy of your Flash file and that’s what it serves up, not the one on your server.
    • 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’ ).
    • NO curly or fancy quotes! You MUST use plain-text, straight-up-and-down quote marks or your code WON’T work! If you copy and paste code, make sure your single or double quotes appear straight up and down and not angled. Example:THIS:

      imgsrc="URL-TO-IMAGE"<!--formatted-->

      NOT THIS:

      imgsrc=”URL-TO-IMAGE”

      Notice in the “NOT” example that the quotes are slightly angled. This will cause your code not to work.

    Comments are open here but, honestly, if your fb:swf or fb:flv tag isn’t working and the solution isn’t in this article, I probably can’t help you. MAKE SURE YOU CHECK YOU CODING CAREFULLY! Cheers!

    Static FBML Tutorials:
    Embed Videos, Flash & Photo Galleries

    Comments

    1. GREAT help. VERY much appreciated.

      I used the code without specifying a size and it worked in FF and IE, but not Chrome. Go figure!

      http://www.facebook.com/pages/Miss-Kansas/162178393813876?v=app_4949752878

      Your imgclass is a great solution, so I will be adding the new trick into CSS and FBML!

      Thanks Again!

    2. Hi, I’ve found your tutorials very helpful. I’m in the process of battling a strange white line that appears below my flickr activation picture.

      The best way I can explain is to show you:
      http://www.facebook.com/dreamingcow?v=app_6009294086

      It is a CSS image map, I got rid of the white line on the side, but the bottom doesn’t respond to any changes.

      Any clue as to what is going on?

    3. Thanks, Tim. Have you any suggestions to fit an id= alt””/> in the block of code (the fb:swf code) for the flickr slideshow? Right now it is linking directly back to the application. When I remove the id= to return to baseline code, the CSS falls apart.

    4. Hi Tim. Great tutorials, thanks for posting them.

      You have mentioned a few times how to embed YouTube videos in FBML on fan pages but can you shed any light on how to embed facebook videos?

      I have looked everywhere and tried a fair few variations of code but nothing seems to work.

      Many thanks.

      • Well, you’d have to use the fb:swf or fb:flv tag. You need to get the URL of the video on Facebook which might be difficult. Have doubleclicked the FB video to see if you can open it in the original location? That’s all I can think of.

        • Thanks Tim.

          I have tried both the fb.swf and fb.flv tags and placed the url ‘http://www.facebook.com/video/video.php?v=149054475XXXXXX’ with in the code but it simply doesn’t play.

          Seems strange you can’t play facebook video through a facebook fan page.

          Thanks again for your help.

    5. Hello!
      Thanks for all these tips!
      I’m trying to have flash vars to come together with the fb:swf, but that just doesn’t come. The flash loads fine but the XML doesn’t connet. Is there a workaround?
      I’m trying to put the flash of http://www.chokdidesign.com/dizkostu/fb/player.html (that preview.swf) into a page to pre release some music…

      if there’s a not too complicated trick to have it running, i’d be glad to hear about it!

      thanks!

    6. Hi,

      You wrote about flash. Maybe you will know how to make such functionality as on the fanpage CocaCola – http://www.facebook.com/cocacola?v=app_132920893413852 ? When i click on the thumbnails of video, video is changed and playing instantly. Clicking on another thumbnail delete previous video and starting new one. doesn`t work. Any ideas?

      • Custom programming using FBJS (Facebook’s JavaScript). You do have to click the “activation” image to start the videos and once you’ve done that then clicking the thumbnails rewrites “swfsrc” to a different YouTube video.

        • I found another solution: document.createElement(‘fb:swf’)

          the code:

          elem.setTextValue(""); // To delete all content in element
          var newSwf_1 = document.createElement('fb:swf');
          newSwf_1.setId('mySWF');
          newSwf_1.setSWFSrc('URL_TO_SWF');
          newSwf_1.setWidth('XXX');
          newSwf_1.setHeight('XXX');
          elem.appendChild(newSwf_1);

    7. Best tutorial I’ve found, but there must be something else that prevents flash from opening on my Facebook page.

      It works perfectly fine outside of the Facebook, but for some reason, it doesn’t load within FBML. It shows loading circle for a second and after that, the player square stays blank. I did try to put all files on 3 different servers, added crossdomain.xml to the root folder but it doesn’t help.

      This is what I’m using to call .swf from within the Facebook FBML, but I tested a few other combinations, also I did try auto-play ON & OFF:

      <fb:swf
      swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
      swfsrc='http://www.checkthishouse.com/facebook_intro/accordion.swf?domain=http://www.checkthishouse.com/facebook_intro/'
      imgsrc='http://www.checkthishouse.com/facebook_intro/demo-images/static_menu2.jpeg'
      width='520' height='350' />

      Thanks for help!

    8. Hi

      I have bought your ebook but the code for embedding FLV files does not bring up a static picture its just a black page.

      • Yes, the default activation image can’t be changed, as it states in the documentation. You get the black box with the white outlined arrow, by default.

        • Thanks for your help Tim. Is there anyway I can have a picture rather than a black screen infront of my videos. I see the Coca Cola page works OK.

          This code just gives me the black screen

          • The Coca Cola page probably isn’t using the fb:flv tag. That tag defaults to the black screen with arrow and I’m unaware of any way to change that to an image of your choice. If you figure out a way, please share it. Thanks!

    9. Shamika Gardner says:

      my client just purchased the standard package and we thought it would be relatively easy to conquer but we are having some issues. How do we link the css that you sent us to the FBML page? Also, will that help us to have the template the way you intended for it to be on that page. We thought it would be drag and drop for our links….. Can you help us please?

    10. @Shamika: How to link the CSS file is explained in the PDF document in the package we sent you:

      stylesheet.css: main CSS file; must be uploaded to your server; CHANGE the tag URL at the top of “HyperArts_Pkg-1_Standard.html”

      So you upload it to your server, point the <link /> tag URL to where you upload it. That’s how it’s done. You need to do an external stylesheet because Internet Explorer doesn’t recognize inlined styles with the <style>… </style> tags.

    11. I’m trying to load this code on the following page.. not working.. i tried the links individually and they work. Timware bro, any ideas?


      <fb:swf
      swfbgcolor="ffffff"
      swfsrc='http://site.shoukhin.com/fb/paypalshop.swf'
      imgsrc='http://site.shoukhin.com/fb/init_image.jpg'
      width='520' height='550' />


      http://www.facebook.com/MyShoukhin?v=app_10442206389

      • Those links (swfsrc & imgsrc) don’t work for me. They both result in a 404 (File not found) error.

        • sorry bro.. just was doing an experiment.. they’re up now..
          but still having the same prob..

          • I tested and it works, except the Flash, after it loads, hangs. Do you have dependent files in that Flash, like XML? If so, make sure the Flash is coded with absolute URLs to the dependent files, because Facebook caches your Flash file on its servers so it won’t find the dependent files if the paths to them arent’ absolute.

    Trackbacks

    1. […] users have with their Static FBML tabs and using FBML, I'm closing comments here and have posted a troubleshooting post for embedding YouTube videos and Flash which addresses all the issues that cause users problems when implementing this FBML tag on their […]

    2. […] 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 […]

    3. […] 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 […]

    4. […] 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 […]

    5. […] 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 […]

    6. […] 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 […]

    7. […] for the activation image (imgsrc) for fb:swf and fb:flv, and links to videos and galleries on YouTube, Vimeo, Photobucket, Flickr, etc.. Test a URL by pasting it into your browser's address bar. […]