• API v5 Docs
• API v3 docs
• API Keys

Simple Setlist Embed

In this tutorial, I'm going to walk you through embedding Phish.net setlists into a website using javascript. For this tutorial, I'll be using version 3 of the Phish.net API. Using the setlists.latest method, you can fetch the latest setlist.

Believe it or not, this so simple, it will take you fewer than 10 seconds to add to your site. As we covered, for now, assume we're trying to embed the latest setlist in the sidebar of your site. The sidebar might look like this: <div class='sidebar'></div>

Or, if you're cutting edge, maybe like this: <aside></aside>

Are you ready to embed the latest setlists? This is all we have to add, in between div or aside tags: <script src="https://api.phish.net/v3/setlists/latest?apikey=<APIKEY>&callback=phishnet.setlist"></script>

That's it. Everything should work as-is. But what's actually happening?

Part of that script is defining a function, a function we call a "callback" function, because we'll call on the data we get back. While the API is fetching the data, the callback function, is parsing it and wrapping it HTML and writing it to the browser window. Add that line to your website, insert your API key, and - boom! - the latest setlist will be on your website. Check out the API documentation for more.