Lately Facebook has made changes from using FBML (regular HTML) to using iFrames ( “frames” inside the web pages that allow you to have a website within a website). In other words, you are basically building a website on your server, then calling it an application and using it on your fan page. Facebook is smart in doing this so people won’t use websites anymore and everything will be done through Facebook. However, Facebook did say they will continue to support the tabs that have FBML on them, but switching to iFrames is preferable.
Get Facebook Verified! Here is how:
Go to the Facebook Developer website. They will give you two options. The first is to provide your phone number so they can text you a code that you send back. The other option is to enter your credit card information. If you are outside the U.S, the second option suits you best. After that you are verified and you can start integrating Facebook comments and mess around with apps. Congratulations! You are Facebook Verified! Now lets get things going!
The Design Strategy
Let’s get off Facebook so we can design the content that we want to display on the landing tab of the Fan Page.
A. Create Image
I use Photoshop or IndDesign for this and then edit my image with Picnik. Make sure the image has a call-to-action that tells your audience to do something otherwise, they won’t. Don’t forget the App is 760px but if you want to add your landing page to a tab then it is 520px. Try to create it a little bit smaller than 520 px to stay on the safe side.
The image that you just created needs to be hosted on the internet. If you have WordPress, the easiest way is to upload it to the “Media Library”. If you do not have WordPress then upload it to your server through the FTP. Then we just take the URL of the images. If you are novice, you can even host your images on Photobucket, then click the Share button and get the HTML and copy that.
C. Image Mapping
If you are not a programmer, then use Image-Map to add links on the image you created. For example, you can create an image that has all of your social media icons on them, then add the links by image mapping. Now that Image-map will generate a code for you. Save this code and move on to the next step.
Are you Code Ready?
Step 1: Use Text Editor
Take the code we just made and put it into your Text Editor, or use TextMate,
Step 2: Fix it up
Once you added your code to the text editor, it is time fix your code. We are missing the tags that open and close the code. In this case, Add the <html> and <body> at the top of your code and then </body> and </html> at the bottom.
Step 3: Save it!
Save the file and name it “index.html”. That’s right! We are going to save it as an HTML file, because when we use Facebook, we will be asked for a URL for the directory on your server. Facebook will not ask for the file, so by naming it “index.html” Facebook will add it to the directory and use it as the homepage of the website.
Step 4: Create a new folder in your FTP and name it whatever you would like. It is time to upload the “index.html” file inside the folder. Now back to your browser, and see if your file is displaying okay. I named my file “sme” so the URL will look like this: http://socialmediaeatery/sme/index.html. This is a tricky step so be careful J. We are almost there. Go back to Facebook now.
Now that we have already verified the account on Facebook, we need to configure the application.
1. Name your Application. Agree to the terms after you become verified and click on “Create App”.
2. After you named your application, it is time to configure it. In the “About” section fill in the basic description of your application.
3. As you are on the left side of the menu, move to the “Website Section”. Now add the URL that you got from you the file. Where you have “index.html” , delete this part because Facebook just wants the directory route. It needs to look like this: http://socialmediaeatery.com/sme/. Remember, we named our file “index.html” and we added it to the directory, so it will automatically be seen as the homepage.
Don’t save this section yet, now let’s move on to the “Facebook Integration”.
There are several things you need to do in this section:
· Name the App under “Canvas Page”. This is the application URL.
· Copy the directory route under the “Canvas URL”, but take off the “index.html”.
· The “Canvas Type” is the “iFrame”
· Then the “IFrame Size” is the “Auto-resize”.
Now scroll down to “Page Tabs” configuration.
· Name the Tab. Remember, this is the tab that will be on your Fan Page.
· “Page Tab Type” select “iFrame”
· “Tab URL” type “index.html” This is the name of the HTML file.
Eureka! Now it is time to hit the “Save Changes” button.
Installing the Application
Grab another cup of Joe, because we just created an actual application here! This is how iFrames are integrated into Facebook. We need to install this on our page now.
Step 1: Go to the Profile page for the Application
On the same menu on the right, click on “Application Profile Page”. Applications have their own profile pages similar to your personal profile on your page with the Wall function etc.
Step 2: Install the application on your Facebook Page
Install the app on your page by clicking “Add to My Page”, you can see the menu at the bottom left of the image above. Then you will be able to view all of your pages, so now select the page where you install the App.
Now our applications have been installed on our Facebook Page as a Tab and when you go to the Tabs Menu you will see it on the left side.
Step 3: Take a look at your Tab
The new landing tab is displayed inside the Tab. What do you think? How does it look? .
Say you want to add an additional page
Remember, the links you added to the image map are going to let you navigate within the same tab. This is why iFrames is like bringing a website within your Fan Page. Now to add an additional page, go back to the link you created within you Image If you want to map to point to an additional page, the we can use it now.
1. Get the HTML code
When you have the HTML code, copy it into the text editor. Remember the URL we want to get is the same URL we’re using in the link from the image map because this is the file that we are going to call with that link.
2. Hosting is your next step!
Upload the file to your server from you FTP. Save it in the same folder if you prefer. Don’t forget to test the URL in your browser to see if it is functioning.
Guess what? Now the additional tab should be working. This is similar to building a website within your tab. Here you can have several links and navigate through different pages without leaving the tab. How convenient is that?
The good thing about this is that we can build whatever we would like from iFrames. The solution is to start thinking about websites being built within your navigation.
· The blog works within the tab and you can navigate through it as if it were your website.
· In addition, you can retweet and the Twitter window will come out from inside the tab.
· iFrames let’s you think outside-of the box and create something new and usable for your business!
Was this helpful? Any questions? Please ask below J
Share on Facebook