dashing-instagram-photos-by-user.md

Instagram photos by username for dashing

I struggled a while to create a dashing widget that would display images posted by a specific user. I build this upon the great foundation by @mjamieson that can be found here. To run this you will need a Dashing dashboard, the official Instagram ruby gem and access to the Instagram Developer API.

Getting set up

You will need to put some files into the right place in order to make this work:

• instagram.rb goes into the /jobs/ subfolder of your dashing installation
• Add your Instagramm access tokens to the instagram.rb file (you maybe want to use environment variables inside a separate .env file)
• For the three files called instadash (.coffee, .scss and .html) you go into the /widgets/ subfolder of your dashing installation and put them into a new folder called instadash
• Then add the widget to your your-dashboard.erb file
• Run bundle install
• Start your dasboard (dashing start)

instadash.coffee

class Dashing.Instadash extends Dashing.Widget

  ready: ->
    @currentIndex = 0
    @photoElem = $(@node).find('.photo-container')
    @nextPhoto()
    @startCarousel()

  onData: (data) ->
    @currentIndex = 0

  startCarousel: ->
    setInterval(@nextPhoto, 10000)

  nextPhoto: =>
    photos = @get('photos')
    if photos
      @photoElem.fadeOut =>
        @currentIndex = (@currentIndex + 1) % photos.length
        @set 'current_photo', photos[@currentIndex]

instadash.html

<div class="photo-container">
  <img data-bind-src='current_photo.photo'/>
</div>

instadash.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #fff;

// ----------------------------------------------------------------------------
// Widget-comment styles
// ----------------------------------------------------------------------------
.widget-instadash {
  background-color: $background-color;
  padding: 0 !important;
  margin: 0;
  .photo-container {
    display: block !important;
  }
}

instagram.rb

require 'sinatra'
require 'instagram'

Instagram.configure do |config|
  # For client id and client secret you need to register an application at http://instagram.com/developer
  config.client_id = ENV['INSTAGRAM_CLIENT_ID'] || 'your_client_id'
  config.client_secret = ENV['INSTAGRAM_CLIENT_SECRET'] || 'your_client_secret'
  # To obtain your access token I followed this: http://jelled.com/instagram/access-token
  config.access_token = ENV['INSTAGRAM_ACCESS_TOKEN'] || 'your_access_token'
end

# This needs the user ID you want to display images of. Find out the ID for a username here: http://jelled.com/instagram/lookup-user-id
user_id = ENV['INSTAGRAM_USER_ID'] || '123456789'

# Uncomment the following line if you want to see the received output in your terminal (for debugging)
# puts Instagram.user_recent_media("#{user_id}")

SCHEDULER.every '2m', :first_in => 0 do |job|
  photos = Instagram.user_recent_media("#{user_id}")
  if photos
    photos.map! do |photo|
      { photo: "#{photo.images.low_resolution.url}" }
    end
  end
  send_event('instadash', photos: photos)
end

your-dashboard.erb

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
    <div data-id="instadash" data-view="Instadash"></div>
</li>

Doesn't work. "LoadError: cannot load such file -- instagram"