WebCards as a Facebook Fan Page - Digital Art and Design

Now that we have finished customizing the WebCards system on your website server, we are ready to add it to the Facebook^R Fan page. Make a note of the URL for the front page of the system.

webcards/index.php

Our first step is to create a new Facebook Fan page. You must already have a personal Facebook account. Login and click the Create a Page link at the bottom of the page.

Once you are on the Create a Page wizard page, choose a category for your fan page. Most people will use the Brand or Product category but you can use another if it fits your needs better.
Once you have the subcategories list for your chosen category, choose the one that best fits.
Upload your avatar image and click the button to go to the next step.
Until you are ready to publish your fan page, uncheck the Share options.
Add a description of your fan page and a link to your website.

Now that we have our fan page, we need to add the iframe that will display our WebCards mini site. There are a few iframe apps available. One of the most popular is by Timothy Mensing and Jason Padvorac which is called static HTML iframe tabs.

http://www.facebook.com/pages/Static-Html-iframe-tabs/237278599679568
Click on the Go to App button to go to the permission page and use the drop down list to find your fan page. Click the Add button.

This will take you back to your fan page. Look for the Star and Welcome link in the side menu.
Click on the Welcome link to go to the setup form for the fan page.

You will see two boxes. The top box is for the non fans (people who have not yet Liked your fan page) and the bottom is for those who have. If you leave the second box empty, both groups will see the same page.

Copy and paste the following code into the empty top box. Change the URL for the location.href to the URL of the WebCards front page.

<:script>
location.href = "http://www.yourwebsite.com/webcards/index.php"
</script>
Save your changes and then click the Preview button to preview your fan page. You should see the WebCards system in the center column.

http://www.mywebcards.net

Join us in the Digital Art and Design forum.

WebCards screenshots used by permission.