How to Develop & Test Facebook Connect Application Locally

facebookMost of the time people write code locally, upload them in remote server and test whether his facebook connect base application works or not. They either has a domain name or a dedicated IP address. Because when we create a facebook application we have to provide an URL in the setting page. In this tutorial I’ll show you how to develop and test facebook connect base application locally. This tutorial will only work for facebook connect base application or website, not for facebook Iframe base canvas or page application.

Case:

  1. We want to develop a facebook connect base website/application
  2. We want to test everything in our laptop or local pc not on the remote server
  3. Suppose we don’t have a dedicated IP address or any domain

I assume that you’re using mac (as I do), if you’re using linux or windows then you’ve to learn how to create virtual host in your local pc.

Solution:

Step 1:

To learn how to develop facebook connect base application checkout the following tutorial

  1. PHP SDK 3.0 & Graph API base Facebook Connect Tutorial
  2. New JavaScript SDK & OAuth 2.0 based FBConnect Tutorial

Step 2:

Create a virtual host in your pc. I’m using MAMP Pro its super easy for mac to create virtual host using this tool. I created a virtual host named fblatestphotos.com in my local pc. You’ve to also set the local folder where you’ll store file for this host. After successfully setup everything you’ve to click apply then the apache server will restart. Now I can browse http://fblatestphotos.com:8888/ successfully in my pc.

If you use other operating system or different tool please google and explore how to create virtual host in your local pc.

Step 3:

Now create a facebook application or use your old facebook application and change the setting. In the Site URL field set the local virtual hosting address, in my case it is http://fblatestphotos.com:8888/

Step 4:

Now follow step 1 and download any of the source code from the tutorials of Step 1, move the code in the local folder that you’re using as the virtual host folder. Then update the App ID and/or App Secret in the config file of the source code.

If you do everything successfully then you should able to test the application successfully in your local pc. And it saves lots of time as you’ll test locally. Additionally if you don’t have dedicated IP or domain you don’t have to worry as you could test application locally now. Hope it helps.

About mahmud ahsan

Founder And Lead Programmer at iThinkdiff.net

, , , ,

32 Responses to How to Develop & Test Facebook Connect Application Locally

  1. r September 3, 2011 at 3:46 am #

    Hi
    I’m using MAMP (the free version) and i don’t think i can have a local virtual adress (just http://localhost/). Can it works anyway do you think?
    Thanks

    • mahmud ahsan September 3, 2011 at 10:55 am #

      No you can’t, because when you provide url in facebook application setting, you’ve to provide a valid domain like something.com or something.net. When we create virtual host we can create this, but only localhost has no .com or .net so facebook application setting not accept it.

  2. Leonardo Veiga September 4, 2011 at 11:20 pm #

    Ola,

    Agora eu consegui resolver o meu problema.
    Obrigado

  3. chandu September 5, 2011 at 1:15 am #

    I just started writing some code with this and ur tutorial is very very usefull to me….. but then i notice something.

    “Secure Canvas URL: is must from 1st October” …. so is that mean if we dont use https then graph API won’t work ? i mean i won’t be able to post on wall, update status using my normal blog ( using http… not https ).

    Is there any other solution to this.. rather than signing for SSL certificate for my blog ?

    * sorry if i misunderstand something

    • mahmud ahsan September 5, 2011 at 11:09 am #

      I’m not sure about it, lets see what happened after 1st October.

    • zero September 23, 2011 at 8:41 pm #

      you don’t need SSL with application in sandbox mode. That’s what they told.

      “All Canvas and Page tab apps (that are not using FBML) must convert to process signed_request (fb_sig will be removed) and obtain an SSL certificate for use in ‘Secure Canvas URL’ and ‘Secure Page tab URL’ (unless you are in Sandbox mode).”

  4. M Gokul Saravanan September 9, 2011 at 5:57 pm #

    Hi Mahmud,

    I am new guy to facebook app development. Please help me to do app like “iSkin”, just login to facebook and search with keyword iSkin, Just guide me , i can do it.
    I don’t know how to begin….!
    Please help me…! :(

  5. M Gokul Saravanan September 14, 2011 at 5:40 pm #

    Hello Mahmud,

    its very helpful when you give any thoughts.

  6. thakur mohit September 20, 2011 at 9:31 am #

    nice share man!!

  7. Shwetha September 21, 2011 at 6:48 pm #

    Hi Mahmud,

    I am trying to get all comments for a particular post if there are 10 comments for a post in main page it will show only 2 posts for rest we have to click the link, but in graph API also its showing only two comments rest we cant get i tried following code please help me with this

    for($i=0;$i<10;$i++)
    {
    $hMessage = $htcPage[data][32][comments][data][$i][message];
    print_r($hMessage);
    }

    here 32nd post has 10 commnets but i was able to get only 2 out of it.

  8. vijay September 27, 2011 at 11:50 am #

    Hi Mahmud,

    Awesome applications you done.

    i have a small doubt, hoe to pass javascript variable values to my php code.

    i used facebook login app using html and javascript as per your instructions. but the problem is im not able to send fname,lname,email values to php code.

    plz help me. its urgent

    thanks,
    vijay

  9. Brian September 29, 2011 at 9:26 am #

    I use xampp. And I test my facebook apps locally by adding “http://local-ip/appdirectory/” on facebook canvas url, “local-ip” can be your computer ip like 192.168.1.10, by using ip instead of “http://localhost” you can test your app on different computer in your local area network. I just install all my test/develop site on a directory instead of adding virtual host :p

  10. John October 3, 2011 at 5:56 pm #

    Great FB tutorials..

    Got a question I don’t think covered in any, and think i already know answer is u can not but..

    Can you in anyway access another application in the users facebook account if they give you a permission such as offline permission, and if you can is the signed request available ?

    Awaiting your reply
    Thanks

  11. Ryan November 16, 2011 at 11:32 pm #

    great article! definitely a good call. anything that shortens the edit/compile/test loop is really valuable.

    along the same lines, i’ve recently released a standalone implementation of Facebook’s FQL and Graph API that you can run on your development machine. among other things, it lets you test the actual HTTP requests your app would make to Facebook’s APIs but not depend on network connectivity and Facebook’s servers, which is nice for unit and integration tests.

    http://code.google.com/p/mockfacebook/

    happy hacking!

    • mahmud ahsan November 17, 2011 at 2:28 pm #

      Ryan thanks for your work. I request you to upload your code in Github, that’s free. Its easy to follow github also.

  12. Gdwag November 23, 2011 at 2:32 am #

    i have a job for you mahmud ahsan have my email add. emegwalio@yahoo.com

    • mahmud ahsan November 23, 2011 at 11:35 pm #

      Please hire someone else. Right now I’m not looking for works.

  13. dvl_vn March 6, 2012 at 12:56 pm #

    Hi friend,

    I have tried to call Graph API in an application which configured to run locally.
    But i get problem. I can’t not call API sucessfully.
    It said that:
    ‘FacebookApiException Object
    (
    [result:protected] => Array
    (
    [error_code] => 7
    [error] => Array
    (
    [message] => couldn’t connect to host
    [type] => CurlException
    )

    )

    ….”

    I create application on Facebook but i set Canvas url is local url.
    I try to do some things but it does not still work.
    Could you help me to know how to resolve it?

    Thank you so much.

    • mahmud ahsan March 8, 2012 at 9:16 pm #

      Did you created virtual host to test ?

    • gusti June 27, 2012 at 7:40 pm #

      i get this problem to , just cannot connect to the host , i dont know whats wrong , is there any setting on app detail, or something ? please help

  14. joel gathoni April 16, 2012 at 4:41 pm #

    hi how will i add that facebook connect code on a dabr twitter application? please help

  15. Ankit April 30, 2012 at 10:32 am #

    Hi,

    I have to create development environment to facebook apps integration at my local.i am using wamp server. i don’t have any idea to configure virtual host for the same.please help

  16. anil June 15, 2012 at 11:35 am #

    i want to connect my facebook app to my server database and retrive information of various users. help me out

  17. Anjali July 14, 2012 at 10:56 am #

    Hi Mohmud

    I am very much new to facebook api and want to know about it.Please let me know is ther any possibility that we can fetch the detail of user by his email id without authentication I mean

    I mean i just want to provide api id and secret key and want that server get login details automatically at basis of those and provide me access token ……..or any way by which i can generate access token without login.

    Please help me in this
    Thanks
    Anjali

  18. Anant Thakur August 24, 2012 at 4:42 pm #

    testing this

  19. Giuseppe Cristiano October 5, 2012 at 4:16 pm #

    Hi all,

    I’m experiencing a problem. If I use the FB connection app with old profiles it works well. But if I create a new fb profile and the try to use the app it fails!! I don’t undertand why, it seems my app doesn’t work with new fb profiles.

    Enayone can help me?

    Many thanks

  20. Shina January 5, 2013 at 3:24 am #

    I wish you are in Prague … would have invited you for a drink.

    You saved me from long hours of try and testing – thank you so much for this tips.

  21. Bailey January 16, 2013 at 4:43 pm #

    Hello my family member! I want to say that this post is awesome, great written
    and come with almost all vital infos. I would like
    to look more posts like this .

  22. Haarausfall stoppen April 17, 2013 at 10:14 am #

    You’re so interesting! I do not believe I’ve truly
    read a single thing like this before. So great to find someone
    with unique thoughts on this subject. Really.
    . many thanks for starting this up. This site
    is something that is required on the web, someone with some originality!

  23. create a website May 9, 2013 at 1:31 am #

    finally i found someone who knows how to provide relevant information on the problems i have been searching for? thanks, at last i can study with pleasure..

  24. developing apps for android July 20, 2013 at 3:21 pm #

    Have you ever thought about creating an ebook or guest authoring on other blogs?
    I have a blog centered on the same topics you discuss and would love
    to have you share some stories/information. I know my readers would value your
    work. If you are even remotely interested, feel free to shoot me
    an email.

  25. Olga November 26, 2013 at 10:27 pm #

    Thanks, article helped so much!!!!