|
|
There are many reasons why it is a good idea to have a frontpage for your Facebook Fan Page. The main reason would be conversion rate. A Danish Facebook Analyst (Mikael Lemberg) states that Fan Pages where non-fans see the wall first have a conversion rate of 10-20% from their visitors. A Fan Page with a well-built frontpage asking people to click ‘Like’ have a conversion rate of 40%. You can also take it to the extreme and use “reveal layers”, where visitors have to click ‘Like’ to see the content of your Fan Page. This has a conversion rate of 90%. I strongly oppose to the last option for two reasons: 1) There are still millions of people who have no intention of getting a Facebook account, who will not be able to see the site. 2) The majority of Fan Pages that work this way are made by scammers trying to trick people. |
Settings for iWeb
|
Open iWeb and create a new site. Do not worry about titles of the site, they will not be seen.
|
In the left column, click the root of the website and choose “Publish to: Local Folder”
|
Using Page Inspector, change the layout width to 500px to match Facebook
|
Build your welcome page as you see fit. If I may give a recommendation, do not use too many or too big images as it will slow down the loading time of your welcome page considerably, and keep it simple so that users may quickly find what they want. To insert HTML into iWeb (ads or paypal scrips), click here to see how. Remember to press Publish Site at the bottom left!!!
Using Dropbox as a host
When you are done, the next step is to upload it to a host server. There are many ways to go about this. If you already own a website, you can create a subfolder where it is hosted. But if you are using free services like WordPress.com, Blogster.com or other, you can use a free Dropbox account for hosting your Facebook welcome site (if you use my link, we will both get an additional 250mb for free). When you open a Dropbox account you will be offered an application. It is important that you accept and install it. You will need it to upload your files, as the Dropbox web interface will not allow you to upload folders with content. When you have created a Dropbox account, downloaded and installed the offered application, go to your Dropbox folder and place the folder containing your website files in the Public subfolder. Confused? It should look like this:
Log on to your Dropbox web account on Dropbox.com and through the web interface locate the files you just placed in the Public folder and copy the path to the index.html file like so (see below) and save it for later.
Building a Facebook Application
Go to http://facebook.com/developers to create a new Facebook application. If you have not done this before, Facebook will ask for your permission to connect this to your account. Be sure to allow this.
In the following window, hit the “+Set Up New App” button in the upper right side.
Choose a name for your application. The name itself is not important as your fans will not be able to see this.
When you are setting up your application there are only two menus you need to edit: About and Facebook Integration. It is very important that you follow these 10 steps precisely.
|
About 2) Icon: Is the Icon your fans will see on the left side of your page below the icons of your wall, pictures, etc. Make it a good one, but consider it will only be 12 x 12px so do not use advanced graphics. 3) User Support Address: Is only important because Facebook wants you to fill this one out. You are building a private application, so the address has no practical use but one: If you choose a website address, you will have one more place where Google’s web-crawler will find your site address, which will improve your rating. 4) Contact Email: Is equally useless. I prefer to use an email address I set up for spam. |
|
|
Facebook Integration 6) Canvas URL: Is where you tell your application the location of your welcome page. Paste the url you copied earlier from your Dropbox account, but without the index.html at the end of the string. Make sure there is a backslash at the end of the url. 7) Canvas Type: Select iFrame. 8) Tab Name: Is what your fans will see together with your icon. Make it good and simple. I prefer Welcome. 9) Page Tab Type: Select iFrame. 10) Tab URL Type in index.html if you are using iWeb. It might differ if you are using another website editor for your welcome page. |
|
Remember to Save Changes!
Installing your application on your Fan Page
|
Go to your Applications site. Choose your newly built application and select Application Profile Page on the right. |
In the next window, select Add To My Page. |
A small pop-up window will appear in which you select your fan page. |
|
|
|
|
The final step is to choose where new visitors land when visiting your Fan Page. Go to your Fan Page and click on the Edit button on the top right.
In the next window, select Manage Permissions in the left sidebar and set the Default Landing Tap to be your new application.
That’s it. Remember that only new visitors will be directed to your welcome site. I hope your Fan Page and business will prosper from this. If you enjoyed reading this article for free, please consider pressing the yellow button in the middle column below. Thanks.
Do you like my Articles?You can see them all here: |
Did I help, inspire or amuse?Please consider buying me |
|
Jonas if you have Mobile me account can you use the public folder in that to our y the folder in?
Hi Bob
It should be possible but I’m not a 100% sure.
Are you aware of Apples plans to shut down the Mobile Me services including iDisk?
Dropbox is free and I don’t see them shutting down anything soon. It also loves your Mac ;-)
Hey man,
This tutorial looks great, i’ve made a front page for my facebook fan page and will try installing it to facebook in the next couple of days.
Changing the subject a little, i’ve been trying to install a facebook ‘like’ button on my website. After a long battle with facebooks inaccurate code generator I managed to get the ‘like’ button working when the website is viewed via local files. However once I upload to the host server the ‘like’ button disappears completely from my site. I have spoken to a couple of people in the business who recommended, replacing the ‘like’ button with a link to my facebook fan page as their well established ‘like’ buttons stopped working a while ago.
I notice however that your ‘recommend’ button (which I beleive is the same a ‘like’) still works. Do you know of a simple mistake I might be making or if not would you consider writing some tutorials for these ‘simpler’ subjects?
Cheers,
Adam
…without being rude, some advice for your own site; making my name into a link to my website is a great idea, however your losing people from your site as the link opens in the same window.
Constructive criticism is always appreciated. However I’m not sure what you mean.
Facebook made a change to the ‘like’ and ‘share’ script and thus rendering it useless for iWeb users. I’m keeping my eye on the internet for updates from either Facebook or Apple to change this or a viable third party solution.
Hi and thank you for this wonderful tutorial and for showing me the ways of Dropbox.
I’ve completed your tutorial once before with no problems but since the recent Facebook changes I’ve had no luck setting up a new frontpage.
I’ve followed every step in detail, is there some new changes that I may be missing out on?
I might be due to a Facebook safety policy feature. I’m planning to a to this post about it soon.
Not to change the subject, but the idea of using Dropbox as a website host is most excellent.
Your comment are much appreciated. Thanks.
I just found this article and it appears to be exactly what I am looking for. I only recently added a fan page to my Facebook account and have no idea what to do with it. Two questions before I attempt to follow your instructions. 1) I use GoDaddy to host my site…is it going to be a problem? 2) How do I attach a Facebook link to my IWeb blog site that directs people to my Fan Page and not my personal page? An Apple instructor during a One on One session setup the link on my blog site but it goes directly to my personal page. Now what?
Thank you!
Hi Jacquelon,
1) iWeb creates a very simple website with no complicated CMS or CSS system. The fact that you can run it from Dropbox says it all ;-)
What I’m getting at is, I have no experience with GoDaddy but that chance of failure is slim close to none.
2) If you follow my instructions above it should be pretty straight forward.
Really cool. Great explanation. Thanks for posting!
Thanks :)
I get this 404 error i’ve checked the way i’ve linked everything and its all correct
i’ve googled a bit and they say im supposed to have a ssl certificate
because it was at one point asking my to switch over to this https thing or whatever
HELP?!
Hi Remi,
I think you have run in to a secure browsing request.
I’m working on an update to this post… stay tuned
Best regard Jonas
Hey Jonas;=) I have followed you instruction to the point, stil i get 404 errors. u got som clues?
Best regards
Jeger
Hi Lars,
I think you might have the same problem as Remi above.
Best regards Jonas
Awesome – works great. After a little ‘massage’ of the url, works great.
Sweet… thanks
wow, that’s beautiful, thanks for sharing, but doesn’t it compatible with any system?
If by system you mean browser, then yes. If you mean OS, then also yes. But if you mean web-platforms such as Joomla or WordPress, I’m sorry to say no.
This would require Apache and/or MySql to be running from Dropbox. To my knowledge this is not possible.
I hope it made sense
I found this tutorial to be very helpful in getting our laboratory facebook page set up and plan on using Dropbox in the future through my work at the University of Pittsburgh. Thank you for introducing me to such a wonderful program.
Hi Katie,
Thanks hope you whip up something amazing.
Remember to invite people through the Dropbox referral program. This way both you and your colleagues will gain an extras 250Mb for every referral you make.
Jonas, this is great since I use iWeb and have been trying to use it for landing pages rather than others’ templates. What about now that Facebook is using iFrames? I couldn’t get past the security measures of FB. They said my phone number had been used before :( which it hasn’t for this purpose. Tried another number and the text didn’t come.
Isn’t there a way to just get the html code for the iWeb created page and place it into another app?
Hi Leslie,
Facebook seems to wamp up some security measures for better or worse. I think you can use another number as they seem to lock on number to one account without regards for people changing numbers. Otherwise try to get in contact with their support.
This tutorial is using iFrame so this should be usable for quite some time… hopefully.
iFrame seems to be the only way to go about putting pages in to Facebook at present time.
Thanks for your reply, Jonas. I have actually gotten it all worked out and have now done a few of these with iWeb! I wonder if you can help with this.. I want to create a “reveal” tab. I was able to create the welcome page and on it, added a link to the page with the application for the second tab. But when it is clicked it went to a Facebook logo that you then had to click thru to get to the second tab. As a workaround I just had the welcome page send the visitor to the outside website but I’d love to know how to do this and keep them in Facebook.
Hi!
I have tried the same thing and Dropbox is giving me the 404 error code… I have put in an HTML file with just Hello World in the body, but still… I’m otherwise having no problems with reading files from my public dropbox account! Any suggestions?
Sounds like you have not linked the right way to your index.html file.
Did you upload it to the Public folder in your Dropbox account?
hey jonas
yes, but when i tell it to look there after removing the index.html, it shows an image from dropbox saying that it cant locate the images…
Don’t remove your index file, copy the url from it.
The index file is what tells your browser which files do what when you visit a webpage.
Copy the url from it and paste in to you Facebook app.
hey so i tried to do this but the dropbox website wont link through to the iweb info stored.i put in all the info just like shown on this page, and im running 3.0.3. can you help?
I’m not quite sure what you mean, but it sounds like you have not uploaded the iWeb folder to the Public(dropbox) folder.
Only the Public folder in Dropbox will let you share files with non-dropbox users.
Remember to link to you index file