How to make an easy Instagram hashtag feed slideshow for events or parties — updated

In this guide I will show you how to make an autoscrolling live slideshow from a given hashtag from Instagram.

Since Instagram changed their policy in april 2016, it has been impossible to fetch images from any given hashtag on Instagram.
Now you can only fetch images from a given username. This change has annoyed a lot of people and services like Instawidget, Websta, Livewidget and Instafeed stopped working.

Purpose
At the company where I work, we were about to have a party for all of our clients, and we really wanted the social gimmick off the images from the party on screens and projectors — inviting people to share their images with our hashtag instantly.

I had 3 demands:
- It should work on a computer / projector.
- It should show me the latest images instantly.
- The images should come from a given hashtag — not userspecific

The solution I came up with, was to use Instagram.com as the actual service, since I couldn’t fetch the images in other ways.
So basicly I used a Chromeextention to change the CSS on Instagram.com, added some javascript to refresh the page and voila!

Use it for events, parties, coffee houses and so on.

You can use it on screens or large scale projectors.

View the Video tutorial here.

Pro tip: View the video in faster speed, if you don’t want to fall a sleep.
I’m talking really slow 😂.

You will find the code below:

Here is how it’s done

Install the chrome extension “Web overwrite”:

Web Override

Add a new override, give it a name and target the url you want it to execute.

Usually https://www.instagram.com/explore/tags/write-tag-here

remember til active the overwrite.

In this example I’m gonna target the #awesomeparty tag.

This is how the tag page looks now:

Let’s make the magic happen.

I’m not going into the small details about the code, but basically I used the Chrome inspector to target the elements from instagram.

NOTE: Instagram changes their code from time to time, and your code might not be working afterward. Make your feed just before your event at hope for Instagram doesn’t update in the meanwhile.

Find your assets

You need an url to an event logo image, and background image(unless you use color).

Write your CSS

Click on the CSS tab on your overwrite and add the following code. Remember to change the asset paths.

@import url('https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700,800,900');
.id8oV, .NXc7H, .EZdmt {
    display: none;
}
.yQ0j1 {
    visibility: hidden;
}
.info {
    position: fixed;
    bottom: 50px;
    right: 60px;
    font-family: 'Catamaran', sans-serif;
    color: #fff;
}
.info h1 {
    font-size: 4em;
    margin-bottom: 30px;
    font-weight: 700;
}
.info p {
    font-size: 1em;
    margin-bottom: 40px;
    font-weight: 700;
    opacity: 0.6;
    font-weight: 300;
}
body {
    background: url(https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6b2b3eeca79a80926667ec71b01eac12&auto=format&fit=crop&w=2250&q=80);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
._3Laht, .o64aR {
    background-color: transparent !important;
}
/* image container */
.Nnq7C.weEfm {
    flex-direction: column !important;
    max-width: 600px;
    animation-name: scroll;
    animation-duration: 60s;
    animation-delay: 1s;
    -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
    animation-timing-function: linear;
}
/* Scroll speed */
@keyframes scroll {
    from {top: 0px;;}
    to {top: -4000px;}
}
@keyframes fadein {
    from {
        opacity: 0;
        background: #222;
    }
    to   { opacity: 1; }
}
._bz0w {
    margin-bottom: 20px;
    box-shadow: 0 2px 60px 0 rgba(0,0,0,0.1);
    border: 10px solid #fff;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
    animation: fadein 1s;
}
.FFVAD {
    visibility: visible !important;
}
.weEfm {
    margin-bottom: 0;
}
/* Count Down */
#countdown {
    position: fixed;
    left: 40px;
    top: 40px;
  height: 40px;
  width: 40px;
  text-align: center;
}
#countdown-number {
  color: white;
  display: inline-block;
  line-height: 40px;
}
svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}
svg circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: white;
  fill: none;
  animation: countdown 60s linear infinite forwards;
}
@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

Add the counter in html

add the following code to the HTML part of your Overwrite

<div class="info">
    <h1>#awesomeparty</h1>
    <p>Remember to set your profile to "public"</p>
    <a class="jWQqO Szr5J coreSpriteDesktopNavLogoAndWordmark _7mese" href="/">Instagram</a><a class="jWQqO Szr5J efNlB coreSpriteGlyphBlack" href="/">Instagram</a>
</div>
<div id="countdown">
  <div id="countdown-number"></div>
  <svg>
    <circle r="18" cx="20" cy="20"></circle>
  </svg>
</div>

Add some javascript magic

add the following code to the javascript part of your Overwrite.

The code will countdown and autorefresh after 60 second to show latest photos.

// Timer for reload
    setTimeout(function(){
        location = ''
    },60000);
    
var countdownNumberEl = document.getElementById('countdown-number');
var countdown = 60;
countdownNumberEl.textContent = countdown;
setInterval(function() {
  countdown = --countdown <= 0 ? 60 : countdown;
countdownNumberEl.textContent = countdown;
}, 1000);

Now go check your tag page (remember to active the overwrite)

It should look like this:

Here is a use case for a festival

You can add several overwrites and just change the background image and logo — pretty awesome right?

Please put your use case in the comments — I would love to see them.

Thank your for reading!

/ Joachim