Here's our tutorial video, for more details, see below. :) 




  1. Getting started: just the HTML

    You can use <html> and <head> and <body> tags like on a regular, full web page, or you can just use some bold and italic tags if you want. You can be as fancy or a simple as you want.

  2. Using CSS and JavaScript

    It's perfectly fine to use CSS and javascript inline with your HTML like you normally would on a web page. But if you want to keep your code more organized, you can use our built-in CSS editor and JavaScript Editor.

    Type your CSS into the CSS editor without <style></style> tags. Then include a special smart tag in your HTML to make the CSS show up. By default, the text in the CSS editor shows you the tag to use.

    JavaScript is essentially the same. Type in your javascript without surrounding <script></script>tags, then include the special smart tag for javascript in your HTML.

  3. External scripts, css, images, and other assets

    Because Facebook uses https (secure hosting), and because your tab lives in an iframe inside Facebook, many browsers will have trouble displaying content not loaded over https.

    What this means is that anytime you use an image, external javascript, css, something like an SWF, or anything else, you'll need to load it over https or there may be issues.

    If you have assets loaded over http, sometimes browsers will display a security warning, other times they show a warning icon in the address bar, but in the worst case they will simply not display your tab at all.

  4. Forms and links

    Your tab will show up inside an iframe inside Facebook. By default anytime a user clicks a link, it will load that link into the same iframe. Anytime a user submits a form (like for paypal), that page handling the form response will also load inside the iframe.

    Sometimes this is what you want, but most of the time you'll want links and forms to load in a full browser window, not trapped inside Facebook.

    You can pop out links and forms by simply using atarget='_blank' attribute in the link code (which causes the content to load in a new browser tab), or atarget='_top' attribute (which will load the content in the current browser tab, replacing Facebook).

    For linked text using _target='_blank', the code looks like this:

    <a href='http://example.com' target='_blank'> go to example.com </a>

 

       For linked text using _target='_blank', the code looks like this:

       <form action='http://example.com' target='_blank'> Form content </form>