Last Winter I wrote a popular article on creating a custom Facebook page tab with iframes. Since Facebook seems to enjoy changing the interface and settings as soon as we get accustomed to them, they have slightly changed the page for creating a new Facebook application and there are some different fields to fill out.
Here I will provide updated instructions.
Updated Instructions
- Make a html, php or other type of web page and upload it to your web server. Instead of the code going directly into the Static FBML application the iframe application will be pulling the page you made to Facebook. This page will still need to fit within the Facebook size limit of 520px wide. I find it will work best if is 480px-500px wide.
- Go to the Facebook Developers site. Click on Apps in the top navigation bar. If this is your first time using it, you may need to create a new account.
-
Create a new app by clicking on the ‘Create New App’ button. Give the app a name and agree to the terms.
- Fill in the unreadable captcha. If you are like me, you probably have to refresh it a couple of times to get one you can actually read.
- After the app is created, you will be on the basic settings page for it. It should already have your email address filled in and provide you with an application ID and application secret ID.
- In the Basic Info section fill out the field called App Namespace. This can be almost anything with some restrictions. Filling out this field will allow you to edit the app from the list of applications on your page.
- Click on the section that says ‘App on Facebook’.
- Fill out the Canvas URL field. This is the URL to your uploaded page without the name of the page. For example, http://yourdomain.com/facebook/ .
- Starting October 1, 2011 you will need to fill out the Secure Canvas URL but for now you can leave it blank. I will be discussing this in an upcoming post.
- Go to the section at the bottom of the page called ‘Page Tab’.
- Page Tab Name – is what you want the tab to be called. I am calling this one Article Demo.
- Page Tab URL – this is the full URL to the page you created. For example, http://yourdomain.com/facebook/demo.html
- Again, starting October 1, 2011 you will need a secure Page Tab URL.
- On the left under Settings > Advanced are the Canvas Settings, which determine the width and height of the page. You should be fine with the defaults.
- Save Changes
- Steps 17 and 18 are no longer valid. Please see this article on how to add your application to your Facebook page.
- On the left side of the page in the Related Links section, click on View App Profile page.
- On the application profile page, click on the link on the left that says Add to My Page. If you administer more than one Facebook page, select the correct page from the pop-up box.
- Go to your Facebook page and click on the Edit Page button on the top right.
- Select Apps in the links on the left side of the page. Locate the app that you just created. Click on Edit Settings and add the tab to your page. Selecting Edit Settings a second time will allow you to rename the tab.
- Remember that the Facebook page is pulling in content that you uploaded to your server via an iframe. If you want to change the content on the page, you will need to edit the file you created and re-upload it to your server.
- You may also get warning messages about secure browsing beginning October 1st. As I mentioned, I will be discussing how to handle this in an upcoming article.
photo credit: gregcutler
Thanks for given these all instructions.
I like point #20 which is related to the server it’s good from my point of view because we can do some other work in server if some work will be in pending in server.
You’re welcome. I just wish that Facebook would stop changing things so frequently.
Facebook does seem to enjoy changing the rules. Thanks for this – saved.
Hi Vered – It’s almost a full time job keeping up with Facebook changes. Honestly, I’m getting a little tired of trying ;-)
It’s too bad that Facebook has pressured everyone to switch to httpS.
Now app pages that aren’t hosted with SSL certifications don’t render. The user has to click “Disable secure browsing?” before the tab will show. And what average person wants to disable “security”?
I can understand why from a security point of view but it’s going to create a mess of problems come October 1st.
Thanks so much, Kim. Your first tutorial was massively helpful, and now when I was trying to make a second custom tab and getting stuck (because they changed the settings) – when I tried searching for a solution I found this again. Thanks!
Great! I’m really glad it helped.
Kim, I love you! Simple as pie. (Interesting expression …) It worked!
Thanks Anne – I’m glad it helped!
thanks Kim…this is going into my “save” file ;)
Not sure why Facebook continues to keep challenging those that support the site by changing things all the time.
Tutorials like this help all of us over these humps…by explaining in simple terms what can otherwise be confusing…
so thanks again.
Kathy
Hi Kathy – Thanks! I’m glad it helped. I wish Facebook would stop changing things – I can understand if they need more fields or data but there is no need to change the interface.
Wow…I actually got that to work with no glitches or bumps in one try! Thanks for your very clear instructions. Super helpful! :D
Hi Julie – Great! I’m so glad the article helped.
Kim,
Thanks so much for the tutorial, it’s super helpful, but I am stuck!!!
How do I locate the canvas url if I am creating a new app for my existing page? Also is the Page Tag URL the URL when you click on the page??Sorry I am not good with developing!
Thanks so much!
April
Hi April – You have to make an html or other web page and upload it to your own web server. For example, my facebook pages are stored on my server at kimwoodbridge.com. The canvas URL is then the location of that so mine would be something like kimwoodbridge.com/facebook
The page tab url is the same server location listed above and also includes the name of the html page you created so in my example it would be kimwoodbridge.com/facebook/name_of_page.html
I am baffled why I can’t get this to work-it’s my first time but your instructions seem so easy. I am trying to set up a dummy tab just to get it to work. I followed your steps but I don’t see a new tab. I also noticed on my app page an error… why? I don’t know. Any insight will be appreciated. You can see that I get an error here:
http://www.facebook.com/apps/application.php?id=162666480484372
my hosting co. is goDaddy.
Canvas URL = http://www.richardrazo.com/fb/
Page Tab URL = http://www.richardrazo.com/fb/iwb.html
Thanks.
Hi Richard – I am not setting the error and when I test loading the page everything works fine. What error are you getting? Are you logged into Facebook securely and what web browser are you using?
Hi Kim,
Thanks for helping.
I am using Google Chrome and FireFox 6. I am logged in securely.
The error I get on my app page = http://apps.facebook.com/integrated-web-biz/ is this:
Not Found
The requested URL /fb/ was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
———————————————————
Apache Server at http://www.richardrazo.com Port 80
I think I figured it out..
I think the mistake was that I can’t have a sub directory in the URL for the Website >> Site URL field.
thanks.
I don’t see why, as Richard has used one, too.
On the other hand, I don’t get my app working. I get the following error message:
Method Not Allowed
The requested method POST is not allowed for the URL /fb_tabs/fb_welcome_tab.html.
Yeah… I know… that’s why I’m still confused on the subject. I figured the folder may have some permissions set from my hosting company (goDaddy) that I will need to call and figure out if this is an issue on that end. Nevertheless, I guess you can try to do what I did as a workaround. Again, this is my first time doing this… so I don’t know of any downside of the variation I did.
Permissions on the folder could definitely make a difference.
Try saving your html page as a php page – that will usually correct that error.
I don’t see why not, as Kim is using a subdirectory in his examples.
On the other hand, I don’t get my app working either. The error message I see when the new tab is clicked is
Method Not Allowed
The requested method POST is not allowed for the URL /fb_tabs/fb_welcome_tab.html.
On the app page itself I see the homepage of the company, not the page prepared for facebook. The links *are* correct I copied them from the browser address bar…
Any idea anyone? – Thanks.
I found a solution for my problem elsewhere on the net. The error message vanished and the right page was shown after I had renamed the .html page to .php
(Moving the .html page to the root didn’t help at all in my case.)
Hi Richard – Is it working now? This is odd because I have a subdirectory in my URL and when I tested your page, I didn’t get any errors. I didn’t, however, test it in Chrome but it seems like I would have gotten the same error in Firefox.
Hi Kim,
Yeah,
I did get it to work (http://www.facebook.com/razo.web.and.graphic.design) with the altered method I noted on Sep 18th above. I got slammed with work and haven’t been able to try to get it to work exactly as you wrote about… but I plan to. If I find anything interesting out I’ll post here.
Thanks for your help.
Regards,
Richard
On Step 17 you have “Add to My Page” as the option to click. I do not have that option. I’m showing “Add to My Page’s Favorites”. When I do that it shows up under my Likes section rather than in the menu under Wall.
Never mind, there was no profile attached to the page. Once I create a profile the option came up.
Hi Jas – I’m glad you got it working.
I have the same problem. How did you attach a profile to the app page?
Take a look at this article – http://www.kimwoodbridge.com/how-to-add-your-custom-facebook-application-to-your-page-now-that-the-view-app-profile-page-link-is-gone/
Oh, forgot to say: thanks for this great tutorial. It saved me tons of time. And with the hint to rename the page to .php it would have taken less than 15 minutes to complete.
Looking forward to the “Secure Canvas URL” part…
Hi – I see that you found the solution before I answered the other comment – I’m glad you got it working.
Thank you for the tutorial – it’s helped me a great deal. I’m confused however because i’m creating a personal tab for a business client. Am I right in saying this method effectively saves the page as an fb App that other users can see and even install on their own page and request modifications to?
Thanks for your help.
Nick
Yes, technically anyone could add it to their own page but I can’t imagine why anyone would want someone else’s business info on their own page. Also, it isn’t added to the app directory by default so if someone didn’t know the link to it, they wouldn’t be able to find it.
Thanks for your response. I was a little worried as the app came up in my Facebook search for this business. But thankfully it doesn’t come up on my partner’s!
Hi, thanks for tutorial.
I’m creating company page, but on step 17 you have “Add to My Page” as the option to click. I do not have that option. Mine is showing “Add to My Page’s Favorites”.
as Jas (few comments earlier) said after creating profile the option comes up, but I’m having business page which does not allow me to have profile.
any idea?
A business page can’t have a custom tab added to it. You want to have a custom page associated with a personal profile.
Hi Kim, I’m not sure you’re right on this one. Actually, I have added a custom tab to a business page using your tutorial.
Fernando is right and not right at the same time. What you need to do (and what I did) is the following: Log in to Facebook with a personal account, go to to the company’s page and “Like” it. Log off. Log into the company account. Click on the “They like us” or whatever it’s called on the left. Find your profile in the popup and click on “Add as administrator”. Log out again. Log into your personal account. Now, when you click on “Account” in the top right you will find an entry called “Use Facebook as a page”. Click on it and a popup will open. Klick on “Switch” and you are using your persdonal profile in the name of the company. Now you can go the devlopers page and end Kim’s tutorial.
Of cours, to me it seems a better way to create a personal profile just for use with the company, so as not to mix personal and business affairs too much. ;-)
Of course, there are other ways than the “Liking” procedure but this seemed the easiest way to me. And also, you can unlike the company page after you have admitted yourself as page administrator.
Ahh … ok, I didn’t know you could do that. Seems a little convoluted but if it works, it’s a solution :-)
Awesome. I was creating an Iframe app so I could import google calendar into a clients page. All the steps you gave worked just fine, but when I viewed the custom page tab all I see is this error and not the google calendar “405 – Method Not Allowed”
The html file I created works just fine. but for some odd reason, not working on my custom tab. go any ideas?
Hi Heather – I tried to do that recently and ran into the same issue. I haven’t verified this but I think that we can’t have an iframe within an iframe. There is a complicated workaround here
http://grsml.wordpress.com/2010/04/12/embed-a-google-form-on-a-facebook-fan-page/
Thanks a ton Kim. I will have to work on this all week and probably the rest of my life if they keep changing stuff. haha ^_^
I know! And the developers conference is today and they are making some huge announcement …
How to use an SSL Shell (PHP or HTML) to validate non-secure Facebook iFrame Apps – http://ow.ly/6A039
Kathy,
Thanks for the wonderful tutorial. Sounds like I have a basic problem but i’m stumped.
I can view the basic app sample I made just fine when i click Go To App, in the apps profile. When I added it to my page, the app shows up just fine in left hand navigation (i can even edit the name fine in the apps section if I want) but when you click on the link to view the app on the page, nothing shows up. The middle section where the app should be is blank on the page.
Any reason why it would show up just fine on the App Profile when clicking Go To App but won’t show up once its installed on an actual page.
Thanks in advance
Hi Chad – Is your app a custom page? Can you view the page outside of Facebook? Have you checked the permissions of the directories? And if it’s a html page have you tried saving it as a .php one – sometimes that solves the problem.
Thanks for the quick response Kathy.
Yes, you can view the app outside of facebook. Since I’m just testing the waters, it’s only a series of div’s colored. You can view it here: http://inklingsolutions.com/easyfbapp/
It is and html page. I’ll try creating it as .php file.
Here’s the FB app page: http://apps.facebook.com/personalsavers/ which shows everything correctly
I’m trying to use the app as a Page Tab. Is that what you mean by a custom page?
Thank inadvance
Kathy,
Also, here’s the page where I have the app installed http://www.facebook.com/personalsavers It’s listed as Welcome in the navigation.
Not sure if that helps trackdown my bugs :o)
I also tried saving the index file as a .php file but no luck on pulling it up on the page the app was installed on.
A side note, when i updated the file to a .php it was still viewable on the App Profile.
Hi Chad, I can see the orange and black divs on the Welcome tab. I did, however, get a warning about secure browsing first so you may want to take a look at the article I posted today.
http://www.kimwoodbridge.com/facebook-apps-will-require-a-ssl-certificate-starting-october-1-2011/
What web browser are you using? I tested in Firefox.
Kim,
I guess it’s working. When I view the apps on Personal Savers using Facebook as Personal Savers, the app shows a blank page but, if I view Personal Savers as Chad, then it’s there. I had a friend look at the apps pages on Personal Savers and they could also view it.
Any reason for the blank page when viewing the apps on Personal Savers when using facebook as Personal Savers?
Also, I read your article on the SSL. I already set a second test page up as a secure url and i’m good with that.
I tried viewing it in Chrome, IE9, Firefox & Safari. All apps work as long as I wasn’t using Facebook as Personal Savers, viewing app pages on Personal Savers.
Hi Chad – I think you discovered a possible issue. When I Use Facebook as a page, I can’t see my custom tab either! But, if I go to a different page (while still using FB as a page) I can see it. The two that I tested – mine and another one are both ones that I made and set up the same way. I did a quick search but didn’t locate any info about this – so, I’m not sure if it’s a bug or by design.
Is it really necessary to include steps 7 – 9? Or will it suffice to fill in the information required for the “Page Tab” section?
The reason I’m asking is that Social Server will only give you a secure link to your page tab URL but not to the canvas URL. Therefore, I removed the “App on Facebook” section from the app page and it still seems to work.
Just wondering…
Hi Rainer – You can use the link provided by Social Server in both fields – I will update the post to say that because you are the 2nd person who has asked. If your app is working without the Canvas URL, then I guess you don’t need it. I do, however, need to look into this so I can provide an better answer to why not.
Wow, great. Your first tutorial was massively helpful, and now when I was trying to make a second custom tab and getting stuck (because they changed the settings) – when I tried searching for a solution I found this again. Thanks!
Hi, Kim
I am trying to fix my custom iFrame tab to comply with the recent SSL requirement. I was thinking all I had to do was to go back to Facebook Developers and add the Secure Canvas URL (same as the non-secure Canvas URL but just add the letter “s” to the “http:”). I also added the page name (not the full URL) to Secure Page Tab URL just like I did with Page Tab URL.
So, I did this and I still cannot see my iFrame tab. I am logged into FB securely (I see “https” in the URL when I am logged into FB).
Am I missing something?
Thanks in advance,
Cheryl
Hi Cheryl – Do you have SSL on the server where you are hosting the page? You can also try putting in the full url rather than just the page name on the Secure Page tab field and see if that makes a difference.
Thank you so much for the updated information. After struggling with out of date instructions on other sites, you saved the day and we now have a new (still very basic) Welcome page for our Dream School Commons “fan page”. You rock!
THANK YOU.
I’ve just almost given up!
Spent a week trying to figure out how to add tabs.
I added a tab before the updates on the systems, and could not figure how to do it now.
Your article was very easy to follow and I’m now the proud owner of a new custom tab :)
Great! I’m glad the instructions helped.
hey Bud got a question for you. Is there a way to have the landing page (Iframe App) be the only page visible to fans and non fans no matter if they have liked or not?
What i get is the Landing page showing up with new people coming to the site. when they click “like” the landing page is still there. but if they come pack to my page they are now on my wall. I am wanting to do away with the wall.
Any suggestions. I have tried editing my html code, iframe a million and one ways.
Hi JT – No – once someone likes a page they are automatically taken to the Wall. The default landing tab can only be set for new visitors – this is something that Facebook has set and there isn’t a way around it.
Thanks Kim. Good to know the limations.
do you know what would happen if i deleted my wall alltogether. would it go to my landing page or someplace else?
can we even still delete are wall if we want?
Hi JT – You can’t remove the Wall.
I get a “405 – HTTP verb used to access this page is not allowed.” Any idea what that’s about? :(
Carmel,
I don’t know the reason for the 405 error but if you change you html to aspx and link the iframe app to that file it will work perfectly. there is no change in the html coding. just save as in what ever editor basing you are using and should fix that. i’ve had to do it to 2 of mine and one for my client.
Hi JT,
Thanks for the response but unfortunately it didn’t work. :( Still getting the error. Maybe it has something to do with the jquery I’m using?
Hi Carmen – Did JT’s response help?
I think I misunderstood something along the way because I am getting this error once I choose the tab where the app is:
App Temporarily Unavailable
Parse errors:FBML Error (line 10): illegal tag “body” under “fb:tab-position”
I understood that it was loading an entire HTML page which would include the body tag. Is this wrong?
Nevermind I found it. Under Advanced, Migrations… make sure “iframe Page Tab:” is Enabled.
Hi – Glad you got it worked out!
Hi, I’m getting flummoxed between tutorials here, help! I was following instructions on how to use GoogleSites to create Facebook web pages, but none of it matched. Now I’m following yours but cant see how to add my GoogleSite pages into Facebook. Can you help me? Steve
Hi Steve – I haven’t done this with a page from a google site so I don’t have the instructions. Sorry about that.
You rock; thank you!
You’re welcome!
Hi, first of all, thank you for the tutorial, thanks to you I’ve managed to integrate my app into a facebook page (to certain degree). But I’m still having trouble getting the app to display where I want it. I’ve created facebook app using heroku, the url looks like https://something-something-1111.herokuapp.com. Right now it contains the default heroku test page, but it works. I can easily edit that page later.
Thanks to your tutorial I’ve been able to add it to my facebook page. Now my page has an extra tab, I named it Welcome. But when I click it, it’s empty.
When I edit my page and click Apps my app IS there, if I click ‘go to app’ it will take me to the page. But by default it doesn’t appear in the tab where it’s supposed to, (in fact I think there is no way for regular visitors to even see the app) and I can’t find any setting that would make it do so.
What I want to do is simple. When the user comes to Coca Cola’s facebook page, http://www.facebook.com/cocacola, a tab called ‘Home’ is displayed by default and its content is completely custom. I’d like to do basically the same thing. Any ideas about how I could do it?
never mind, I made a stupid mistake. I put the “https” in the non-secure fields as well. So don’t do that :D
Hi – Glad you sorted it out. It’s usually something like that that is causing the problem but our hair can turn gray while trying to figure it out.
So facebook has just informed me that they’re switching company pages to timeline, and that all pages will be automatically switched on March 30th.
I was making a custom page for my company, a “landing page”, so that people would see something nice instead of just the wall when they first visit the page. It was designed to be about 500 pixels wide, so it would fit nicely in the narrow space in the center of the facebook page.
What am I supposed to do now? When people visit the page, they’ll see the timeline. I admit, the timeline looks nice, but what am I gonna do with my custom page? Users can still access it, (and there’s a big icon for that) but what’s the point of a welcome page now?
That’s a really good question. The only way to draw attention to them is to make a wall post about it and pin that post to the wall. The post can also be highlighted.