Usando o Javascript para criar um sorteio no Instagram (no navegador)

Aprenda como criar um sorteio no instagram muito mais fácil e divertido do que expor seus dados e dinheiro a plataformas que servem exclusivamente para isso!
sorteio no instagram

Realizar sorteios no Instagram são uma excelente forma de conseguir engajar a audiência, deixar ela feliz e também crescer na plataforma por fomentar as interações.

O problema é como você vai fazer isso. Um precisa ser escolhido como vencedor. Muito trabalho manual envolvido, ou podes deixar uma ferramenta paga (na maioria das vezes) fazer o trabalho por você.

Fazer o trabalho manual pode levar a erros, seja um nome de conta escrito incorretamente ou completamente perdido. O uso de uma ferramenta de terceiros pode fazer com que os dados (sejam os dados da nossa conta ou os dados dos participantes) sejam armazenados em outro lugar.

Existe uma maneira muito melhor e mais divertida (pelo menos pra mim e pra maioria dos programadores rs)!

Neste guia, vou ensiná-lo a criar um novo campo em uma postagem do Instagram que carregará todos os comentários e selecionará um vencedor aleatório dessa lista.

Estaremos usando as Ferramentas para Desenvolvedores da Web que a maioria (se não todos) dos navegadores da Web tem hoje em dia: o Console.

O Código

Para iniciarmos, você precisa escolher um post aleatório em seu Instagram, como o desse que fizemos em nossa página.

Em seguida, clique com o botão direito na parte cinza, e clique em Inspecionar.

Agora, escolha a aba Console.

Caso você queira, também pode abrir o Console digitando o seguinte atalho: Ctrl + Shift + J

Deve aparecer mais ou menos assim para você:

90% do caminho já foi trilhado! Tudo que você precisa fazer é copiar o código abaixo e colar ele no console e, em seguida, apertar Enter!

var removeDuplicates = true

var debug = false
var loadMoreButtonSelector = '[aria-label="Load more comments"]'
var loadingSvgSelector = 'article svg'
var userNameSelector = 'body > div#react-root > section > main article li h3'
var scrollContainerSelector = 'body > div#react-root > section > main article ul'

var errorStyle = 'background: red; color: white; font-size: x-large'
var infoStyle = 'background: green; color: white; font-size: x-large'
var warningStyle = 'background: green; color: white; font-size: large'
var successStyle = 'background: #ffd052; color: black; font-size: x-large'

var counter = '-'
var commentCount = 0
var prevCommentCount = 0
var loadingCount = 0
var tickCount = 0
var loadingLimitBreak = 30
var urlSinglePost = /(com\/p\/.*)/
var { log } = console
var { clear } = console

var clearConsole = () => {
  !debug ? clear() : null
}

var reset = ( name ) => {
  clearInterval( name )
  clearConsole()
}

var loadingSpinner = () => {
  counter==='-'?counter='/':counter==='/'?counter='- ':counter==='- '?counter='\\':counter==='\\'&&( counter='-' )
  log( `Comments: ${commentCount}` )
  !debug && log( `Loading... ${counter}` )
}

var interval = setInterval( () => {
  const articleLength = document.querySelectorAll( 'article' ).length
  const commentLength = document.querySelectorAll( userNameSelector ).length
  const button = document.querySelector( loadMoreButtonSelector )
  const loadingSvg = document.querySelectorAll( loadingSvgSelector )
  const testedUrlBool = urlSinglePost.test( window.location.href )
  const scrollContainer = document.querySelector( scrollContainerSelector )

  if ( debug ) {
    log({
      articleLength,
      commentLength,
      button,
      loadingSvg,
      testedUrlBool,
      scrollContainer
    })
  }

  prevCommentCount = commentLength
  scrollContainer ? scrollContainer.scrollTop = scrollContainer.scrollHeight : null
  tickCount++

  if ( testedUrlBool && articleLength > 1 ) {
    reset( interval )
    return log( '%cPlease reload the page to isolate the image, then re-run the script.', infoStyle )
  } else if ( testedUrlBool && commentLength === 0 ) {
    reset( interval )
    return makeFunOfScriptRunner()
  } else if ( articleLength > 1 || commentLength === 0 ) {
    reset( interval )
    log( '%cThis script only works on isolated images, please navigate directly to a single image', errorStyle )
    return log( '%cFor example:\nhttps://www.instagram.com/p/BRWAyEQjEeB/', 'font-size: x-large' )
  } else if ( window.innerWidth < 736 ) {
    reset( interval )
    return log( '%cSo this is a weird quirk you\'ve somehow found. The comments aren\'t visible at this screen width. Make your browser window a little bigger and try again.', infoStyle )
  } else if ( loadingSvg.length && loadingCount < loadingLimitBreak ) {
    loadingCount++
    clearConsole()
    loadingSpinner()
    return
  } else if ( button && prevCommentCount !== commentCount ) { // verifica se o novo botão de comentário está travado
    loadingCount = 0
    tickCount = 0
    clearConsole()
    loadingSpinner()     
    commentCount = commentLength
    return button.click()
  } else if ( debug && tickCount <= 10 ) {
    return log( 'DEBUG', {
      tickCount: tickCount,
      loadingCount: loadingCount,
      button: Boolean( button ),
      prevCommentCount: prevCommentCount,
      commentCount: commentCount,
      'button && prevCommentCount !== commentCount': button && prevCommentCount !== commentCount
    })
  } else {
    reset( interval )
    return isolateUsernames( [ ...document.querySelectorAll( userNameSelector ) ] )
  }
}, 250 )

var isolateUsernames = ( peopleList ) => {
  let userNames = []
  peopleList.map( x => {
    if ( x.innerText !== document.querySelector( 'h2 a' ).innerText ) {
      userNames.push( x.innerText )
    }
  })
  if ( removeDuplicates ) {
    const uniqueList = [ ...new Set( userNames ) ]
    return uniqueList.length ? pickWinner( uniqueList, userNames.length ) : makeFunOfScriptRunner()
  } else {
    return userNames.length ? pickWinner( userNames, userNames.length ) : makeFunOfScriptRunner()
  }
}

var randVideo = () => {

  const items = [
    'https://youtu.be/NfYKJJAcOrU', // ghostmane mercury
    'https://youtu.be/vXXHISsnQl4', // lary's barleywine
    'https://youtu.be/kCaf9rWYmAg', // bilmuri there
    'https://youtu.be/CEVXcP3VC3Y', // tyler igors theme
    'https://youtu.be/9AXXSa8YEic', // the decline (live)
    'https://youtu.be/LYWpFs8Na9k', // badcop+badcop womanarchist
    'https://youtu.be/urt88eX5yXo?t=1859', // earth crisis (live)
    'https://youtu.be/bN0ciI2Fibo?t=505' // earth crisis (punk rock mba)
  ]
  return items[~~( items.length * Math.random() )]
}

var makeFunOfScriptRunner = () => {
  log( '%cSeriously?', errorStyle )
  log( '%cThere are clearly no comments.', errorStyle )
  return log( `%c${randVideo()}`, 'font-size: x-large' )
}

var pickWinner = ( people, totalComments ) => {
  // Anunciando o ganhador
  const num = people.length
  const WINNER = people[Math.floor( Math.random()*num )]
  const button = document.querySelector( loadMoreButtonSelector )
  const loadingSvg = document.querySelectorAll( loadingSvgSelector )
  reset( interval )
  loadingCount >= loadingLimitBreak && log( '%cError: comments stopped loading properly, please review results.\n\nYou can most likely just paste the code again WITHOUT reloading.', errorStyle )
  Boolean( button || loadingSvg.length ) && log( '%cWarning: button to load more comments is still visible. This is probably because of a bug where IG enters an inescapable infinite loop by loading the same comments over and over.\n\nRegardless, run the script again just to make sure (WITHOUT reloading).\n\nIf nothing changes or if it loads comments you\'ve seen before, use the winner output below.', warningStyle )
  log( `${totalComments} total comments (excludes replies, includes duplicates)` )
  log( removeDuplicates ? `${totalComments - people.length} duplicate commenters removed` : 'duplicates not removed' )
  log( `%cAnd the randomly selected winner out of ${num} ${num === 1 ? 'entry' : 'entries'} is...\n\n${WINNER.toUpperCase()} !!!!`, successStyle )
  log( `%chttps://www.instagram.com/${WINNER}/`, 'font-size: large' )
}

Pronto! Em seguida, ele processará os dados e você poderá ter acesso ao link do perfil do ganhador!

Mesmo que na sua tela não esteja aparecendo todos os comentários, o código acima irá clicar automaticamente no botão “mostrar mais” para você. Pode levar algum tempo dependendo de quantos comentários houver, é só esperar. Assim que todos os comentários estiverem disponíveis, ele escolherá um comentador aleatório por nome de usuário.

Você também pode customizar a escolha de um comentário pela repetição dele. Caso a regra de seu sorteio permita que você escolha alguém que comentou mais de uma vez, basta trocar o valor da primeira variável de true para false, ficando assim:

var removeDuplicates = false

Às vezes, o Instagram funciona mal e não carrega os comentários corretamente. Se isso acontecer, ele executará o gerador de comentários aleatórios, mas recomendará a revisão. Não há muito a fazer além de esperar e tentar novamente mais tarde.

O método Math.random( ) cria um número aleatório entre 0 e 1, multiplica esse número aleatório por quantos comentários existem, arredonda esse novo número para baixo usando Math.floor( ), retorna a pessoa na posição pessoas [randomNumber].

Tem alguma dúvida em relação a isso? Deixe um comentário abaixo que iremos ter o maior prazer em lhe ajudar!

Créditos do Projeto no GitHub

Luís Nogueira

Luís Nogueira

Programador viciado em aprender coisas novas e especialista em desenvolvimento Web, apaixonado pelas tecnologias e stacks back-end, front-end e mobile, é fundador e CEO da Feature Code, com o objetivo de divulgar e agregar conhecimento a todos da área.

Comentários