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">
Update carousel style
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