20/07/2011

Código da Caixa de Seguidores do Twitter - Fan Box

Já mostramos vários acessórios para integrar o twitter ao blog e assim conseguir mais visitas e mais seguidores no twitter, então agora vamos mostrar um código para exibir uma caixa com seus seguidores do twitter no seu blog que é semelhando a caixa de fãs do facebook. Se desejar conhecer outras formas de usar o twitter no seu blog veja aqui mais Ferramentas e Acessórios para o Twitter.

Esse é um código bem simples de instalar, você só precisa entrar na pagina design, adicionar gadget, escolher a opção html/javascript e colar essas linhas de html:
<script type="text/javascript">
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://moopz.com/connect.php?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 300px; height: 250px; border: none; \"\>\<\/iframe\>';}</script>
<div id="twitterfanbox">
<script type="text/javascript">fanbox_init("dicasparablogs");</script>
</div>


Código da Caixa de Seguidores do Twitter
A única alteração necessária na sua caixa de fãs do Twitter é o seu nome de usuário do twitter, veja onde está dicasparablogs, veja a linha:

<script type="text/javascript">fanbox_init("dicasparablogs");</script>

E caso queria alterar o tamanho da caixa de fãs do Twitter você só precisa mudar esses valores no código:
width: 300px; largura da caixa de fãs
height: 250px; altura da caixa de fãs

Como falamos no inicio já fizemos outros tutoriais com gadgets e acessórios para o Twitter, então vejam alguns deles que podem ser úteis para seu blogspot ou qualquer outro tipo de blog ou site:

Usar Twitter em Português - Configurar Idioma do Twitter
Botão Seguir no Twitter - Conseguir mais Seguidores
Twitter button no seu blog - botão retweet

Esperamos que gostem de mais esse acessório e seja útil para conseguir mais seguidores no twitter e visitas para o blog de todos e sigam nosso perfil no twitter: fabianoroberto e vejam também dicasparablogs, onde publicamos 7 Sites com Dicas e Tutoriais para ajudar blogueiros.
Related Posts with Thumbnails

63 comentários:

  1. Otimo post! dicas para blogs sempre inovando! acho incrivel como você consegue cuidar do Dicas para blogs sozinho, tem o meu parabéns!

    ResponderExcluir
  2. apenas fizemos algumas alterações para simplificar o código

    ResponderExcluir
  3. séra q tem como adicionar a like box do facebook sem os botão de enviar post pro facebook ?

    ResponderExcluir
  4. veja na pagina de Aplicativos do Facebook existem algumas configurações que pode fazer

    ResponderExcluir
  5. olá, gostaria de saber como faço para colocar algum link fora dos gadjets ou uma coisa tipo esse que vocês tem aí "Gostou? Compartilhe!!!".
    como faz?
    obrigada desde já.

    ResponderExcluir
  6. Anonimo, veja neste tutorial: Botões de Compartilhamento Fixos no Canto da Pagina - Redes Sociais

    lá mostramos como fazer exatamente igual como estamos usando

    ResponderExcluir
  7. ok, consegui fazer, mas será que tem como colocar dois botões fixos no MESMO canto da página? Tipo um encima do outro ?

    ResponderExcluir
  8. Anônimo
    isso depende de que tipo de botões... os do addthis não pois eles já tem formatação propria...

    mas por exemplo se pegar o código do botão +1 do google e o código do botão retweet poderia colocar os dois fixos um embaixo do outro desta forma:

    < p > codigo botão +1 < / p >
    < p > codigo botão retweet < / p >


    claro isso dentro do código de fixar no canto da pagina como usamos o addthis no tutorial.

    não testei mas deve funcionar

    ResponderExcluir
  9. mais eu queria saber como eu removo os botões Curtir e enviar tipo oque tem no seu blog dentro das posts

    ResponderExcluir
  10. Bmviicio | Play Team
    entre no seu html marque para expandir o modelo e procure pelo código do facebook

    use o ctrl F e pesquise por http://connect.facebook.net

    ResponderExcluir
  11. Como tirar o protetor de links do meu blog que ja vei no template

    ResponderExcluir
  12. protetor de link que veio com o template? mas quais links estão protegidos?

    dependendo é melhor trocar o template

    ResponderExcluir
  13. TENHO UMA DUVIDA ESCANDALOSA MAIS NÂO SEI COMO RESOLVER POR FAVOR ME AJUDE:
    Como vocês criaram a lista de "Ajuda para Blogs" (melhor dizendo) como vocês selecionaram para "acessórios" ("Código da Caixa de Seguidores do Twitter - Fan Box") e outras coisas. Quero colocar no meu blog tipo assim uma aba "Jogos" e que lá contenha jogos mais não consigo selecionar os jogos e enviar para lá.
    Tomara que entenda! rs
    Obrigado, vlww

    ResponderExcluir
  14. Iuri Ribeiro Silva
    isso são os marcadores do blog

    ResponderExcluir
  15. seria mais fácil assim o código:





    ai era só alterar onde estava escrito USERNAME DO TWITTER AQUI pelo seu twiter e onde esta escrito aiframe trocar por iframe
    mais curto e também funciona!

    ResponderExcluir
  16. o código do jeito que postou no comentário não aparece... envie para meu email e posso testar e depois publicar

    ResponderExcluir
  17. Grande trabalho, sempre que posso dou uma olhada aki para ver as novidades .
    Estou precisando de uma ajuda referente a este codigo mesmo, no meu BLOG não deu serto.
    Ele aparece apenas como um risco azul e masi nada, me ajuda pliz?
    segue o link do meu blog para ver como que ta a situação
    http://h8tephi.blogspot.com/

    ResponderExcluir
  18. provavelmente usou o endereço errado da imagem... tem que ser o direct link

    ResponderExcluir
  19. meu template tbm esta com protetor de link naum consigo tirar por favor quem puder ajudar add ae lucasmiqueiasnickel@hotmail.com

    ResponderExcluir
  20. não podemos ajudar a alterar templates criados por outros sites...

    ResponderExcluir
  21. no internet explorer, não aparece, vc sabe o que pode esta acontecendo?

    ResponderExcluir
  22. talvez seja algo momentaneo do carregamento da pagina... nos testes que fiz funcionou em todos os navegadores

    ResponderExcluir
  23. N to conseguindo.. eu coloco o codigo ae n fica nada lá da erro... ae na parte que eu coloco meu nome eu so coloco @myname ou wwww.twitter.com/@myname ???

    ResponderExcluir
  24. Muito bom o blog!!! Me ajudou bastante na criação e personalização do meu!!! Muito obrigado!!!

    ResponderExcluir
  25. Boa tarde Fabiano! Estou tentando, mas continua só aparecendo uma linha azul. A mudança é somente no nome do usuário no twitter?

    ResponderExcluir
  26. sim, mas precisa colocar igual está no twitter

    ResponderExcluir
  27. oi seu D.B sempre me ajuda mas eu tenho um problema fora deste post, meu blog o moderador de comentarios naum pega mais pq? E lembrando ele esta selecionado na opçao sempre valeu!

    ResponderExcluir
  28. randromedo
    é muito estranho mesmo.. tente desmarcar a opção, salvar e depois marcar novamente... pode ser um erro do blogger.

    veja se o email para notificação está correto

    ResponderExcluir
  29. obrigado ajudou muito entre no meu blog tecno-logiamax.blogspot.com

    ResponderExcluir
  30. Tranquilo!
    Aderi!
    Obrigada pela dica!
    Abraço!

    ResponderExcluir
  31. oi queria saber como faço pra mudar o nome no twitter q ta no meu blog tem como? tipo assim eu coloca meu twitter pra eles segui eu vlw abraço

    ResponderExcluir
  32. é só trocar o endereço do twitter no código

    ResponderExcluir
  33. Não funciona no internet explorer, somente no firefox...

    ResponderExcluir
  34. @Maximus veja se alterou corretamente o seu nome no twitter no código, testei agora e funcionou o código

    ResponderExcluir
  35. Pessola acho que não tá bem explicado por isso muito tão fazendo esse erros!

    Lá onde está escrito dicasparablogs vc trocam pelo nome de usuário seu ou do seu blog!

    Confere: http://bagacadigitalblog.blogspot.com/

    ResponderExcluir
  36. O MEU DEU SUPER CERTO
    PESSOAL NÃO É PRA COLOCAR O LINK OU O @(ARROUBA)
    SÓ COLOQUE O NOME, POR EXEMPLO:
    MEU NOME NO TWITTER É: @QUELLP1
    PORÉM SÓ COLOCO: QUELLP1
    TIRE O ARROUBA,OK!!!
    VAI DAR SUPER CERTO
    ADOREI A DICA ME AJUDOU MUITO
    ESTE SITE ESTA DE PARABÉNS!

    ResponderExcluir
  37. Adorei a caixa. Queria usa-lá, mas as cores não combinam nada com o meu blog, será q não existe uma maneira de edita-lás?

    Abraços e parabéns pelo espaço.

    ResponderExcluir
  38. são códigos de outros sites que fazem a caixa, então fica bem mais dificil personalizar sem gerar erros

    ResponderExcluir
  39. Ficou bom, mas tá sem a linha de baixo. Tu saberia o que eu tenho que fazer/

    ResponderExcluir
  40. não tem como formatar a caixa. ela usa códigos internos dos scripts

    ResponderExcluir
  41. aqui no internet nao ta funcionando, se puder entrar em contato memeligados@hotmail.com, aparece um linha azul clara no internet explorer, firefoz e google tudo beleza

    ResponderExcluir
  42. essas diferenças de navegadores são dificeis de corrigir

    o jeito é usar o código padrão fornecido pelo twitter

    ResponderExcluir
  43. Obrigada pela dica. Sempre encontro o que procuro neste blog. Acho que é o mais completo da web.

    ResponderExcluir
  44. onde personaliza exemplo bordas cores de bordas e entre outros fabiano

    ResponderExcluir
  45. no trecho border: none; você pode alterar a borda, veja aqui: Colocar ou alterar as bordas

    ResponderExcluir
  46. oi parabêns pelo artigo: ja coloquei no meu blog fico otimo brigadâo.

    aqui meu site http://caique-filmes.blogspot.com/ de uma olhada

    entre em contato msn - caique12335@hotmail.com

    ResponderExcluir
  47. tente ver no site do twitter se tem algum outro código para usar no blog.

    as vezes eles alteram o código

    ResponderExcluir
  48. teria como mudas as cores da bordas das caixas do Twitter e face.

    ResponderExcluir
  49. Flávio no código onde está border: none;

    tente usar
    border:1px solid #000;

    isso deve deixar a borda preta então depois é só trocar para a cor que desejar.

    (mas não testei)

    ResponderExcluir
  50. nada aqui!
    testei este,e varios outros codigos e nada de funcionar,nem mesmo o codigo no site oficial http://moopz.com/twitter-fan-box funcionou, testei no opera e firefox!
    vou ve se consigo achar no twitter mesmo, mais sei la, talvez seja alguma incompatibilidade no template, pois com o codigo alguns de meus gadgets ficaram um pouco desconfigurado!
    :(

    ResponderExcluir
  51. não consegui tentei varios codigos encontrados na net e nada mem mesmo o http://moopz.com/twitter-fan-box funcionou, alguem me sabe outra forma

    ResponderExcluir
  52. Daniel se usou varios códigos e nenhum deu certo talvez você tenha alterado algo errado...

    na hora de alterar o código qualquer letra errada não deixa o código funcionar e em alguns casos existe até a diferença entre letra maiúscula e minuscula

    ResponderExcluir
  53. muito bom o post mesmo me ajudou muito e você realmente esta me ajudando muito com seus posts.

    ResponderExcluir
  54. Amigo, boa noite ! Estou enfrentando um grande problema no meu site, tento colocar o link da caixa de seguir no meu site, faço todo o procedimento correeto mas ele não aparece...Poderia me dizer por qual motivo isso acontece...Qualquer resposta da sua parte pode ser feita através do meu Twitter @FaeelOliiveira ....Espero sua resposta

    ResponderExcluir