Bubbslândia
BLOGROLL TESTE O HTML ARQUIVO Siga nas redes
Assine o Feed
featured image preview
BREVE
Lorem ipsum dolor sit amet

19 janeiro 2017

Contador de seguidores das redes sociais para blog




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 </head> 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 </skin> 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:


Adicionei redes da Elaine Gaspareto pra terem noção com todas as redes sociais
Atenção
Onde você vê os usernames dela 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, 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 !

Um comentário

  1. Eu não uso canal, mas achei os contadores super lindoos!! Se precisasse eu usaria com toda certeza!
    Também amei seu layout, muito interessante e agradável ^.^
    By~ Sweet Magic Kissus!

    ResponderExcluir

Bom, primeiramente obrigada pelo seu comentário !
Peço por gentileza que comente somente sobre o blog e não use aqui como debate alheio sobre comentários anteriores! Qualquer dúvida, sugestão e até mesmo reclamações use tanto meu Facebook como o meu Email, tentarei responder o mais rápido possível. Anônimos não perca seu precioso tempo tentando ofender tanto os comentarista como a mim mesma, eles serão excluídos!