|We are now ready to add the HTML that will display our Flash ecard on our Facebook Timeline Resources app. In the top box, you will add the HTML for the Public view of your app and in the bottom box, you will add the HTML for the Fans view.|
As you can, we have two buttons at the top - Magic and Preview. We will not be using the Magic option for this app. The Preview button will display a preview of how the app will look after it is installed. For those of you using Interent Explorer, you might see only part of the page when previewing the app. However, your Facebook visitors will see the complete page.
After you have logged out, visit your fan page and click on the app's thumbnail. You should see the live Public view. To test the live Fans view, you will need to Like your own fan page. However, you need to be logged in to your Facebook account to Like any page. Once you log in again, you will see the HTML boxes.
To work around this problem, you can log in as someone else. Ask a friend or family member to log into their Facebook account and Like your app. This will allow you to view the live Fans page.
Second Option: In the steps above, we entered the HTML in to the appropriate boxes on the app's workspace. However by storing the images and HTML pages together on your website server, you can easily reuse this app for another Flash ecard simply by changing the URL code to point to new HTML webpages for the Public and Fans views.
In the code below, we have the images and HTML pages - index.html for the Public view and page2.html for the Fans view - stored in a folder named "RacingCar". Once everything is uploaded to your server, you can use this code to display the pages in your app.
Public HTML box -
location.href = "http://www.yourwebsite.com/RacingCar/index.html"
Fans HTML box -
location.href = "http://www.yourwebsite.com/RacingCar/page2.html"
Because the images are now stored in the same folder as the HTML pages, we need to change the URL for the img tags in three places.
For the background image - on both the Public and Fans pages
<table width="480" height="600" style="background-image: url('http://www.yourwebsite.com/RacingCar/background.jpg'); background-repeat: no-repeat;">
<table width="480" height="600" style="background-image: url('background.jpg'); background-repeat: no-repeat;">
For the call to action image - on the Public page
<img src="http://www.yourwebsite.com/RacingCar/callToAction.jpg" />
<img src="callToAction.jpg" />
Static HTML iFrame Tabs
Join us in the Flash forum. | Join us in the Digital Art and Design forum.