I have been experimenting with Instagram, again. This time, I have established a relationship between a picture of the day and a song recently discovered on Spotify through the Discover Weekly feature. The below post would be an example:
Picture + Name/lyrics of the song + 🎶 + hashtags
After gathering the data, I mapped these posts using the Mapbox JS library and I made each song playable on the same window. This is the result:
Below I explain the process of collecting and mapping the data:
1. Gathering data
There are two ways of storing the data from Instagram:
A. If you know it beforehand, IFTTT recipes are very useful. This website syncronises apps and devices such as Twitter, Instagram, Spotify, Google Drive and much more to collect the data .
I created a recipe that stored each published post by me on Instagram on a Google spreadsheet:
B. If you aim to gather published posts, you can import or scrap them using Import.io or other tools.
Import.io allows creating an API from the data o to download it as JSON and CSV:
Read this previous post to know how to use Import.io.
2. Creating previews for Spotify tracks
Spotify presents a Spotify Play Button that gets the code from a song URL ready to be embed on WordPress or another website. However, this button opens the song in a new window and on the user’s Spotify account.
The aim was to listen to the songs on the map, so I used Spotify API. It offers a console that allows developers to get the documentation from a track:
Placing the preview_url within the <source src=””> code will display the song on the same website rather than a new window:
And this is the result:
3. Exploring the Instagram embedding code
The first idea was to embed the post on the map. However, the default code provided by Instagram wasn’t rendering.
I looked for more details through two append endpoints to the URL:
- /oembed (to have information about the post)
- /p/shortcode/media (to get the JPG)
This solution wasn’t working. Instagram platform shows, again, its lack of flexibility. Finally, I decided to insert the link on each marker that opens the post in a new window.
4. Creating the map
I used the Mapbox library, which provides code examples that can easily be modified by users.
From their examples:
You can change the data and add features:
And visualise the data as you want:
This example can be found on Github here.
5. Finding relationships
Using this information as an excuse, I tried Neo4j to find a relationship between the music in Birmingham, Girona and Barcelona.
Els Catarres was the most listened band this summer (attending to a concert in Girona might be the key!) and the connection between Birmingham and Girona. Even thought the result was a tiny and non-intimidating visualisation, it was an opportunity to jump into this tool and see how it works:
- I find the Instagram API frustrating. It’s very difficult to deal with the data and embed posts on websites apart from WordPress.
- Mapbox has great examples but I find Google Maps API more flexible
- The result show that I miss my home and Catalan songs!
Let me know what you think in the comments or at @mcrosasb.