Knowledge Base /FAQs /iFrames
Acceptable HTML and CSS for the Wildfire iFrame App
Bartell Cope
posted this on April 04, 2011 16:17
While Wildfire is pleased to offer our new iFrame App, we also want to ensure you are aware of the acceptable elements of HTML and CSS that you can use with it. Here is a convenient list:
HTML
Allowed HTML Tags
| Render strong (bold) text | <strong> or <b> | Define computer code | <code> |
| Render emphasized (italic) text | <i> or <em> | Sample computer code text | <samp> |
| Paragraph | <p> | Define preformatted text | <pre> |
| Embed image | <img> | Definition term | <dfn> |
| Teletype | <tt> | Citation | <cite> |
| Subscript | <sub> | Variable | <var> |
| Superscript | <sup> | Keyboard text | <kbd> |
| Small text | <small> | Contact information | <address> |
| Big text | <big> | Horizontal line | <hr> |
| Heading sizes | <h1> - <h6> | Line break | <br> |
| List item | <li> | Division | <div> |
| Unordered list (bulleted list) | <ul> | Group inline-elements | <span> |
| Ordered list (numerical/alphabetical) | <ol> | Describe an abbreviated phrase | <abbr> |
| Define definition list | <dl> | Define an acronym | <acronym> |
| Define definition list item | <dt> | Long quotation | <blockquote> |
| Describe definition list item | <dd> | Define deleted text | <del> |
| Define anchor | <a> | Define inserted text | <ins> |
| Define table | <table> | Group columns in a table | <colgroup> |
| Group table body content | <tbody> | Define column attribute values | <col> |
| Group table header content | <thead> | Define table caption | <caption> |
| Group table footer content | <tfoot> | Define header table cell | <th> |
| Define table row | <tr> | Define standard table cell | <td> |
Allowed HTML Attributes Tags
| Specify the destination of a link | href | Specify extra info for an element | title |
| Specify where to open a link | target | Specify a classname for an element | class |
| Specify the name of an anchor | name | Specify a unique id for an element | id |
| Specify the URL of an external script file | src | Specify an inline style for an element | style |
| Specify the width of a table cell | width | Specify the date and time | datetime |
| Specify the height of a table cell | height | Specify a language code for the content | xm:lang |
| Define alternate text for an object | alt | Specify a shorter version of cell content | abbr |
| Specify the source URL of content | cite | t |
CSS
Allowed CSS Properties
| Specify background color | background-color | Single border line between cells | border-collapse |
| Specify border color | border-color | Font | font |
| Specify top border color | border-top-color | Specify font type | font-family |
| Specify bottom border color | border-bottom-color | Specify font size | font-size |
| Specify left border color | border-left-color | Specify font style (bold, italic, etc.) | font-style |
| Specify right border color | border-right-color | Specify if text should be displayed in a small-caps font | font-variant |
| Specify color | color | Specify font thickness | font-weight |
| Specify an element's side(s) where other floating elements are not allowed | clear | Specify a pause | pause |
| Specify cursor type | cursor | Specify a pause after speaking an element's content | pause-after |
| Specify text direction | direction | Specify a pause before speaking an element's content | pause-before |
| Specify the type of box an element generates | display | Specify pitch of the speaking voice | pitch |
| Specify where sound comes from | elevation | Specify the variation in the speaking voice | pitch-range |
| To float an element | float | Specify what happens if content overflows an element's box | overflow |
| Specify element height | height | Specify the "richness" of the speaking voice | richness |
| Specify element width | width | Specify whether or not text will be rendered aurally | speak |
| Specify letter spacing | letter-spacing | Specify whether table headers will be spoken before each cell OR spoken only once | speak-header |
| Specify line height | line-height | Specify how numerals will be spoken | speak-numeral |
| Specify text alignment | text-align | Specify how punctuation will be spoken | speak-punctuation |
| Specify text decoration | text-decoration | Specify the speed of speaking | speech-rate |
| Specify size of indent | text-indent | Specify the "stress" in the speaking voice | stress |
| Set the vertical alignment of an element | vertical-align | Specify the voice family of the speaking voice | voice-family |
| Use in conjunction with the 'direction' property to specify which direction the text should run | unicode-bidi | Specify the volume of the speaking voice | volume |
| Specify the use of white space | white-space |
For more details about Aural References, see this W3 Guide
Allowed CSS Keywords
| Color Properties | aqua, black, blue, brown, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, transparent, white, yellow |
| Font / Text Properties | bold, italic, underline, dashed, dotted, none, nowrap |
| Position Properties | auto, bottom, center, left, right, top |
| Display Properties | block, collapse (for tables), |
| Border Properties | solid, none, medium (for width) |
| Cursor Properties | pointer, auto |
| Float Properties | left, right, none, both |
CSS Shorthand Properties
| Background |
| Border |
| Margin |
| Padding |
For an example of a Custom Welcome page and the code associated with it please take a look at our tutorial here: http://wildfireapp.zendesk.com/entries/20047591-sample-welcome-page...
Comments
Seems to be quite limiting for creating welcome pages. How would you embed a Video? How about creating forms for users to sign up for mailing lists, etc? The concept is great, but once we have people like our page we want to ensure it's rich experience. Thoughts?
It seem impossible to have an image with a link... of a sign-up form !!! GUIDE ME PLZ
Is putting a link to an image is that complicated ???
Mschuchman: Embedding a video or a form is not allowed on the free iFrame App. If you want to create an intricate landing page for your fans, you can email sales@wildfireapp.com about unlocking additional features on the App.
Eric Rousseau: Here's the code that you will need to embed an image with a hyperlink:
<a href="PUT YOUR URL HERE"><img src="LINK TO YOUR HOSTED IMAGE HERE" /></a>
For more easy-to-follow HTLM tutorials, I suggest visiting http://www.w3schools.com/
Laura Lutener: You're definitely correct in that "src" is an allowed HTML attribute. If you're still facing this problem, can you paste your code below and we can identify any errors.
HI - just hoping to allow new fans access to my wall. How do I do that? Thanks!
Anna, can you please be a little more specific with what you mean by "access to my wall"? All fans should automatically have access to your wall, but if you installed an iFrame fan gate, then perhaps your default landing tab changed. If you want to change the landing tab on your page you need to click "edit page" and then "manage permissions". There will be an option midway through the page to set your "Default Landing Tab" based on the name of the tab. Please let me know if this addresses your question.
I found a way on how to use not allowed css. Here's an example <div style="not allowed css" id="test-id" style=""></div>. Declare first in style the css that you want, then declare another style without contents. I was able to use position:absolute and negative margins. Cheers!
For some reason it won;t let me use http:// in one of my links even though it let's me use it in a image src: . And from what i've read above links are allowed. Anyone got any idea of what I should do?
Is there any way to align the text?
This is extremely helpful, but I'm still struggling to get my tab to work correctly. Using the code that Ross Festenstein suggested in his comment on August 17th, I've almost got my welcome tab done. I've got the right image being pulled in, and I've got it linking to the right page of my website...but it opens that website page right there in the tab, not in a new internet tab/page. Is that how it's supposed to work--obviously a website isn't the same width as a Facebook tab so it really won't work. Even when I add target="_blank" it still won't open it in a new internet page, but it's also not telling my there is an error in my code or that my code isn't allowed so it doesn't seem like I wrote anything wrong.
Hi guys,
I think some of mean to do the following:
A non-fan arrives at the welcome tab, sees our awesome graphics (thanks to wildfire!). Then, once they press "like", we would like to automatically route them to the wall, the same way that coca cola does it, for instance.
For now, it leads them to the welcome tab and they just see the same promotion.
Hoping you guys can help out!
Hi,
I would like to know how to set UTF-8 encoding on the free version. I want to use Croatian language!
my facebook page: http://tinyurl.com/3x5xc56
I am setting up my FIRST fan page, and I want to add a form in it.
I have seen it done with IFrame App but it keeps giving me "Errors were found processing html for your non fans view"
How do I do it?
TIA, Ariel
I'm getting the error:
URLs inside css styles are not allowed
<div style="float: left; width:134px; margin-left:25px"><a href="http://www.site.com/page.htm"><img src="http://www.site.com/Facebook/images/image.jpg" width="134" height="136" alt="#" style="float:left" /></a></div>
Unfortunately the fb account owner won't give me access to the account, so I can't do hands-on testing.
Is the problem the float inside the <img> element, or is it the styles inside the <div> wrapper?