Knowledge Base /FAQs /iFrames
Sample iFrame and Code
Bartell Cope
posted this on April 21, 2011 14:59
This tutorial includes an example of how to add specific coding into our Wildfire iFrame to create a custom Welcome page for those that "like" your fan page. You will want to ensure that you have added the iFrame to your page before you proceed through this tutorial.
Click here to follow our tutorial on adding the app to your fan page: Adding the Wildfire iFrame App to Your Fan Page
Step 1: Editing Your iFrame App
Now that you have added the app to your fan page, click on the app to populate the "Edit Settings" button.
Step 2: Adding Custom HTML to Display a Custom Welcome Page
Now choose to add Custom HTML to create a custom welcome page for either "fans" or "non-fans."
Step 3: Save and Preview
Here is an example of a Welcome page that was created by our design team. The code for this design is also listed below.
Actual Code Used for this Design:
<div style="background-color: #eee; width: 490px; padding:15px;">
<a href="http://www.wildfireapp.com" target="_parent"><img src="https://s3.amazonaws.com/wildfireapp/wildfire/iframe_hero.jpg?2" style="border: none;" height="565" width="490" /></a>
<h1 style="color: #770495">Learn about Wildfire's iFrame App <a href="http://wildfireapp.zendesk.com/entries/20003303-acceptable-html-and..." target="_parent">here</a>.</h1>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.</p>
<p>Vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.</p>
<h2>You Wont Believe These Deals</h2>
<img src="https://s3.amazonaws.com/wildfireapp/wildfire/iframe_secondary.jpg?2" width="124" height="124" style="float: left; margin:0 15px 15px 0;" />
<p>Ius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in <a href="http://www.wildfireapp.com" target="_parent">ea volupta</a> te velit esse quam. </p>
<p>Nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Ius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
Comments
This is actually very frustrating. I put in some basic html and it gave me a huge list of tags that needed removed. are tables not allowed?
Code is below:
<table width="520" border="1" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2"><a href="http://www.rue21.com/"><img src="http://assets.rue21.com/assets/images/social/facebook/LP/facebook-m..." border="0" /></a></td>
</tr>
<tr>
<td><a href="http://www.rue21.com/guys/"><img src="http://assets.rue21.com/assets/images/social/facebook/LP/facebook-g..." width="253" height="309" border="0" /></a></td>
<td><a href="http://www.rue21.com/Merchandise.aspx?CategoryID=66&GenderID=1&..."><img src="http://assets.rue21.com/assets/images/social/facebook/LP/facebook-g..." width="253" height="309" border="0" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="http://www.rue21.com/accessories/etc/"><img src="http://assets.rue21.com/assets/images/social/facebook/LP/facebook-e..." width="520" height="93" border="0" /></a></td>
</tr>
<tr>
<td colspan="2"><a href="http://www.rue21.com/"><img src="http://assets.rue21.com/assets/images/social/facebook/LP/facebook-w..." width="520" height="31" border="0" /></a></td>
</tr>
</table>
I also had trouble adding a custom tab. I just got a lot of errors. First I added an iframe and saw I can't do that. Then I got the original source code from the iframed page. I fixed all the original img src URLs to absolute URLs, but the images would not display. Instead, I got errors that src was not an accepted attribute, even though the example above says it is.
Disappointed because we wanted to sign up for a subscription to run promotions, but my first experience with Wildfire didn't work.
Joseph and CIndy,
Thank you both for taking the time to leave feedback. It's important to understand that the purpose of Wildfire's free iFrames app for pages is to allow marketers to create super simple, engaging, and EASY Facebook fan page tabs. The free version of this application, available to everyone, is meant to be easy to use for non-technical administrators, and it is not configured to allow all HTML. It will render simple HTML, but not everything you might desire to do with a tab. For more complex page designs, you will want to create a custom iFrame tab of your own, without using the Wildfire Free iFrames app for pages.
Hi,
I've used the sample code and changed bits and pieces. It works great. However, how do I embed a slideshow onto my landing page? Simliar to this:
http://www.facebook.com/pages/Gatesman-Photography/109912689025034?...
The resource I'm using is
http://armesphotography.com/2011/02/14/photoshelter-and-facebook-in...
I've got the embed code, its generated through Photoshelter's sildeshow embed code. I dont have FBML. But am looking forward to embedding it into iFrames. What should I do? Is there a part of the code that I'm missing?
Thanks in advance,
D.
If I choose to upload a custom image but want to include a link to a url how do I do that? I'd like to do something like this:
http://www.facebook.com/marismith?sk=app_201143516562748
Thank you
D
Can anyone help me out with all these codes? I dont know how the hell to do any of this. lol
Hey Everyone!
I believe most of your questions (mainly D) can be answered here, http://help.wildfireapp.com/entries/20003303-acceptable-html-and-css-for-the-wildfire-iframe-app. This is a link to a tutorial with all the acceptable coding for the iFrame application. It will show you the proper tags to imput the html you desired.
Unfortunately this iFrame is not capable of having the image scrolling, and can only use the one static image with a clickable link in it. Yani, I believe you will get a great deal of help from that link as well as it will show you which codes do what exactly. I hope that this helps everyone!
Jason
This tutorial really help me out.Thanks
If I want non fans to see an image map that they can then click onthe custom "Like" button and be taken to a page where they can download the free file I offer, how do I set that up so Facebook knows they clicked on like? What do I link it to? I need to link it to my download page I thought? Yet if they go directly to my download page from my custom "Like" button, Facebook will never know they liked my page. It seems a bit convoluted right now. Anybody have any ideas? If I drink more coffee will that help?
Hi! Is it possible with your app to customize the small icon that sits on the left margin? If so, how? Thank you so much!
Cheers
It keeps me saying " Errors were found processing html for your fans view 'src' is not an allowed HTML attribute "
This 'src' is in the second line.
I've checked here http://wildfireapp.zendesk.com/entries/20003303-acceptable-html-and... and it is true. 'scr' is not included.
Any ideas to solve this?
Thanks to anyone who can help urgently.
OK, so I know I'm supposed to be able to do tables, but how can anyone do a well-design able without the cellpadding and cellspacing properties? I can't have a background URL so that's out, which means I'm out of luck if I want to do two hrefs next to each other on an image background without an ugly white line down the middle. Help!! This contest is supposed to go live tonight!
I have a working Flash with an active link in it, however i can't export it to a jpg or a png to make this work. when i try to export it to html in Flash all i get is the image and the hyperlink no longer works. any suggestions?
Suggestion, use this app instead
Static HTML: iframe tabs
Static HTML makes it simple to create powerful custom iframe tabs.
Simple HTML Codes here: http://quickhtml.blogspot.com/
Or use this tutorial for simple setup
- Select & edit an image, you can use a free image editing tool such as Microsoft Paint or http://www.picnik.com/, host it somewhere, like with a free image hosting tool like http://freevps.us/img/, then copy & paste the HTML code into the Static HTML editor on your page, & click save.
-----
So: 1) Find picture, 2) Edit picture (if needed), 3) upload picture here: http://freevps.us/img/ 4) Copy & paste code fromhttp://freevps.us/img/ into Static HTML white box, then 4) Click Save.
------
Did this help?
Static HTML iFrame Tabs is a better application for your iframe needs on your facebook pages.
I like what I have done in an hour or two.
Let me know what you think at www.facebook.com/MaksimImages
Now I would like to know how to get the banner off from bottom of the page, and possibly how to change icon on the left.
Thanks a lot.