Stephen Keable

Foursquare recently launched the new photos feature on their website, iPhone and Android apps. Which adds another cool features to an already great geo-location service. However so far the website doesn’t allow you to add photos, you can only do it via the iPhone or Android app.

When the photos feature launched I wanted to be able to to upload several photos across Norfolk via the EDP24 Foursquare account for people to find at places across the county. Initially I transferred the photos to my iPhone and uploaded them to the venues using that. However I found that I could not find venues that were out of range.

To overcome this issue I decided to start playing with the new API from Foursquare, which is pretty easy to use once you get your head around OAuth (I’ve never needed to use it until now). I then used the API to create a simple HTML form that I could leave on my local machine enter a Venue ID and browse for a photo to upload.

No doubt Foursquare will add this functionality soon to the website, also there are much more elegant solutions to this problem, however this was a means to an end. If I get some spare time I may create a better widget, with venue search and proper response handling.

Warning: This is a very simple tool, which relies on you getting the venue ID correct, always check that you have added the photo to the correct venue and delete any misplaced ones.

Step 1 – Get an OAuth key from Foursquare

Visit https://foursquare.com/oauth/register then login and fill out the form, if you are going to be using the tool from your local machine, enter http://localhost in the website and callback fields.

Once you register you will receive to long codes call Key and Secret, make a note of these.

Step 2 – Obtain the OAuth Token for your user

Next we need to ping a command to foursquare to get our OAuth Token which is required when uploading images and will upload the images at what ever user you are logged in as when you do the process.

So login to Foursquare as the user you want to upload photos as, then enter the following URL into your browser:-

https://foursquare.com/oauth2/authenticate?client_id=KEY&response_type=token&redirect_uri=URL

Replacing KEY with the code we obtained in Step 1 and URL with the address you entered into the Callback field.

When you visit this address it will ask you if you want to allow access, hit the Allow button.

This will take you back to your address, however you will notice you have #access_token=TOKEN on the end of the URL the long code after the equals sign is your OAuth Token, make a note of this.

Step 3 – Create the HTML form

This part is quite simple, create a HTML file in Notepad/Dreamweaver/TextWrangler or what ever your preferred HTML editor is then use this code in the body portion of the page:-

<form action="https://api.foursquare.com/v2/photos/add" method="post" enctype="multipart/form-data">
<p>Venue ID: <input type="text" name="venueId"></p>
<p><input  type="file" name="photo"></p>
<input type="hidden" name="oauth_token" value="YOUR TOKEN HERE">
<input type="submit">
</form>

Be sure to replace the YOUR TOKEN HERE with the long code we obtained in Step 2.

Save the file to your local machine somewhere.

Step 4 – Using the HTML form

Open the HTML file we created in a browser.

Then in a new tab or window open Foursquare and search for your venue, once you have found the venue you want to add a photo to, the URL of the venue whoudl look something like this:-

http://foursquare.com/venue/128530

We want the number at the end, so copy or make a note of this.

Then switch tabs/windows to our form, enter the number into the first box, and select your photo using the browse button below, and hit Submit.

Note: The photo has to be a JPG with the content type image/jpeg otherwise it will fail.

You should then be taken to a page displaying a JSON response on it, if the start of the response looks like this:-

{"meta": {"code": 200.....

And it has a 200 in it then sucess, your photo has been uploaded. Go to the venue page and hit refresh and your photo should be there.

If you have gotten a number different to 200, you should be able to see an error message with a brief explanation of what was wrong.

Update: If you change venueId to tipId you can use the form to add photos to tips you have already posted. Thanks to About Foursquare for this idea