Facebook API Integration: testing on different URL? - facebook

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

Related

Is there a way to host MATLAB web app (designed in App Designer) on Github Pages?

I have already created and designed my MATLAB app in App Designer, where it currently works fine with the executable deployment. However, I've been researching the implementation of my application into a web browser, and have attempted doing it through MATLAB Web App Server, however it only seems to work while I have the run button pressed, obviously. Additionally, I attempted to create an AWS server using the MATLAB tutorial, however for some reason my stack build always fails.
So just curious is there another way to do this, such that either the server can host my app indefinitely, or perhaps run it through a GitHub pages account because my current project is saved on Github?
You need a back server which runs the MATLAB engine (or MCR).
Something you can not do on GitHub as they don't dedicate you a server for persistent work.

A good development workflow for static sites with one or two PHP files?

so I'm still learning a lot about best practices and local development workflows when working on my web projects. At the moment, when I develop a static site locally I tend to use Grunt + Bower + some static site generator to start up a local server really quickly. On the other hand when I'm working on a more PHP focused project I will set up a Vagrant box, depending on the focus. My question though is what is the best way to locally develop static sites that have one or two PHP files within them, such as a handler for a contact form? I can't run the PHP on my local server under grunt (at least as my current workflow stands — I use the browsersync plugin — is there a way to do this?), but using Vagrant seems like overkill, especially sometimes when I've settled into using a static site generator, and later realise I need to write a server side script.
You can use nginx to reverse proxy requests to your localhost (your machine). This would route *.php to other IP (a vagrant machine just for those two PHP that happened later) and all other static request to you local grunt server.
With this setup your development site would ever be in http://localhost/ or http://localhost:xxxx where xxx is some port. But, depending on the target requested (php, jpg, html, etc) the request will be routed to right place.

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.

Develop and Test a Facebook application

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.

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