Yesterday we launched a very simple and fun end of the year wrap video creator for Ra Ra Riot powered by Instagram and Impossible Software. The app logs you into Instagram and then grabs your top content from 2018. This content is then sent to Impossible where it is assembled into a dynamic video which includes Ra Ra Riot’s new (perfectly fitting) single “This Time of Year.” Once your video is generated, we use Postmark to email it to you for easy sharing. The whole process takes less than a minute. Try it now and read on to learn more.
I have history with the Instagram API to say the least. One of my first major projects in music was an Instagram powered map for Moby’s Destroyed release. Built in 2011, I remember Instagram covering it on their now destroyed company blog. This was long before Zuck’s testimony in front of congress. Hell, this was before Instagram was acquired by Facebook. It was an incredible moment to be a developer because the most popular and highest quality social content creation platform had a fully functioning platform. Boy have things changed. Zuck’s testimony kicked off some drastic adjustments to both the Instagram and Facebook platforms as it was clear that his company had dropped the ball (repeatedly) on keeping user info private. Naturally, as a developer building innocent concepts, you have mixed feelings about this. You can understand their “depreciate first, figure things out later” approach makes sense but you’re still bummed that you’re slowly losing access to a great source of user content.
Being the brave soul that I am, I decided to venture into the dusty ruins of the Instagram Platform to see where things stood and try to pull off this simple concept for Ra Ra Riot. Well the writing is certainly on the wall as you’re immediately welcomed with the depreciation message. As of April 2018, most of the endpoints have been depreciated and those that have survived are marked for death. In the case of our app, we needed access to a user’s media which should be around until early 2020. Glorious. Facebook recommends you familiarize yourself with their Instagram Graph API but it only takes two clicks before they send you back to the classic API if you’re building apps for users and not businesses. By the way, they refer to users as Instagram Non-Business Accounts. 😅
If you are building apps for Instagram Non-Business Accounts, please use the Instagram Platform API instead.
Anyway, if you don’t have an Instagram API account you will quickly learn that Instagram is now manually approving any new signups. I learned this the hard way when I thought I could use the sandbox functionality to allow my client to test their app. If you do get approved (or already have an account,) your next issue will be trying to create a new app since Instagram refuses to fix a captcha error that has been documented well. Once you’ve cleared those hurdles, your last task will be getting your application approved. This process is actually very clear. Just make sure your application is production ready when you send it over for approval. If you’ve made it this far without giving up, you’re in for a treat. The platform itself still works and feels stable.
In the case of our application, we’re using Instagram’s Implicit authentication flow to gain temporary access to a user’s recent media. I remember when Instagram first added video to this endpoint and it felt like the beginning of an incredible future this platform. Things really haven’t changed since then… but it still provides an incredible response and pagination capabilities to traverse a user’s timeline. I wrote a little script to pull all content from 2018. That content is then scored by the amount of activity (likes and comments) associated with it. Finally, we select a couple of pieces of media from the top and the sort those again by their creation date so they are revealed in a linear fashion in the video.
This array of media first hits a serverless function which generates the video with Impossible Software. Impossible is a video rendering service that allows you to define XML based compositions that are then exposed via a rendering API. It’s actually quite powerful and works really well for this use case. The video gets generated in seconds and then the user is instructed to provide their email address for final delivery. I’ve mentioned this solution before but since mobile browser’s don’t allow users to download videos, we need to get the content to them somehow. Postmark is a perfect service for handling this kind of email transaction.
The frontend application was built using Nuxt.js and served via Netlify. This was my first time using Netlify and I have to say it was a really nice experience. Being a seasoned Heroku developer, the “git push” to deploy is now second nature but I was also quite pleased to see how Netlify handled domains as well. It was a great introduction to the product and I can’t wait to dive deeper. The backend application was developed completely with serverless as I continue my quest to learn more and more about serverless architecture. If I can configure my entire application in a YML file, you better believe I will.
This brings us back to the Instagram API. I think this Ra Ra Riot app is a perfect example of the kind of functionality I hope Facebook makes a part of their Graph API. I’d like users to be able to login with Facebook and then grant access to their media. Just that functionality alone is so powerful. In the meantime, we have until 2020 to get all of these ideas out.