g
Printer Friendly Version

editor  
BellaOnline's Digital Art and Design Editor
 

Add Graphics to Facebook iFrame Landing Page

  1. The next step is to add your profile picture. This is where you will upload your avatar/logo image. Use the browse button to fine the jpg on your computer and upload. Click the button to go to the next step.

  2. Because the landing page is not ready for prime time yet, uncheck the Share options. You can go back and change this later.

  3. The last step is to add a link to your website and a description of the landing page.

That's it. You should now see your new landing page with your avatar/logo on the left. You have the usual Wall, Info and Photo links under your avatar. If you click the Info link you will see the link and description that you just added to the page. Go to your Wall. It's empty for now.

Now we need to work on the iframe inner column of your landing page. To do this we will use a small Facebook app, developed by Timothy Mensing and Jason Padvorac, that allows us to enter HTML, CSS and JavaScript into this iframe.

In the Facebook search box at the top, search for static HTML iframe tabs. Click on the link from the search results to go to the app's Facebook page. The correct link will have a gray star. Click the Go to App button. In the dialog box that asks for your permission to add this app to your page, use the drop down list to choose your landing page and click the Add button.

Back at your landing page, you will see a new link in the left menu under your avatar/logo. It has a star and the text Welcome. Click this link and two html input boxes will appear. The top one is for the page that your non fans will see and the second box is for the page people see after they have click the Like button on your landing page. The second is optional. If you leave this blank, both your fans and non fans will see the same page.

You can use any HTML, CSS or JavaScript in this box. We will use a few lines of HTML to display our second graphic. Copy and paste the code below into the top box.

<html>
<body>
<div>
<img src="http://YourGraphic.jpg" alt="Your Landing Page" border="0" />
</div>
</body>
</html>

Click the Save and view tab button to save your new landing page. Then click the View link to view the results.

← Back

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

Digital Art and Design Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 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.



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


BellaOnline Editor