Most 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:
- We want to develop a facebook connect base website/application
- We want to test everything in our laptop or local pc not on the remote server
- 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
- PHP SDK 3.0 & Graph API base Facebook Connect Tutorial
- 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.
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
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.
Ola,
Agora eu consegui resolver o meu problema.
Obrigado
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
I’m not sure about it, lets see what happened after 1st October.
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).”
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…!
Hello Mahmud,
its very helpful when you give any thoughts.
nice share man!!
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.
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
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
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
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!
Ryan thanks for your work. I request you to upload your code in Github, that’s free. Its easy to follow github also.
i have a job for you mahmud ahsan have my email add. emegwalio@yahoo.com
Please hire someone else. Right now I’m not looking for works.
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.
Did you created virtual host to test ?
hi how will i add that facebook connect code on a dabr twitter application? please help
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