Box seguidores do Twitter e assinantes de Feeds

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

contador-twitter-Feed Umas das coisas mais importantes para fidelizar seus leitores e manter contato com eles é divulgar as formas desse contato. As mais eficientes são via redes-sociais, como o Twitter e disponibilizando seu conteúdo para atualizações via Feed. Incentive seu público a seguir você e seu blog para nunca perder contato com eles e atrair mais visitas para seu blog. Veja esse modelo de contador de seguidores e assinantes. Serve tanto no Blogger (blogspot), quanto no WordPress.org.

 

Já ensinamos um modelo bem completo que conta também com o número de posts e de comentários do Blog. Veja aqui:

 

O que vou mostrar é mais objetivo e serve para dar mais destaque à sua conta do Twitter e atrair mais assinantes de seu Feed. Funciona tanto no Blogger (Blogspot) e também no WordPress.org, sem grandes modificações. O resultado esperado é como na imagem:

 

contador-twitter-Feed

 

Adicionando o código CSS

Se você usa o Blogger = Abra o painel do Blogger, clique no menu "Layout" ~> "Editar HTML" e procure pela linha "]]></b:skin>". ACIMA disso cole a sequência de códigos abaixo.

 

Caso você use o WordPress = Acesse seu painel, clique no menu "Aparência" ~> "Editor" e procure pelo "Folha de estilos (style.css)" e role até a última linha para colar o seguinte código CSS.

 

.box { background:url('img/bg-divider-box.gif') no-repeat center bottom; overflow:hidden; margin:1em 0; padding:2em 1.5em 3em; }
.twitter-box a { background:url('https://ferramentasblog.com.br/imagens/bg-twitter.jpg') no-repeat left top; display:block; height:49px; letter-spacing: -0.04em; padding:13px 0 0 70px; width:205px;  }
.twitter-box strong .rss-box strong { display:block; font-size:13px; }
.rss-box { margin:0 0 1.5em 0; }
.rss-box a { background:url('https://ferramentasblog.com.br/imagens/bg-rss.jpg') no-repeat left top; display:block; height:49px; letter-spacing: -0.03em; padding:13px 0 0 70px; width:205px; }

 

Não modifique nada aí e salve o modelo.

 

Adicionando o Gadget na Barra lateral

Agora vamos adicionar o gadget (elemento de página) na sidebar (barra lateral) de seu blog.

 

Se usa o Blogger = Vá em "Layout" ~> "Elementos da página" e adicione um gadget do tipo "HTML/Javascript" normalmente e dentro dele cole o seguinte código.

 

Caso use o WordPress = Abra o menu "Aparência", clique em "Widgets" e arraste um do tipo "Texto". Dentro disso cole o código.

 

<div id="social" class="box">   

    <div class="twitter-box">
        <a href="URL_do_SEU_TWITTER"><strong>Siga no Twitter »</strong><br /><script type='text/javascript' src='https://ferramentasblog.com.br/twitter/twitter-php.php?usuario=NOME_TWITTER'></script> seguidores</a>
    </div><!-- /twitter-box -->
    <div class="rss-box">
        <a href="URL_do_SEU FEED"><strong>Assine o FEED »</strong><br /><script language='javascript' type='text/javascript' src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_do_FEED'></script> leitores</a>
    </div><!-- /rss-box -->

</div><!-- /box -->

 

Agora faça as adaptações para exibir os seus dados, exatamente onde está indicado de vermelho apenas. Não mude mais nada além disso. Salve e veja o resultado em seu blog.

 

Outros Gadget para seu blog:

 

Fonte: Vi esse modelo no wwWhat’s New. Adaptei a partir do código-fonte deles.

.

16 Comentários

  1. Xará primeiramente parabéns pelo Ferramentas Blog, conteúdo de primeira, segundo tenho visitado quase que diariamente seu blog atrás de novidades para implementar em meu blog, estou testanto este box que vc nos trás hoje, só que meu fundo do blog não é branco, verifiquei no código e não encontrei nenhuma possibilidade de mudar a cor do fundo, e a quantidade de seguidores não está aparecendo, poderias ajudar??? abraços

    Responder

  2. @Marcos TOTÔ,
    A cor de fundo só tem como mudar trocando a cor da imagem. Pegue o link da imagem no código, baixe e modifique a cor de fundo, como transparente por exemplo, ou procure uma imagem mais adequada.

    Sobre o número de seguidores, veja se você colocou seu nome de twitter corretamente.

    Responder

  3. Obrigado pela dica mais uma vez, Marcos. Mas, aqui não apareceram as figuras jpg, apenas "Siga no Twitter »239 seguidores e Assine o FEED » 64 leitores. Colei certinho na folha de estilos CSS como determinou.
    Até deixei no meu blog caso queira ver o resultado. O que está faltando?
    Abraços
    Obrigado e boa Páscoa.

    Responder

  4. E ai Marcos Lemos, Seguinte meu caro, coloquei o Box no InfoManiaco, e uso so o chrome, nele ta funcionando perfeitamente, porem fui abrir o internet explorer ele ta dando um erro! segue o link para vc ver! http://infomaniaco.com.br/erro.jpg o que pode ser, fiz tudo certinho como vc falou!! se puder me ajudar!! abraços!!

    Responder

  5. @Guilherme,

    Eu corrigi o código depois que vc instalou ele… Tava mesmo com um problema para quem usa no WordPress. Basta refazer que vai funcionar perfeitamente.

    Responder

  6. @Leonardo,
    Vc deve ter apagado algo que não devia. Reveja os passos com atenção, pois as imagens estão funcionando perfeitamente.

    Responder

  7. Acabei de trocar o layout do meu blog e vim por aqui verificar novamente esse gadget, pois ele foi apagado.

    Muito bom essa postagem Marcos!

    Responder

  8. olá parabéns acho q é minha primeira fez aqui de muitas…
    só não apareceu o numero de seguidores ainda…abç.

    Responder

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.