Create custom tabs on your Facebook page with iframes

Creating custom tabs isn't as straightforward as it used to be. I show you how to set up apps to use as page tabs and in the more advanced part of the tutorial, I show how to use php to display different things on the tab based on whether the user has liked the page or not.

Apologies for the low resolution. I've put the code up here http://www.pastie.org/2173305 so you can see better.

UPDATE: There is now a base_facebook.php file in the github project that also needs to be included in the directory with your other php files.

Category:

Science & Technology

Tags:

• facebook
• tabs
• php
• html
• apps
• development

[KieschDoesTV]

@TJ040190 thanks for the comment. i'm working on rebuilding my site and then will concentrate on making a lot more videos once the site launches. i've actually been thinking about doing a beginner series on learning html/css from scratch, so keep watch for some new videos soon that may be right up your alley.

[iDrownKittns]

This looks nothing like the Admin section I have up.

Also, is it possible to put Big Cartel in an frame?

Im struggling big time.

[KieschDoesTV]

@iDrownKittns yes, the administration area has completely changed. i will be posting an update video soon.

[mviikkii]

Hi, thanks for your Video, I tried it step by step but at the end when I go test the Facebook app page it gives me the error: "501 Not Implemented

We are sorry to be unable to perform the method POST at this time or to this document.". No meter what I do it gives me that same error. Can you tell me what I do wrong?

thanks

[KieschDoesTV]

@mviikkii can you send me a link to what you have? i'll be glad to take a quick look and see

[baillie90]

I'm new to this. I used fbml and have a menu bar across top of pg like a mini website. Can I do this in iframe or do my tabs have to be on side? The page is Healthy Habitats Texas. I tried static html, but pasting my original code didn't work. You can see that app on the side, too. Thanks for your help.

[KieschDoesTV]

@baillie90 one thing nice about running it in iframes is that you can put whatever html/javascript/css you want inside of the iframe. within the facebook interface though, they've removed the tabs on the top. you can create multiple apps (each one per page) but it will only add the links to the left side.

[TJ040190]

@KieschDoesTV Thanks a lot I will stay tuned

[pctechsupporthelp1]

Great job man I just followed along and even with all the things that have changed on Facebook since this video.... I still got it to work!!! HUGE THANKS TO YOU MAN!!!!!!! You Rock!!!

[elipicardie]

Hi, i manage a pirate radio station who's been online already 15 years, but as a pirate radio station we dont make money and are always looking for music lovers in general and specially those who can or might want to help us out ;) a year ago i used fbml to spice up our radio stations fb page but now it seems that iframes are the norm? i tried to understand your video here but i dont ;/ Would you be so kind to help me out so i can add a button on our page that opens an iframe our chat room ?

[thatch]

Facebook have recently fundamentally changed their page/app admin pages rendering this guide (unfortunately) useless. What used to be easy: 'Adding a facebook app to a page' — that feature is now only doable by invoking the FB. API via javascript or hitting the url directly...

This is great for wildfire other 3rd party apps that you pay to do the job for you, but for your average content creators, it's a right pain in the arse. Thanks facebook :(

[DustinSmith08]

Awesome tutorial!

You did a great job of walking through some basic, but useful code, and explaining how it works.

Thank you

[KayakingEll]

@KieschDoesTV please can you make the fan page do what the red bull one does please as I'm unsure as how to do that thanks this tutorial has helped me out so much can wait for the updated version

[Vanderloo5]

Thanks for sharing this. However as another person mentioned FB is constantly changing their developer pages and mine is a bit different than the one illustrated here and I've spent about 5 hours now trying to get my landing page to work and I'm not having any luck. I've tried several combos with no luck. wish I could attach a screen shot as I know this is an obvious issue.

Thanks

[curiositycreative]

Thank you very much. You are a good person for helping us out.

[taylanyalniz]

@KieschDoesTV, Hi, love the tutorial... but since facebook changes their developers pages every so often the backend seems to be different.. when do you think we will be able to learn how to add TABs using the new fb interface? really appreciate your video tutorials...

Thank you,