Como colocar um contador de seguidores de redes sociais automático no blog - * Blog Elaine Gaspareto *

Como colocar um contador de seguidores de redes sociais automático no blog

em 01/03/2017

Como colocar um contador de seguidores de redes sociais automático no blog
Ano passado (que louco dizer isso, pra mim parece que 2016 ainda não acabou...) eu compartilhei aqui no blog este tutorial, que ensina como colocar no blog um contador de seguidores nas redes sociais, curtidas na fanpage e inscritos no canal.
Funciona, é bem legal mas tem uma outra opção que quero te mostrar agora.
Fica assim:
Ele fica assim, na horizontal, é semi-responsivo, ou seja: se adapta à área onde for posicionado e atualiza os números automaticamente.
É extremamente simples de instalar e você pode trocar as plavaras e cores, se desejar.
Vamos trabalhar?

Para começar abra a página com o código necessário à realização do tutorial e copie o código:

Copiar o código


A seguir vá até seu blog e clique na aba Layout. Clique então em Adicionar um gadget e na janela de opções que aparecer escolha HTML/JAVASCRIPT.
Dentro da caixa que expandir cole o código copiado.
Faça as alterações necessárias: onde você vê os meus usernames apague e substitua pelos seus, de suas redes sociais.

Agora preste atenção: você precisa gerar o token de acesso do Instagram para que os números dos seus insta-seguidores apareçam.
Estando logado em sua conta Instagram clique http://instagram.pixelunion.net/ e gere o token de acesso.
Copie o código alfa-numérico que foi gerado e troque o meu, que está no código que disponibilizei, pelo seu, que acabou de gerar.
Salve, arraste para onde deseja que fique e salve a organização.

Caso você queira trocar as palavras Likes, Seguidores, etc... basta localizar no código essas palavras e as substituir pelas que desejar.
Cores eu não recomendo trocar, afinal já estão com as cores "oficiais" de cada rede social.
Bem simples e fácil, né?

Uma última dica: faça o download do arquivo .js que faz o contador funcionar. Basta clicar https://sites.google.com/site/codigoselainegaspareto/scripts/contadordeseguidoresbyelainegaspareto.js e o download será feito.

Salve esse arquivo em seu computador e a seguir hospede-o em seu próprio host. Aí substitua o endereço da minha hospedagem pelo endereço da sua.
Não sabe como fazer isso? Calma, eu ensino, veja:

Como hospedar arquivos usando o Google Sites?

Gostou?
Se tiver alguma pergunta relativa à execução deste tutorial diga nos comentários e eu ajudo se for possível.

E se quiser ajudar o blog pode usar o Método Cococu!
Co= comentar
co=compartilhar
cu=curtir
Eu? Fico muito agradecida!!!
31 comentários via Blogger
comentários via Facebook

31 comentários:

  1. BOm dia! Que maravilha é essa menina!
    POst salvo e vou tentar fazer no meu blog!
    Beijos
    Minhas Inspirações por Sara Menezes

    ResponderExcluir
  2. Essa dica parece fácil de por em prática. Vc sempre objetiva e com uma linguagem acessível.
    Elaine, ontem de mandei um in box no face. Não se assuste, acho que vc vai gostar da minha decisão.
    Bjs

    ResponderExcluir
  3. Bom dia, Elaine.

    A página do código está dando indisponível, tanto no Crome como no Firefox.

    Um abraço e bom fim de semana.

    www.aponarte.com.br

    ResponderExcluir
  4. oi amiga...não consegui o código link para copiar o código mostra página não existente ...obrigado

    ResponderExcluir
  5. Querida, nao consigo copiar o link, ao clicar no quadrado, diz que esta pagina nao existe :(
    Bjks mil

    ResponderExcluir
  6. Elaine, não está aparecendo o código, diz que a página não está disponível.
    :(

    ResponderExcluir
  7. Gente querida, sorry! Eu esqueci de deixar o código em modo público. Já corrigi, está certinho.
    Desculpe, é a vida loka dessa pessoa que vos fala...

    ResponderExcluir
  8. Olá Elaine, estou no seu Blog vendo todas as postagens. Por que a numeração das páginas do rodapé só aparece na primeira página? Ao acessar por exemplo a página 2, não aparece a numeração das páginas no rodapé, só aparece na pág 1. Só consigo acessar até a página 5, as demais não. Tentei em 3 navegadores e aconteceu o mesmo. Testei no celular e também aconteceu.

    ResponderExcluir
    Respostas
    1. Vilma, é assim porque o script que eu escolhi usar funciona assim. Depois da primeira página aparecem links de navegação, clique neles e as próximas postagens aparecem.

      Excluir
  9. Eu gostei e vou experimentar. Claro que vou trocar cores e fontes kkkk

    Obrigada! Achei prático.

    beijossssss

    ResponderExcluir
  10. Oi Elaine! Fiz tudo como pede, mas quando coloquei na lateral só aparece os ícones e palavras seguidores e o resto fica em branco, onde será que errei. beijos.

    ResponderExcluir
    Respostas
    1. Luh, eu não sei dizer...
      Tem certeza que fez tudo certo e que não há outros scripts causando conflito?

      Excluir
  11. Oi Elaine! Hoje apareceu, mas ficaram grandes e os números não aparecerem, será que é porque a largura da minha sidebar é menor? Vou tentar novamente para ver se funciona, amei esse tutorial, Beijos.
    www.blogsemprebelas.com

    ResponderExcluir
  12. que pena, segui todos os passos mas não deu certo!

    ResponderExcluir
    Respostas
    1. Jac, é que você está usando um dos novos templates do Blogger e neles, os responsivos, não dá certo. Aliás a maioria dos tutoriais não funcionarão nesses templates...

      Excluir
  13. Olá Elaine, eu fiz tudo direitinho só que não está aparecendo a minha quantidade de seguidores do Twitter... Eu já olhei o meu nome de usuário e ele está certo :/

    ResponderExcluir
    Respostas
    1. Ruan, talvez esteja dando conflito com outro gadget semelhante que você já tem no blog...

      Excluir
    2. Você pode dar uma olhadinha por favor?

      Conceito Aberto

      Excluir
    3. Ruan, tem outro gadget lá com a mesma função. Experimente testar o contador em um blog de testes, sem nada parecido...

      Excluir
  14. Elaine, Bom dia.
    Gostaria de reativar o blog da minha mãe. o nome é Blog da Cássia Rezende. Ela faleceu há pouco tempo e gostaria de fazer isso.. Obrigada desde já.
    Att, Vitória FR

    ResponderExcluir
  15. Elaine, Bom dia.
    Gostaria de reativar o blog da minha mãe. o nome é Blog da Cássia Rezende. Ela faleceu há pouco tempo e gostaria de fazer isso.. Obrigada desde já.
    Att, Vitória FR

    ResponderExcluir
  16. Elaine, muito obrigado por mais um excelente tutorial. Com você posso tornar meu blogger da forma como bem quero. Deus te abençoe sempre.

    ResponderExcluir
  17. Olá tudo bem?

    Segui o tutorial direito e inclusive testei ele em outro blog, mas não apareceu o número de seguidores. Só aparece o ícone da rede e as palavras correspondentes. Perguntas: Somente o Instagram exige o acesso token? Facebook e Twitter não precisa obter acesso token? Será que pra ele começar a funcionar direito tenho que esperar mais tempo, tipo até o outro dia?

    Grato!

    ResponderExcluir
    Respostas
    1. Moisés, só o Instagram exige o token.
      Não precisa esperar não, aparece na hora.
      O que pode ter acontecido é conflito com algum script que já exista em seu template, tipo slide ou qualquer outro gadget que use JQuery pra funcionar.
      Também não pode esquecer justamente da biblioteca JQuery, a última linha do código que forncei: se não tiver tem que instalar e se já tiver não pode repetir.
      Chequei agora e está funcionando, olha no blog de uma das minhas clientes:
      http://www.reciclaredecorar.com/

      Excluir
  18. Obrigado pelo retorno.

    Tinha uma outra biblioteca JQuery no meu html, daí eu removi porém nada aconteceu tbm. Eu vou fazer alguns testes aqui, daí se der certo retorno aqui pra dizer como consegui. Obrigado.

    ResponderExcluir
  19. Como prometido estou retornando após fazer alguns testes...

    Primeiro tentei inserir o techo em CSS diretamente no html pra ver se dava certo e não deu. Daí removi alguns widgets que suspeitava que estavam dando conflito e também não deu. Recomecei o processo pra ver se tinha esquecido de algo e também não deu certo.

    Fui procurar outro tutorial similar na internet e encontrei um que não sei qual é o idioma, mas deu pra seguir direitinho e dessa vez deu certo.

    O link do tutorial foi esse aqui https://mastamvan.blogspot.com.br/2016/12/social-media-follower-counter-blogger.html

    No meu blog ficou assim http://www.musicacafe.com.br/

    P.S. Consegui ajustar meu blog graças a alguns tutoriais seu. Obrigado pelas dicas.

    ResponderExcluir
    Respostas
    1. Ah, que bom que deu certo!
      Sabe qual foi o problema? Os scripts hospedados no Google Sites (que é onde hospedei) de vez em quando travam em blogs com domínio público diferentes do domínio de origem. O ideal, nesse caso, é hospedar em seu próprio host.
      Mas que bom que no fim deu certo!

      Excluir
  20. Olá, boa tarde!
    Contador do twitter não funciona!
    Link teste: https://templatemodelolivros.blogspot.com.br/

    Poderia ajudar? Grata!

    ResponderExcluir
    Respostas
    1. Daniela, sugiro que releia o tutorial e veja se não esqueceu nada. No meu blog de testes está normal (Códigos para seu blog), bem como no blog de uma cliente, confira:
      http://www.reciclaredecorar.com/

      Sugiro baixar o arquivo .js e hospeda´lo em seu próprio host pois pode acontecer de haver excesso de tráfego e ele bugar.
      bjssss

      Excluir

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…



Visualizações

Contando...

Dias online
Postagens
comentários