Create instagram feed

Create new project

rails new insta_demo

Add page controller

Get images from instagram by calling api with net/http

app/controllers/pages_controller.rb
class PagesController < ApplicationController
  require 'net/http'

  def index
    account_name = params[:account_name] || "arsenal"
    uri = "https://www.instagram.com/#{account_name}/?__a=1"

    result = JSON.parse(Net::HTTP.get(URI.parse(uri)))
    @items = result["graphql"]["user"]["edge_owner_to_timeline_media"]["edges"] rescue []
  end
end

Update root file

Create route for index page

Rails.application.routes.draw do
  root "pages#index"
end

Add view

# app/views/pages/index.html.erb
<div class="container">
  <div class="row">
    <% @items.each do |item| %>
      <%= link_to "https://www.instagram.com/p/#{item["node"]["shortcode"]}", target: "_blank" do %>
        <%= image_tag item["node"]["thumbnail_resources"].last["src"] %>
      <% end %>
    <% end %>
  </div>
</div>

Turn on your server

rails s

and check http://localhost:3000/, it should display 12 recent images.

Style your feed

Using bootstrap carousel & font awesome

Add jQuery and Bootstrap
# app/view/layouts/application.html.erb

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Enjoy
  • Review your result and enjoy
Demo

Source code: https://github.com/sondh5/insta_demo
Demo: https://insta-feed-demo.herokuapp.com/
With other account:
> Eg: https://insta-feed-demo.herokuapp.com/?account_name=vietnam.destinations

comments powered by Disqus