Instagram Feed using Javascript and XSLT/XML

Recently an Instagram widget that we were using on a site broke when the Instagram API was upgraded/deprecated (I guess it depends on which side you are on). The widget was no longer supported, so we were looking for some workarounds/solutions.

We investigated moving to another commercial widget, building a script using their API and whatever other options we could think of. We found InstagramFeed on GitHub, which is a really cool Javascript.

The CMS we work in uses XML/XSLT for it’s templating, so using the CMS’s built in Components, we built a simple Component that would give a content manager access to basic form controls so to create/edit the script. We then wrote some XSLT to build out the script call and output to generate the InstagramFeed script on our website. Nothing too amazing, but not too shabby for the very short turnaround.

Here’s the XSLT we used to output the script with the options of passing:

• feed name or type, @ username or # tag
• number of items to display
• number of items for row

<xsl:template match="div[@id='instagram-feed-comp']">
  <xsl:param name="feed-type">
    <xsl:choose>
      <xsl:when test="starts-with(@data-feed, '@')">username</xsl:when>
      <xsl:otherwise>tag</xsl:otherwise>
    </xsl:choose>
  </xsl:param>
  <xsl:param name="feed-name" select="substring(@data-feed, 2)"/>
  <xsl:param name="items" select="@data-items"/>	
  <xsl:param name="items-per-row" select="@data-items-per-row"/>	
			
  <div id="instagram-feed-comp"></div>
  <script src="_host-path_/instagram-feed-min.js"></script>
  <script>
  (function(){
    new InstagramFeed({
      '<xsl:value-of select="$feed-type"/>': '<xsl:value-of select="$feed-name"/>',
      'container': document.getElementById("instagram-feed-comp"),
      'display_profile': false,
      'display_biography': false,
      'display_gallery': true,
      'callback': null,
      'styling': true,
      'items': <xsl:value-of select="$items"/>,
      'items_per_row': <xsl:value-of select="$items-per-row"/>,
      'margin': 1,
      'lazy_load': true
    });
  })();
  </script>
</xsl:template> 

We hate XSLT, but you can do some very cool stuff with it if you can find good documentation and examples out there.

Once we make our template match, we’re assigning data attributes we have setup in our Component (not shared here) as XSLT params for later output. We create a new param feed-type that checks whether the feed-name starts with an @ or # to determine if it’s an Instagram account or a hashtag to display.

Next we just output a div for the script to append to, the include script for the Instagram Feed, and the function with options we want for our display. The scripts creators really did a great job documenting the options. GitHub and the web in general are so awesome at times!

We output XSL value-of’s where we want our Component values to output in the script. Again, very simple but works great without our CMS. A content manager can very easily add and update their Instagram feed on their respective page without knowing and Javascript or having access to source code.