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.
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:when test="starts-with(@data-feed, '@')">username</xsl:when>
<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"/>
'<xsl:value-of select="$feed-type"/>': '<xsl:value-of select="$feed-name"/>',
'items': <xsl:value-of select="$items"/>,
'items_per_row': <xsl:value-of select="$items-per-row"/>,
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!