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.
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.
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.
Foursquare.com 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.
lifted utilized Foursquare’s CSS and implemented the top section. Here is what the result looks like:
Foursquare and authless client side apps.
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.