Develop and Test a Facebook application - facebook

Typically I develop my websites on trunk, then merge changes to a testing branch where they are put on a 'beta' website, and then finally they are merged onto a live branch and put onto the live website.
With a Facebook application things are a bit tricky. As you can't view a Facebook application through a normal web browser (it has to go through the Facebook servers) you can't easily give each developer their own version of the website to work with and test.
I have not come across anything about the best way to develop and test a Facebook application while continuing to have a stable live website that users can use. My question is this, what is the best practice for organising the development and testing of a Facebook application?

I hope I understood your question correctly.
What we have is 2 versions of our app, that is two applications defined in facebook.
We have the regular version that runs on deploy, and we have the myapp-test version.
this version runs on the domain myapptest.com (or you can use myapp.local).
In your HOSTS file (%winder%\system32\drivers\etc) define this url and redirect it to your own server on localhost (127.0.0.1).
Now, all you need is a config file on each machine that is not updated via source-control.
The localhost (development) version uses the app_id for the myapp-test, and relevant settings.
The deploy uses the other settings.
Then when you deploy you just need to upload your code.

Related

Cant test FB SDK login locally even though I have set my domain and site URL (app is test mode)

I am developing a web app with Facebook integration and I can't figure out why I can't test the login function locally. I have looked through the answers here (How to Test Facebook Connect Locally) and have tried to follow the steps of having the app in test mode, setting the site URL and the domain.
Based on FBs documentation here: https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
I should be able to use http for localhost development, but I get the error
The method FB.api can no longer be called from http pages. https://developers.facebook.com/blog/post/2018/06/08/enforce-https-facebook-login/
and can't log in. Below are pictures of my app settings (including an indication it is an app in 'test mode').
So this is really only a half answer, but it seemed easier for me to just force https for my local development using mkcert (https://github.com/FiloSottile/mkcert). After creating local certs I updated my site URL to say https://localhost:8080 and I am able to log in without issue.

Facebook login - how to develop on both localhost and in production?

I am developing a website which uses the Facebook login. Now, I want to be able to get this to work both in my production environment, as well as in my development environment.
On Facebook, I can give ONE site url, which Facebook can redirect to. This worked great during my development phase, but now I want it both to work in production, but also while developing my solution.
I guess one way would be to run my application on the local IIS with my domain-navn and change my hosts file, but that can't seriously be the most easy solution!?
- What is the easiest way to get it to work in both environments?
Update: As of 2018 the path to this setting is now Products > Facebook Login > Settings > Client OAuth Settings the rest of this answer is still valid.
There is a better way. You just need to add valid callback URL's for your localhost to Settings > Advanced > OAuth Settings.
This method allows you still have your production website URL while allowing oauth from dev, staging, production, etc.
After I have worked with this for ~6 months, I have found a solution which works really well, based on the other two answers.
In Facebook I add two apps:
Production app
Dev app
Then, in my web.config app settings I have:
<!--Prod-->
<add key="_FacebookApiId" value="id"/>
<add key="_FacebookApiSecretId" value="secret_id"/>
<!--Dev-->
<add key="FacebookApiId" value="dev_id"/>
<add key="FacebookApiSecretId" value="dev_secret_id"/>
Which of course is read through a helper-class.
Then it works seamlessly on both production and localhost, and both myself and my team is happy.
I have the same problem.
The only solutions I have found are:
yes... edit the host file on your local machine: How to Test Facebook Connect Locally
create another Facebook app only for development purposes: Facebook Oauth on localhost for testing during development (the blog is about Rails but the solution to use different apps depending on the environment is still valid for other languages)
Facebook only allows localhost OAuth redirects when your app is in development mode. This means you can't run your application in production and perform local development tests.
Instead, you need to create a test variant of your app. Head to https://developers.facebook.com and view the dashboard for your production application. Click the drop-down menu at the top-left and choose Create Test App.
This populates a test application with almost the same settings as your production app. However, it gives you a new app ID and app secret, so you'll need to toggle these settings when running in development mode (as other answers suggest).
Here's some further info on test apps: https://developers.facebook.com/docs/apps/test-apps/
Following the advice in this answer, it will work if set the Mobile URL to be your development domain (ie. localhost) and the Site URL to be your production domain.
The updated way.
In the App Dashboard, choose your app and go to Products > Facebook
Login > Settings. Under the Client OAuth Settings, enter your redirect
URL in the Valid OAuth redirect URIs field for successful
authorization.
Go to https://developers.facebook.com/docs/facebook-login/web for more info.

Facebook API Integration: testing on different URL?

I'm trying to develop a website which uses Facebook Connect for authentication and other things. However, it seems that FBConnect in general requires the URL of the website to be the same one as you registered the app with. This is a problem, because although I'm running the site at
www.example.com
i am testing the site at
localhost:9000
So all the facebook stuff breaks on my local machine. Currently I'm simply working around this by doing testing on the actual server. So each time I want to test my code after doing stuff, I perform a
// local machine
git commit -a
git push origin master
// remote server
git pull origin master
Which apart from being annoying to do for every small change, is obviously going to be a problem when real people are actually reaching the website, and I want to continue development & testing without breaking it over and over while people are using it.
Is there a better way of doing this sort of thing? I'm sure others (i.e. everyone else who has ever used FBConnect) have run into this problem before. Is it possible to trick my DNS to point www.example.com at localhost during testing, so the Facebook Javascript is tricked to continue working?
One way around this is to edit your system's hosts file to point your domain to localhost. Add a line like this to your /etc/hosts file (or %SystemRoot%\system32\drivers\etc\hosts on windows):
127.0.0.1 www.yourdomain.com
Another approach is to create a second app on facebook for you in-development version, and use localhost as the URL for that version. Just don't forget to update the app id and secret to the production version when you deploy :)
The real answer here is to set up a staging server not located on your own localhost and create a staging application in FB pointing to that staging URL.
I like to use an entirely separate server for this purpose so I can develop and experiment at will without worrying about crashing my production application due to an errant loop or something.
--or--
Create a subdomain (staging.example.com) and stick a clone of your code in a separate root folder with the same directory structure as your application.
Yes, you will need some small conditional code to determine if you're looking at the staging or the production version of your site and then call the appropriate FB keys accordingly.
I ran into this problem when trying to move my code from development (localhost) to production. I was able to use localhost as the canvas url and my production domain for the secure canvas url. That way I was able to

Local Facebook App Development using localhost

Is it possible to develop facebook apps locally on my system so that the callback URL need not be a public URL like http://abc.com and instead can be an internal IP address like localhost http://127.0.0.1?
It is now possible to develop Facebook apps locally.
I believe this is true especially if you're developing in an iframe, which is now the standard way of developing facebook apps (FBML is deprecated).
In case this does not work, there are still some ways to make working more convenient.
Take a look at this answer:
Testing FB apps is still a rather primitive process.
I generally setup a test application that is a complete copy of the production settings inside the FB development environment that uses an SSH tunnel to point to my development server. You can setup as many applications as you need inside FB - I generally have a development application, a staging app and production. Staging and Production are both on "live" servers rather than an SSH tunnel.
The rest of the answers to this question detail different workflows that people have utilized to make it more convenient to develop on a remote host.
you can use http://127.0.0.1/ProjectName as the callback url, or your ip address itself

How do you develop for facebook? (multiple developers)

I'm currently developing a Facebook App for an Application Tab with another developer (CodeIgniter Framework).
It's not possible to use localhost for Application Tabs. So we're using subversion for updating our stuff on our server to test the app in facebook. Quite often we have conflicts in our files, because we're editing the same parts of it.
Is there any better solution to develop a Facebook App with multiple developers?
You could modify your "hosts" file in C:\WINDOWS\system32\drivers\etc
//Under...
127.0.0.1 localhost
//Add...
127.0.0.1 yourappname.com
This will allow you to run the application locally...
Xander is right and here's what we are doing in our dev team :
setup facebook app
setup on our localhost
create a virtual host like dev.facebookapp.com via apache
make sure you have svn or git to lessen conflicts with other dev