in Project a day

Foursquare Embedded Venues

Twitter has embedded tweets, Facebook has embedded posts, and Google has embedded maps. When you want to share a Foursquare venue on your website, you have no options, until now.

The project.

My goals were to build something quick, cheap, and looked as official as possible.

Websites would add an iframe to their site linking to my page passing in a venue id. My page would then render a card for the venue.

I had two different options for building the iframe. I could either do it through server side code which rendered a static page, or do it entirely in javascript. If this was running on Foursquare’s server it would absolutely make sense to build it server side. Quick internal access to data and all the other APIs they have to already render the cards would be the obvious choice.

Being 3rd party and having a goal to be cheap changes the requirements. If it was built server side, I would need to run it on something like Heroku. If it is built client side, I could serve it from Github pages. For cost, scaling up on Heroku is infinitely more expensive than scaling up on github pages which is free. Heroku is also significantly slower than Github pages (even more so on a low traffic page). The answer was clear. Faster and cheaper is hard to argue with. I built it entirely client side.

The design.

Screen Shot 2014-08-26 at 1.31.04 PM shows cards like this on their venue pages. I wanted to keep the style as close as possible to the card they show, but I didn’t feel that all the information was necessary, at least for an initial version.

I wanted to embed these cards on a portion of my website that shows where I’ve traveled and would let me highlight specific places and link back to Foursquare so people could get more information. The most important pieces were the top most section. Picture, name, categories, location, and website.

I kindly lifted utilized Foursquare’s CSS and implemented the top section. Here is what the result looks like:

Screen Shot 2014-08-26 at 2.33.21 PM

Foursquare and authless client side apps.

Foursquare doesn’t seem to be built to handle client side apps that don’t require the user to auth. Foursquare apps are provided a client id and secret and can make authless requests using that. That means that since this entire project is written in javascript, my secret must exist in public javascript. Foursquare has no means to create app access tokens like Facebook provides, implying that they don’t expect developers to use their APIs like I have.

I received a comment from a developer advocate at Foursquare saying that my best bet is to route my calls through a server to protect the key. At that point I would just render the page on the server which I will avoid for the reasons listed at the beginning of the post.

My hope is that people who use this don’t abuse my key. If enough people use this that Foursquare ends up being unhappy with my app secret being public, perhaps it will cause them to make it themselves.


Write a Comment