logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

YouTube Video of Flash Ecard on Facebook


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.

  1. In the top box, type in the following code that will display the background image and the call to action image.

  2. 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.

  3. 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.

  4. 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.

  5. Click the small arrow on the right of the Favorites section to expand the list of thumbnails.

  6. Place our cursor over the thumbnail and click on the pencil icon.

  7. 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.

  8. 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.

  9. When the new thumbnail is uploaded, you can close this page and go back to your Timeline.

  10. 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 = "http://www.yourwebsite.com/RacingCar/index.html"
</script>

Fans HTML box -

<script>
location.href = "http://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('http://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="http://www.yourwebsite.com/RacingCar/callToAction.jpg" />

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

← Back

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

Ecards-Ecards-Ecards



Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|

Add YouTube+Video+of+Flash+Ecard+on+Facebook to Twitter Add YouTube+Video+of+Flash+Ecard+on+Facebook to Facebook Add YouTube+Video+of+Flash+Ecard+on+Facebook to MySpace Add YouTube+Video+of+Flash+Ecard+on+Facebook to Del.icio.us Digg YouTube+Video+of+Flash+Ecard+on+Facebook Add YouTube+Video+of+Flash+Ecard+on+Facebook to Yahoo My Web Add YouTube+Video+of+Flash+Ecard+on+Facebook to Google Bookmarks Add YouTube+Video+of+Flash+Ecard+on+Facebook to Stumbleupon Add YouTube+Video+of+Flash+Ecard+on+Facebook to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Motion Workspace - Checkbox, Dials and More

Motion Workspace - Menu, Icons and Sliders

The Motion Toolbar Tools

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor