In this tutorial I am going to show you how to create an iFrame application that allows you to
embed an external Web page (like this one) in your Facebook Page tab.
Create a web page in Xara Web Designer or Designer Pro
Step 1: Choose Utilities > Options > Page Size tab. Set the width to be 520 pixels and click OK.
Step 2: Add the content that you want to appear on your Facebook tab; this tutorial is the
example I use below, but you’ll see we have also added the Website and Art Galleries and
Outsider index.
Step 3: Next choose Utilities > Web Properties >Website tab and select the HTML Code (Body)
button. Paste the following code (see below), and click OK.
<style type="text/css">
body {width:520px;margin:0; padding:0; border:0;}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Step 4: Now publish your web page. File > Publish website. Note: Your published web address
will be needed later.
In the next part of the tutorial I will show you how to create a New Application in Facebook.
Installing the Facebook Developer Application
Step 5: The first step in creating an application in Facebook is to install the Facebook Developer
application.
To do that, log into Facebook and then visit the URL http://facebook.com/developers
If this is the first time you installed the Developer Application, you will see the Request for
Permission dialog as shown below:
Click the Allow button to proceed.
Step 6: Now that you have the Developer App installed, click on the Create New App button.
Step 7: Give the App a name, select the appropriate locale, and select the check box to agree to
the Facebook terms. Click the Continue button to proceed.
Step 8: Enter the Security Check code and click Submit.
Step 9: We are going to add a small icon to be shown on the left-column navigation. Click on ‘edit
icon’ to replace the default icon. If you don't create your own icon, you'll get the default, as shown
below.
Step 10: Click on the word ‘Page Tab’ to expand the options.
Step 11: In the Page Tab section, enter the Page Tab Name that will appear on the sidebar of
your Fan Page. Then enter the Page Tab URL (this should be the published website address that
you created in step 4) and Secure Tab URL (a secure version of your page).
Note: If you do not enter a Secure Page Tab URL, visitors will not be able to access your Custom
Fan Page Tab if they are connected to Facebook over SSL (https). The app will not be visible to
them and they will see your Wall rather than your Custom Tab if they access your Fan Page.
Click the Save Changes button.
Step 12: Once your Facebook application has been created, you will need to add it to your Fan
Page. To do that, click on the View App Profile Page link on the right side of your application
page.
Step 13: Now click the Add to My Page link on the left.
Step 14: A dialog box will open and will show any pages that you are an Admin on. Find the page
that you want to add this tutorial to, click the Add to Page button, and you’re done!
Tutorial created in Xara Designer Pro. © Xara Group Ltd
