Contador de seguidores das redes sociais para blog 
Autor: Keells Silva | Publicado: 2017-01-19T19:06:00-02:00




Boa noite gente! bom como podem reparar hoje dei mais uma repaginada no blog, pois algo ainda me incomodava, então uni o útil ao agradável, e também adquiri o tutorial da { Roh Ramos do Gnm-h }  e o adaptei nos trechos [ SEARCH, ASSINE O FEED, EXTRAS e agora acrescente para minhas principais redes sociais... no campo SIGA NAS REDES ], basta clicar lá e veras como esta lindo... Eu amei de verdade e irá demorar pra mim trocar de layout, poderei mudar os detalhes mas trocar vai demorar ao menos três meses, estou tão apegada a ele até porque me deu um pequeno trabalho, mas enfim ...

No tutorial de hoje vou ensinar a acrescentar seus contadores de redes sociais, como seguidores das redes sociais, curtidas na fanpage e inscritos no canal , resolvi desenvolver três estilos diferentes ( pois não curto nada colorido ), mas hoje irei postar esse estilo! lembrando que o Script original é do [X] não é de minha autoria, porém é de minha autoria a personalização e algumas adaptações com dicas extras para melhor entendimento, Veja a demonstração:


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

Recomendo que faça um {Backup} do seu template antes de prosseguir para evitar transtornos, caso algo saia errado.No Código Html do seu blog acima de &lt;/head&gt; acrescente:
 Os dois trechos contem Código da fonte que é o Font Awesome  e o Código da biblioteca Ajax 

Se seu template já tiver essa fonte ou esse script pode pular essa parte No Código Html do seu blog acima de &lt;/skin&gt; acrescente:#bungkus_social{
color: #ffffff;
background-color:transparent;
margin:10px
}
#bungkus_social .item{
padding:12px;
font-size:11px;
border-radius:5px;
float:left;
margin:0 10px 10px 0;
background: tranparent;
text-align:center;
min-width:90px; /* LARGURA DE CADA CAIXA */
min-height:100px;
text-transform:uppercase;
}
#bungkus_social .item.facebook{
    background: #a46b8f;/* BACKGROUND DA CAIXA */
    text-decoration: none;
 border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item.instagram{
   background: #a46b8f; /* BACKGROUND DA CAIXA */
    text-decoration: none;
    border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item.google{
   background: #a46b8f; /* BACKGROUND DA CAIXA */
    text-decoration: none;
    border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item.youtube{
   background: #a46b8f; /* BACKGROUND DA CAIXA */
    text-decoration: none;
    border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item.pinterest{
   background: #a46b8f; /* BACKGROUND DA CAIXA */
    text-decoration: none;
    border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item.twitter{
   background: #a46b8f; /* BACKGROUND DA CAIXA */ 
    text-decoration: none;
    border: solid 1px #fff; /* COR DA BORDA */
}
#bungkus_social .item i{
border-radius:100%;
background:#2c1c1c1a;
width:38%;
margin:0 auto;
}
#bungkus_social .item i,#bungkus_social .item .count{
padding:10px;
display:block;
font-size:20px;
    color: #634558; /* COR DO ÍCONE FONT AWESOME */
}

#bungkus_social .item .count{
font-weight: 600;
    color: #d7b4ca; /* COR DO LINK DO CONTADOR */
    border-top: solid 3px #fff;
}
#total,#total_k{
padding:10px;
font-weight:bold;
font-size:20px;
}
#total:before,#total_k:before{
content:'Total Fans:';
font-weight:normal;
}
#bungkus_social .item{
color:#fff; /* COR DAS DESCRIÇAO CURTIDAS SEGUIDORES... */
}
@media screen and (max-width:265px){
#bungkus_social .item{width:100%;padding:0}#bungkus_social .item i{
background:transparent}
}
 vá em adicionar HTML/JAVASCRIPT e dentro acrescente:Seguidores Curtidas  Seguidores Seguidores Inscritos Seguidores


    $('#bungkus_social').SocialCounter({
        //Insira seus usernames
        facebook_user: 'ElaineGaspareto',
        instagram_user: '_keelliinny',
        google_plus_id: '+ElaineGasparetoParada',
        youtube_user: 'MrsElaineGaspareto',
        pinterest_user: 'elainegaspareto',
        twitter_user: 'elainegaspareto',
        //Get Access Tokens,keys,client_ids
        instagram_token: '3913653007.1677ed0.fa79d59a65464441814d620003b418c6',
        google_plus_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
        facebook_token: '1627334644211864|3_tGe7MNSzumVcKxMyJUTqZAlz4',
        youtube_key: 'AIzaSyDXpwzqSs41Kp9IZj49efV3CSrVxUDAwS0',
    });

Adicionei redes da Elaine Gaspareto pra terem noção com todas as redes sociaisAtençãoOnde você vê os usernames dela apague e coloque os seus. E no campo &nbsp;&nbsp;instagram_token apague a sequência alfanumérica que está no código e insira o seu token, como mostra abaixo:


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. Não apague as aspas! Não precisa alterar os demais códigos ou tokens.


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?
Bom, por hoje é só espero que tenha gostado e que utilizem nos seus blogs/sites só não mexam na estrutura, pois pode não dar certo e não radicalizem na edição para fugir do foco do tutorial , ok ? Qualquer duvida é só comentar que eu os ajudarei com o maior prazer . Bjs da Jack !