2 Simple Hacks to Create an iFrame on a Facebook Fan Page tab

Amplify’d from jesperastrom.com

2 Simple Hacks to Create an iFrame on a Facebook Fan Page tab

I have published an update to this as the old iFrame solution does not work – Facebook Applications for dummies

I found this neat little script today that I amended a bit. Not a lot, but just a bit to suit my purposes. As we all know, Facebook doesn’t allow you to put an iFrame on a Facebook Fan Page tab. I decided that I wasn’t going to follow this rule as it didn’t fit either mine or my fan page users needs. Thus I Googled for a while and found the neat code snippet enclosed in the document you can download from here:

Download: iFrame Code for Facebook Fan Page Tab

There are two small changes you need to do to make the script work miracles for you and your Fan page. Well, you’ll need to read this on how to create an FBML-box to your Facebook Fan page, or this to know how to set up a Facebook Fan page first. But then you can move on to downloading the .rtf file above and read what I’ve written below.

1. Your Tab loader image

As Facebook doesn’t allow you to run JavaScript directly on a Facebook tab, you’ll have to create a loader image. The loader image can be of any size within the limitations of the with of the tab. Experiment and you’ll get the point.

<img src=’[Enter a url to an image here]‘ />

Exchange the [Enter a url to an image here] with the full image URL you want to put as the loader image.

2. The dimensions and source of the iFrame content

Secondly you’ll need to change the dimensions of the iframe to suit your needs. Change the following atributes of the following code snippet from the downloaded file.

<fb:iframe width=”[With of iFrame]” height=”[Height of iFrame]” style=’margin-top: -50px; margin-left: -40px; margin-bottom: -40px; margin-right: -50px;’ frameborder=’0′ src=’[Enter the source of the iFrame here]‘ scrolling=’no’ />

[With of iFrame] – exchange with a with in pixels such as 650px

[Height of iFrame] – exchange with a hight in pixels such as 500px

margin-x - I just wrote that out there, but you can change all its values or put them to zero. Basically this is added so that you can hide parts of a page you don’t want to include in your visible iFrame

[Enter the source of the iFrame here] - any source you’d like to add

That’s it!! You might fail a couple of times and remember not to remove any of the ‘ or the ” but remove all the [ ] square brackets. There should be no square brackets in the finished code. I have just put it there so that you will get confused . Read more at jesperastrom.com

 

See this Amp at http://bit.ly/hpxkhW