Create Custom Facebook Application
Wall Script
Wall Script
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
web notification

37 comments:

  1. AnonymousSeptember 3, 2013 at 8:04 PM

    Can it be an PHP or Javascript App?

    ReplyDelete
  2. SakshamSeptember 4, 2013 at 12:10 AM

    wow that was great

    ReplyDelete
  3. kingsly ashishSeptember 4, 2013 at 1:28 AM

    thank you , for the tutorials.

    ReplyDelete
  4. soumyajitSeptember 4, 2013 at 2:57 AM

    thank you.

    ReplyDelete
  5. AnonymousSeptember 4, 2013 at 8:49 AM

    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
  6. BalajiSeptember 4, 2013 at 2:19 PM

    Thank you Srinivas....

    ReplyDelete
  7. Tim AikinsSeptember 4, 2013 at 5:38 PM

    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
  8. UnknownSeptember 5, 2013 at 10:43 AM

    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
  9. blogger themeSeptember 6, 2013 at 12:45 PM

    thank you for this toturial.

    ReplyDelete
  10. AntonSeptember 7, 2013 at 6:56 AM

    Great!

    ReplyDelete
  11. AnonymousSeptember 11, 2013 at 4:22 PM

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

    ReplyDelete
  12. UnknownSeptember 16, 2013 at 6:36 PM

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

    ReplyDelete
  13. RahulSeptember 22, 2013 at 8:15 AM

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

    ReplyDelete
  14. UnknownSeptember 29, 2013 at 6:26 AM

    thanks for the geat tutorial

    ReplyDelete
  15. AnonymousOctober 1, 2013 at 8:31 AM

    nice post , keep going

    ReplyDelete
  16. YuviOctober 2, 2013 at 12:52 PM

    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
  17. devtools.korzh.comOctober 3, 2013 at 4:39 AM

    good post, thanks!

    ReplyDelete
  18. GuruOctober 6, 2013 at 4:37 AM

    Great :) thank you for this Tutor..

    ReplyDelete
  19. Rishabh DevOctober 6, 2013 at 9:44 PM

    Great tutorial! Thanks.

    ReplyDelete
  20. ibfunkOctober 10, 2013 at 7:54 PM

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

    ReplyDelete
  21. AnonymousOctober 22, 2013 at 10:37 AM

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

    ReplyDelete
  22. Martin LindopOctober 22, 2013 at 11:49 AM

    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
  23. AnonymousOctober 23, 2013 at 2:08 AM

    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
  24. AnonymousOctober 23, 2013 at 2:40 AM

    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
  25. AnonymousNovember 13, 2013 at 6:18 AM

    your outstanding work is appreciable

    ReplyDelete
  26. AnonymousNovember 20, 2013 at 4:55 AM

    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
  27. ShajanDecember 11, 2013 at 3:28 AM

    Awesome !

    ReplyDelete
  28. EvansDecember 23, 2013 at 4:43 AM

    thank you . ... .

    ReplyDelete
  29. Sahil FzDecember 26, 2013 at 7:10 PM

    Looking Great teacher
    Thank you sir.

    ReplyDelete
  30. UnknownJanuary 31, 2014 at 5:48 AM

    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
  31. Editorial PanelFebruary 2, 2014 at 7:25 AM

    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
  32. Wandering SoulFebruary 10, 2014 at 7:24 PM

    Hi Srinivas Useful tips for beginners. Cheers up :)

    ReplyDelete
  33. JavaMarch 31, 2014 at 7:37 AM

    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
  34. مدونة حاسوبيApril 16, 2014 at 11:19 AM

    thank's

    ReplyDelete
  35. AnonymousJune 27, 2014 at 9:24 AM

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

    ReplyDelete
  36. Naveed AlamFebruary 1, 2015 at 4:42 PM

    Thanks, I like it, it's useful and amazing

    ReplyDelete
  37. testMarch 27, 2017 at 8:15 AM

    Hello
    How to create Facebook New Application using PHP ?

    ReplyDelete

Most Popular Posts

mailxengine Youtueb channel
Facebook and Google Login
Make in India
X