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