Instagram Liquid Tag Plugin for Jekyll and Octopress

Being new to the world of Ruby (and obviously Jekyll), I thought a good initial learning experience would be to write a liquid tag for Jekyll to display an Instagram photo. I finished up a decent enough version of the code, and it’s actually in use over at lukelov.es to display all my Instagrams. Check out this page for a complete example of what the finished product looks like.

It is a simple liquid tag which takes one parameter, the ID of a media item from Instagram. The code then fetches the media item using Instagram’s ruby gem, and writes a bunch of relevant HTML to the page.

I currently have it displaying:

the 612x612 version of the image (which links to the photo on Instagram)
the filter used to create the image
a static map of where the image was taken using the Google Static Map API
the name of the location where the image was taken
a link to comment on the Instagram using webstagram

Obviously, the location information is only displayed if the Instagram has that data associated with it.

The embedded gist below should be the same as the code being used in the lukelov.es repository.

If you have questions, comments, bugs, etc, please leave a comment on this post or the gist, and if you’d like to contribute fixes or features directly, you can submit a pull request for this file.

# A Liquid tag for Jekyll sites that allows embedding Instagrams # by: Luke Karrys # # Example usage: {% instagram media_id %} require 'instagram' require 'json' module Jekyll class InstagramTag < Liquid::Tag def initialize(tag_name, markup, token) super access_token_file = File.expand_path "../.instagram_access_token", File.dirname(__FILE__) @access_token = File.open(access_token_file).gets @image_res = "standard_resolution" @markup = markup @cache_folder = File.expand_path "../.instagram-cache", File.dirname(__FILE__) FileUtils.mkdir_p @cache_folder end def render(context) id = @markup.strip media = get_cached_media(id) || get_media(id) gen_html_output JSON.parse(media) end def gen_html_output(media) loc_name, lat, lon = nil, nil, nil id = media["id"] link = media["link"] src = media["images"][@image_res]["url"] image_w = media["images"][@image_res]["width"] image_h = media["images"][@image_res]["height"] location = media["location"] filter = media["filter"] caption = media["caption"] created = Time.at(Integer(media["created_time"])).strftime("%I:%M%p %B %e, %Y") title = caption ? caption["text"] : "Untitled Instagram" output = "<a href='#{link}'><img src='#{src}' alt='#{title}' /></a>" output += " Filtered with #{filter} through <a href='http://instagram.com'>Instagram</a>" if location loc_name = location["name"] lat = location["latitude"] lon = location["longitude"] coords = "#{lat},#{lon}" loc_alt = loc_name || coords output += "<a href='http://maps.google.com?q=#{coords}'>" output += "<img border='0' " output += "src='http://maps.googleapis.com/maps/api/staticmap?center=#{coords}&markers=#{coords}&zoom=14&size=#{image_w}x200&sensor=false' " output += "alt='#{loc_alt}' /></a>" if loc_name output += " Taken at #{loc_name}" end output += "" end output += "<a href='http://web.stagram.com/p/#{id}#photo#{id}'>Leave a comment</a>" end def get_cache_file_for(id) File.join @cache_folder, "#{id}.cache" end def cache(id, data) cache_file = get_cache_file_for id File.open(cache_file, "w") do |io| io.write data end end def get_media(id) client = Instagram.client(:access_token => @access_token) data = client.media_item(id).to_json cache id, data unless @cache_disabled data end def get_cached_media(id) cache_file = get_cache_file_for id File.read cache_file if File.exist? cache_file end end end Liquid::Template.register_tag("instagram", Jekyll::InstagramTag)

On a side note, I also came up with a solution for how to batch create Instagram posts (as you might’ve noticed by the hundreds of Instagram posts on lukelov.es). The solution was to create a few Rake tasks similar to the ones that are already being used by Octopress to create new posts and pages. I will be writing another blog post soon detailing those and how they work, but if you would like a sneak peak, checkout the Rakefile for lukelov.es.

lukecod.es

Code and a mustache

Instagram Liquid Tag Plugin for Jekyll and Octopress

Comments