Create Custom Facebook Application
Wall Script
Follow Me:
Tuesday, September 03, 2013

Create Custom Facebook Application

Facebook fan page is the most required thing for your brand or website to reach more people via social. Facebook Pages by default applications for Photos, Videos and Events, if you would like to add custom pages with other information like product Look Book, Offers, etc. This post explains you to how to create an application for Facebook Fan page, take a quick look at the following steps.

Create Custom Facebook Application


9lessons Fan Page     Live Demo

Step 1
Open the Facebook Developer page and create an application and click Create New App button.
Create Custom Facebook Application

Give valid application name.
Create Custom Facebook Application

Disable the Sandbox mode.
Create Custom Facebook Application

Step 2
Create a simple HTML page with the following dimensions. Take a look at this page.
body
{
width:730px;
height:680px;
}

Note: Facebook allows only https SSL urls, try to host your pages at Dropbox or Google Docs.

Step 3
Here give the HTML page urls one is http while the other one is https, and upload tab image with 111×74 pixels dimensions.
Create Custom Facebook Application

Step 4
Copy the application ID from the URL.
Create Custom Facebook Application

Step 5
Execute the following URL with your application ID.
https://www.facebook.com/dialog/pagetab?next=http://facebook.com&app_id=Your_Application_ID

Step 6
The above Facebook pagetab URL will prompt with following screen, here map the pagetab with your Fan Page.
Create Custom Facebook Application

Step 7
Final result HTML page inside Facebook
Create Custom Facebook Application

Step 8
You can change the application display position while clicking edit icon.
Create Custom Facebook Application
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


37 comments:

  1. Can it be an PHP or Javascript App?

    ReplyDelete
  2. yeah, you can include you'r php/js script in the page that you link forward( in step 3 )

    thanks for the tutorial, srinivas your awesome!

    ReplyDelete
  3. Nice one, but having troubles hosting the file at dropbox and Google drive. Facebook keeps displaying a connection error eventhough I got the link to the hosted file from both dropbox and G drive. I suspect they are not reading the file as HTML or what could have happened?

    I really need your help pls. Dont have SSL on my domain, wld av used that.

    ReplyDelete
  4. All process done very well but there are only blank page appear..!! whats wrong with me.. files are uploaded on google docs and sharing permissions are according to public that anyone can view .!! please resolve this problem..

    ReplyDelete
  5. Why set a width of 730px when it can be 810px?

    ReplyDelete
  6. Seu trabalho é excelente parabéns, saudações aqui do Brasil. : )

    ReplyDelete
  7. thanks for the great tutorial.Your websites design is very nice and it loads very fast.

    ReplyDelete
  8. nice post , keep going

    ReplyDelete
  9. Hello Srinivas,
    Thanks for sharing all good post liked it...

    can u please help us with detail configuration of stories in opengraph for game application

    ReplyDelete
  10. Great :) thank you for this Tutor..

    ReplyDelete
  11. thanks for this tutorial, but i'm recieving connection timed out error when loading the page following the last step

    ReplyDelete
  12. I've followed the steps but being shown a Dropbox error on Facebook. Anybody else had this problem?

    ReplyDelete
  13. For those of you getting an error in Facebook, make sure you use the public link of the .html in Dropbox but shorten the link before copying.

    ReplyDelete
  14. Does this mean that I really have to get an HTTPS to make an app? It's been a while since my last creation of app which allows me to make an app even with a ghost HTTPS link.

    Also how can i make google docs to host my files? I tried uploading a file in google drive and used its link as the Canvass URL and Secure Canvass URL but when I load my app page it's not working. Am I missing something? Hope to hear from you soon. Thanks!

    ReplyDelete
  15. I've done it and successfully uploaded a file via google drive. Unfortunately, the canvas page is still blank despite of following the instructions above. I hope you can help some of us who's experiencing the same problem. Thanks! :)

    ReplyDelete
  16. your outstanding work is appreciable

    ReplyDelete
  17. Hi, great tutorial. I have a question. Is it possible thath every user can set his own data in page tab? E.g. user x has favorite web site y, user a has favorite web site b. Probably I should use page tab edit url, but I dont know how? Thanks

    ReplyDelete
  18. Looking Great teacher
    Thank you sir.

    ReplyDelete
  19. How can I create a custom image to share on facebook containing user data/images in PHP. Although I can develop html for the same but could not convert it to Image.

    ReplyDelete
  20. Hello sir ..I have crerated a google drive hosted page..but after adding to facebook application.It doesnot appear.
    Please look at this google drive hosted web page :
    https://googledrive.com/host/0BwqnrSFwpRLWUWp4UnAxMmRHbGM/kiki.html

    ReplyDelete
  21. Hi Srinivas Useful tips for beginners. Cheers up :)

    ReplyDelete
  22. Hello sir ..I have crerated a google drive hosted page..but after adding to facebook application.It doesnot appear.
    Please look at this google drive hosted web page :
    https://drive.google.com/folderview?id=0B6Q9xUD8-M5FZ0FremRQWlhYM2M&usp=sharing

    ReplyDelete
  23. Am very much inspired with you sir .. Hats off to u !!!!

    ReplyDelete
  24. Thanks, I like it, it's useful and amazing

    ReplyDelete

Make in India