Tom Cavill is a Product & UI Designer in London.

One of Harmony’s great hidden features is its ability to pull in data feeds and let you do interesting things with them.

Twitter is built in and ready in just a few clicks, but Instagram takes a little more setting up; so here’s a guide.

First, you’ll need an API key. Sign in to Instagram at http://instagram.com/developer/ and hit ‘Register your application’. Register a new client and use your Harmony site’s domain for both the website URL and redirect URI.

In Harmony; navigate to Data Feeds in the side bar and hit ‘Add a data feed’. Ensure JSON is selected in the dropdown menu, and name your feed InstaJSON or hipsterfeed or whatever else.

In the JSON data url field, paste in this path:

https://api.instagram.com/v1/users/[X]/media/recent/?access_token=[Y]

Now you need to ascertain what your user number and access token is. The quickest way is to use this handy tool from David M Register. Replace [X] and [Y] in the JSON data url field with your user number and access token respectively.

Save your data feed and go to your site’s theme documents in Harmony. Create a new template, or open the template in which you want your Instagram feed to appear.

Use the following code to output your latest ten Instagram photographs.

<section class="instagram-feed">
  <h2>Instagram</h2>
    {% feed 'instajson' %}
      {% for photo in feed.data.data limit:10 %}
        <a href="{{ photo.images.link }}" target="_blank">
          <img src="{{ photo.images.low_resolution.url }}" />
        </a>
      {% endfor %}
    {% endfeed %}
</section>

Use the data feeds link at the foot of the Harmony chrome to browse through the data available to you; the above example uses only the link and small sized photo; but you have access to likes, comments, larger sizes—the whole shebang.

Would love to see some examples of this in the wild, so let me know in the comments. You can see mine on my info page.

Posted in development, harmony, instagram, and liquid.