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.

9. In the top box, type in the following code that will display the background image and the call to action image.
   
   
10. In the bottom box, type in the following code that will display the background image, the YouTube ecard video and the links to the website.
    
    
11. Click the Preview button to go to the preview screen. On this page, you have three links at the top of the preview - Public, Fans and Back. Use the links to view the two version of your app.
    
    
12. Click the Back button. Then click Save Changes to save your app. Use the drop-down menu to return to your Timeline.
    
    Now we can change the title and thumbnail for the app.
    
    
13. Click the small arrow on the right of the Favorites section to expand the list of thumbnails.
    
    
14. Place our cursor over the thumbnail and click on the pencil icon.
    
    
15. In the Edit Static HTML iFrame Tabs Settings dialog box, add the name of your app into the Custom Tab Name box and click Save.
    
    
16. Still in the dialog box, click the Change link for the Custom Tab Image. This will take you to the Upload a Custom Image page. Click the Change link to open the Upload dialog box.
    
    
17. When the new thumbnail is uploaded, you can close this page and go back to your Timeline.
    
    
18. Click the Okay button to close the Edit Static HTML iFrame tabs Settings dialog box and save your changes.
    
    

At this point, if you click on the app's thumbnail, you will see the HTML boxes again. In order to view the actual app, not the preview, you need to log out of your Facebook account.

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 -

<script>
location.href = "https://www.yourwebsite.com/RacingCar/index.html"
</script>

Fans HTML box -

<script>
location.href = "https://www.yourwebsite.com/RacingCar/page2.html"
</script>

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

Change this:
<table width="480" height="600" style="background-image: url('https://www.yourwebsite.com/RacingCar/background.jpg'); background-repeat: no-repeat;">

To this:
<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

Change this:
<img src="https://www.yourwebsite.com/RacingCar/callToAction.jpg" />

To this:
<img src="callToAction.jpg" />

← Back

Static HTML iFrame Tabs
https://www.facebook.com/pages/Static-Html-iframe-tabs/237278599679568

Ecards-Ecards-Ecards