Contador de seguidores das redes sociais, curtidas na fanpage e inscritos no canal para blog

em 21 de novembro de 2016

Contador de seguidores das redes sociais, curtidas na fanpage e inscritos no canal para blog

Oi, gente!
Vamos de tutorial novinho?
Hoje nós vamos aprender como colocar esse contador de seguidores, curtidas e inscritos que temos em nossas redes sociais.
Há muito tempo esses contadores estão pelos metablogs mas a inserção dos números de seguidores, curtidas e inscritos era sempre manual, e isso é pouco prático, né?
Mas esse script JQuery consegue fazer isso automaticamente!
Veja a demonstração:

Demonstração do tutorial


Não é o máximo?
Quer aprender? Vem comigo!



Como instalar o contador de seguidores automático no blog?



Para começar você precisa estar logado em sua conta do Instagram. É que para conseguir fazer com que o contador dos seguidores do Instagram funcione você vai precisar gerar um token.
Faça login em sua conta Instagram e a seguir clique aqui:
http://instagram.pixelunion.net/

Na página que abrir clique no botão Generate Access Token.
Autorize o aplicativo e copie o código que vai aparecer. Cole em um bloco de notas e reserve.

Importante: sempre que trocar sua senha do Instagram precisará repetir esse passo: acessar o site, autorizar o aplicativo e gerar novo token.
Portanto, guarde o endereço do site, ok?

Isso feito, vamos à parte mais divertida!
Abra a página com os códigos que vamos usar:


Copiar os códigos


Vá ao painel administrativo de seu blog e clique na aba Modelo.
Clique em Editar html e dentro da caixa de código localize a tag de fechamento </head>
ACIMA dessa tag de abertura cole o CÓDIGO DA FONTE ESPECIAL e o CÓDIGO DA BIBLIOTECA AJAX .
Se seu template já tiver essa fonte ou esse script pode pular essa parte.
Se não tiver, cole e salve.


A seguir clique na aba Layout. Aí clique em Adicionar um gadget e dentre as opções selecione HTML/JAVASCRIPT.
Dentro da caixinha que abrir cole o CÓDIGO DO CONTADOR DAS REDES SOCIAIS.
Agora preste atenção!

Onde você vê os meus usernames apague e coloque os seus.
E no campo  instagram_token apague a sequência alfanumérica que está no código e insira o seu token, aquele que foi gerado lá no começo do tutorial.
Não apague as aspas!!!
Não precisa alterar os demais códigos ou tokens.

Depois de colocar seus usernames salve, arraste para onde deseja que fique e salve a alteração do seu layout.
Está prontinho!



F.a.q - Frequently asked questions



1- Quero excluir uma das redes sociais
Simples: localize no código o trecho referente à rede que deseja excluir, apague e salve.

2- Quero acrescentar outra rede
Por enquanto o script só lê essas 6 redes.

3- Quero trocar as cores de fundo
Altere trocando o código hexadecimal de cada rede, sempre precedido do sinal #. Mas as cores são as "oficiais" das respectivas redes...

4- Quero trocar as palavras Seguidores, curtidas, etc...
Localize no código a palavra que deseja alterar, apague-a e substitua pela que desejar. Salve em seguida.

5- Quero diminuir (ou aumentar) o tamanho da fonte
Localize no código as áreas referentes às fontes e altere como desejar, para mais ou para menos.
Essas alterações são por sua conta e é preciso um conhecimento básico em CSS.



Dica muito, muito importante

Eu hospedei o arquivo original que faz a mágica acontecer em meu site mas é altamente recomendado que você copie o script, cole-o em um bloco de notas, salve com a extensão .js e hospede em sua própria conta.
Isso é essencial porque se houver um tráfego intenso em meu host o script sairá do ar e seu widget vai parar de funcionar.
E se um dia eu, por algum motivo, excluir o script, o seu widget sairá do ar.

Então, siga o conselho da tia Elaine: hospede o arquivo em seu próprio host.
Não se desespere, eu ensino como fazer isso, confira:

Como hospedar arquivos no Google sites

Aqui a página com o Arquivo .js. Ele é extenso e você não deve alterar nada, sob risco dele não funcionar:


Copiar o código do Arquivo .js





Para te ajudar eu gravei um vídeo-tutorial com a execução desse tutorial.
Dá o play e se divirta fazendo!


Leia e releia o tutorial até entender tudo.
Faça com calma e se precisar de ajuda diga nos comentários e eu ajudo, se puder.
Gostou?
Mereço um curtir ou um compartilhar?

*Tutorial adaptado de KompiAjaib



Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

11 comentários , comente também!

  1. Elaine, vou tentar colocar no meu blog,se eu não conseguir voltarei para pedir um Help.
    Estou feliz porque quando eu curtia sua página as curtidas não aumentavam...rsrs....agora aumentou bastante fico feliz por você.
    Sucesso para você!
    Prabéns pelo tutorial,beijos
    Parabéns pelo tutorial

    ResponderExcluir
  2. Elaine amo acompanhar seus posts, me ajudam bastante. Sucesso, bjinhos!!

    PAPO DE GAROTA CRISTÃ
    www.sarahcristinny.com

    ResponderExcluir
  3. Linda, acabei de colocar o widget no meu blog, mas os contadores ainda não estão funcionando. sabe se demora para aparecer os números?

    Beijos

    ResponderExcluir
  4. O Google + e Twitter nao estao aparecendo numeros =( o que faço?

    ResponderExcluir
  5. Não estão aparecendo os números em nenhum dos meus :(
    www.alinezanatta.com.br

    ResponderExcluir
    Respostas
    1. Aline, acho que você não colocou os usernames corretos.
      Experimente colocar exatamente como está no seu navegador...

      Excluir
  6. parou de funcionar, agora nao esta aparecendo os numeros =(

    ResponderExcluir
    Respostas
    1. Como você pode ver no blog de testes está normal, funcionando perfeitamente.
      Pode ser algo em seu template causando conflito ou algo errado na colocação dos usernames...
      Experimente de novo, e também em um blog simples, de testes.

      Excluir
  7. Não esta aparecendo os numeros no meu mais =(
    Porque? ajudem ai!

    ResponderExcluir
  8. Vou tentar colocar no meu caso eu não consiga você promete que irá me socorrer é ter paciência comigo?!

    http://mundoabreu.blogspot.com.br/?m=1

    ResponderExcluir
  9. The wonderful post and i can collect more reviews from here. The genuine types of documents and effective value is possible here. The best essay writing service

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…