Behind The Scenes: Edition 3 - Instagram Social Feed
Near the footer of our site we have a handy social feed that showcases our Instagram feed and also links to the post on our website that relates to the Instagram post. Wonder how that works?
Typically if you’re trying to do something on the internet, chances are someone has had that same problem and that they’ve released some kind of package or resource that you can take advantage of to save some work. In our case, showing an Instagram feed on a website is a pretty common use case. A quick search, lead us to Instafetch, which solved our need pretty well and took us 90% of the way there. Since on our site our Instagram posts link directly to the social posts we wanted to be able to link directly to the page on our site from the Instagram post instead of linking back to Instagram.
Checking the docs of InstaFetch you can see to initialize the package requires passing in a few options to set the preferences.
However, we needed a way to have the instagram posts link back to a page that already exists on our site. Therefore, we forked the package to accept an additional param of links which using Jekyll is an array of the most 10 recent social posts with the instagram id and a link to the post:
Then we added in the links as part of the initialization of the Instafetch plugin:
Then, in our forked version of InstaFetch we added in logic to parse the
array and link to the url we provided instead of the Instagram post, which was the default:
See the result at the bottom. As a result after a post we have to add in the Instagram ID that is assigned from Instagram so we can relate the entry on our site to the post on Instagram and that’s it!