Using Javascript to create a raffle on Instagram

Original post

Social media giveaways. As an entrepreneur, this is the fastest way to make your account/business to grow. But the time comes to give the prize away. Hundreds of comments. One needs to be picked as a winner. Lots of manual work involved, or let a paid (most of the time) tool do the work for us.

Doing the manual work can lead to mistakes, either an account name wrongly written or missed out completely. Using a third-party tool may lead to data (either our account data or the data of the participants) being stored somewhere else.

Is there a better way?

Of course there is!

Let a programmer help you.

In this guide I'll teach you how to create a new field in an Instagram post that will load all the comments and select a random winner from that list.

We'll be using the Web Developer Tools most (if not all) web browsers have nowadays. Particularly, the Console.

Create the field

Firstly, we'll be patching to the DOM of an Instagram post page (e.g.: example) and use Instagram CSS classes to keep our field pleasant to the view. Therefore, in the Console, using the Multi-Line Editor Mode, write the following function:

funtion createField() {
  let elem = document.querySelector('.eo2As');

  let section = document.createElement("section");
  section.setAttribute('class', 'sH9wk _JgwE');

  let div1 = document.createElement("div");
  div1.setAttribute('class', 'RxpZH');

  let div2 = document.createElement("div");
  div2.setAttribute('class', 'X7cDz');

  let text = document.createElement("textarea");
  text.setAttribute('class', 'Ypffh');
  text.setAttribute('placeholder', 'Winner');
  text.setAttribute('id', 'ganador');

  let btn = document.createElement("button");
  btn.setAttribute('class', 'sqdOP yWX7d y3zKF');
  btn.setAttribute('type', 'button');
  btn.setAttribute('onclick', "(function() {participants = document.querySelectorAll('.ZIAjV'); winner = participants[Math.floor(Math.random() * participants.length)].innerHTML; document.querySelector('#winner').value = winner })(); return false;");

  let btn_txt = document.createTextNode("Select a winner");

  btn.appendChild(btn_txt);
  div2.appendChild(text);
  div2.appendChild(btn);
  div1.appendChild(div2);
  section.appendChild(div1);

  elem.appendChild(section);
}

This creates the raffle field below the comments section. It basically is a copy of the section used to write a new comment. What is important here is line 21, when we add the onclick attribute to the button. Let's extract this function.

function() {
  participants = document.querySelectorAll('.ZIAjV');
  winner = participants[Math.floor(Math.random() * participants.length)].innerHTML;
  document.querySelector('#winner').value = winner 
}

As we can see, it reads all the elements with class .ZIAjV, which is a class that is associated with the usernames that have written a comment. Then, basic math calculations are used to select a random element from that list. Finally, we are writing that winner username into the text field that we have created.

We can run this function and see that it works. Except for one thing, all the comments are not loaded. We need to load all comments, otherwise LOTS of participants will be missed out.

Loading all the comments

In order to load all the comments, we'll be using the provided button to do so. So start clicking on it until all the comments are loaded.

Nah, I'm just kidding. Let's create a new function to do all the clicking for us.

How do we know all the comments have been loaded? The 'more comments' button, as I call it, no longer appears when all comments are loaded, so let's use this event to control how many times the button is to be clicked.

function loadComments() {
  console.log('loading comments...');
  const loadComment = setInterval(
    function() {
      let moreComments = document.querySelector('.glyphsSpriteCircle_add__outline__24__grey_9');
      if (moreComments != null) {
        moreComments.click();
      } else {
        clearInterval(loadComment);
        createField();
    }
  }, 5000);
}

This function checks every 4.5 seconds if the 'more comments' button is still present on the DOM. If it is, the button is clicked, otherwise it stops the interval and calls the createField() function we wrote earlier.

Why 5 seconds and not lower like every 2 seconds, or every second? The 'more comments' button usually loads (paginates) 12 comments at a time. If done in lower that 5 seconds, it loads less comments, as if there was a buffer or something and doesn't finish to load completely. I've found that 5 seconds is the best time to load all 12 comments at a time, but sometimes it loads less, like 10 or so.

Ok, so now all we have to do is call the loadComments() function and we are set.

Hope you liked this guide!