How To Create Custom Tab Apps For New Facebook Timeline Page


Just couple of days back Facebook has rolled out Timeline for Facebook pages. No doubt timeline for facebook page is awesome and sure it make facebook page more creative than befor. But It has completely changed the landing page for facebook. So here I am sharing a tutorial about how to create a custom tab for new Timeline facebook pages.

If you are thinking to create a default landing pages for you timeline enabled Facebook fan page you must need to create custom tab application first. Only after adding custom tab on your page you could design an awesome landing page for your fan page.
Facebook custom tab is the ability for your app to be used within the context of a Facebook page. You can view the great example of facebook default landing tab.
How to Create Facebook Tab Apps

Step#1. Visit this page<Link> and click the +Create New App Button. Like this Button below..

Step#2. Set the Valid App Name and App Namespace and Click on Continue button.

Now you have successfully created Facebook Tab Apps.
Configure Tab App Setting for Fan Page

Step#1. Here you can configure you app setting like as you can Change your app icon, Choose category and put your domain name. Check the picture below.

Step#2. Expand the Page Tab option now it will looks like this.

Step#3. Fill the following detail in require field on Page Tab Option.

Page Tab Name
Your Page Name
Page Tab URL
http://YOURAPPLICATIONID.iframehost.com/tab/
Secure Page Tab URL
https:// YOURAPPLICATIONID.iframehost.com/tab/
Page Tab Edit URL
http:// YOURAPPLICATIONID.iframehost.com/YourPageName

Step#4. Click the Save Changes button. Cheers!! You have just created a tab successfully. Now follow these Steps given below..
Add Custom Tab App to your Facebook Fan Page

Step#1. Copy your API Key( APP ID) and App Secret code and save it.

Step#2.  Put here your App ID and Your URL. You can find this in your app settings.
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Step#4.  Now click on Add Page Tab button to add this Tab to your any pages. Check this picture below.

Step#5.  Click on “Add To page” button  to the page where you want this custom Tab.
Check You Facebook Custom Tab Page

Step#1. Go to your page and you will found a new tab that you have just created.  Click on it.

Step#2. This brings up the Setup New App Dialog: Put Your API Key( App ID) and App Secret here and last click on save setting Button.
Cheers! You have done all the steps now you are ready to design your own default landing page for your Facebook fan page.
Design Your Landing Page.

This is the last thing about Custom Tab apps for your Facebook page.  By clicking on your own tab you will see a awesome Editor for design your landing page. But Facebook has just some days back rolled out Facebook Timeline for Facebook pages. So now there would be something change.  Check out my next post Where  I have posted about Custom landing tab in Facebook Timeline pages.

facebook, Facebook apps

Chiranjeev-Profile-PhotoAbout the Author

I'm Chiranjeev, the founder of letmeclear.com I'm a freelance writer on topics related to Blogging, About blogger and making money online. I'm blogging since 2010 and I'm currently running 3 or more blog.
Meet me on Google+ or, Twitter or on Facebook

15 comments:

  1. Still did not get it. You say:
    Step#1. Visit this page and click.....

    -----
    Visit what page????? There is no edit app anywhere on my facebook page!

    ReplyDelete
    Replies
    1. Sorry Link was not works well now you can try.

      Delete
  2. Hi Chriranjeev,

    Its a nice tutorial youve got here.

    One question thouge, lets say that I have a business page and want a "career" page. What do I need to do so it will be shown in my favorites list for my visitors?

    ReplyDelete
  3. what are the specifics about creating a tab image? The tab image that I have doesn't fill the entire rectangle on the Timeline page.

    ReplyDelete
  4. Hi, One question; what are the limitations for the custom tab? so i can add flash, video, javascript?

    ReplyDelete
  5. Finally, create an app instructions that tell the user EVERYTHING instead of just enough to get people to BUY or USE whatever they want Users to add to their pages. BRAVO!!!!

    The app created inside FB is just the framework that allows your app to run inside FB. The app itself is just an iframe that you create and host on your own SSL servers. The URL added to FB in the settings is the iframe you create outside of FB which can be anything you want - flash, video, javascript, whatever...

    Here's the crazy looking App I made just for fun. https://apps.facebook.com/loveclawlovers
    That's just an iframe coming from this page on my website: https://ogapp.com You can make turn almost anything into in iframe that runs inside Facebook.

    Here's another one: https://ogapp.com/ogappcreator/index.php?id=2 That's the same as: https://apps.facebook.com/couponsandmore which is the namespace you choose when you create your App on Facebook. Most tutorials tell you to just SKIP the Namespace because they have some hidden agenda - these guys DON'T so just keep trying and you'll get it.

    BTW - I'm NOT selling anything and there are NO ads or affiliate links attached anywhere.

    ReplyDelete
  6. This site is really amazing and inspirational to me, i am impressed with this awesome site.

    ReplyDelete
  7. visit what page link numbnutts.. fucking bad tutorials!!!!

    ReplyDelete
  8. So i'm trying to follow your directions, to make a thumbnail link app to a page i created on my facebook profile.
    all i need is an image that links to a url. why does this have to be so damn painful?
    I've entered my appid.framehost.etc/"the page i created on my profile"
    and i get an error when trying to load the Add Page Tab dialog: "API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application."

    Can you help?

    ReplyDelete
  9. WORST. TUTORIAL. EVER. Go here instead:

    hyperarts.com/blog/tutorial-add-an-iframe-application-to-your-facebook-fan-page-fall-2012/

    ReplyDelete
  10. Your tutorial is nice, I have written a simple tutorial here http://www.webmarketingboard.com/how-to-create-apps-for-facebook-pages/

    ReplyDelete
  11. Thank you this is a great post! It is a great that you can customize the new Facebook pages and profiles through code manipulations and widgets. I think this is what Facebook is trying to do to its users, give them freedom of customization on their pages while maintaining the neatness that Facebook is known for.

    ReplyDelete
  12. Every time I try to go to the Developer App page (https://developers.facebook.com/apps), it brings me back to my Facebook page instead. Any idea what is causing that to happen? I am trying to add the Developer App to create an app as a page tab on my FB page.

    ReplyDelete
  13. Did you find the answer to this??? I am having the same issue.

    ReplyDelete
  14. Hi Chriranjeev,

    How to make my own apps in facebook account

    ReplyDelete