O Twitter está expandindo suas funcionalidades para o mundo da web. Tudo começou com o botão oficial de tweet, depois a Plataforma Twitter Anywhere, e recentemente o novo botão oficial de seguir do Twitter. Você provavelmente está se perguntando o que diabos é este botão de seguir do Twitter? O que há de diferente no botão de seguir do Twitter e no botão de seguir inteligente? Não se preocupe, neste artigo cobriremos o que é o botão de seguir do Twitter e como você pode adicioná-lo ao seu site WordPress.
O que é o Botão de Seguir do Twitter
O botão de seguir do Twitter é um pequeno widget que permite aos usuários seguir facilmente sua conta do Twitter (ou qualquer conta do Twitter) de qualquer site. O botão de seguir usa o mesmo modelo de implementação do botão oficial de tweet, e é realmente simples de integrar. Você pode ver a demonstração do botão de seguir no canto superior esquerdo da imagem abaixo. Quando você clica no botão de seguir, uma janela se abre com mais informações sobre o usuário.
Você provavelmente está se perguntando como ele é diferente do botão de seguir inteligente abaixo?
Bem, o botão de seguir inteligente exige que você faça toda a integração do Twitter Anywhere. Ele também não permite que você mostre sua contagem de seguidores ou faça qualquer personalização. Enquanto o botão de seguir do Twitter permite que você mostre a contagem e é muito fácil de integrar. Confira o exemplo ao vivo abaixo (não se esqueça de clicar em seguir para ver o que ele faz):
Como Adicionar o Botão Oficial de Seguir do Twitter no WordPress
Você pode ir para a página Botão de Seguir e gerar um código para você. Ou você pode simplesmente copiar o código abaixo:
<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>
P.S. Certifique-se de alterar o nome de usuário pelo seu.
Se você estiver usando o botão oficial de tweet, então você não precisa colar o script duas vezes. Assim, seu código ficará assim:
<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>
Agora você pode colar o código em qualquer lugar que desejar no seu tema WordPress. A maioria das pessoas colocará esse código no arquivo sidebar.php. No entanto, se você não se sentir confortável editando um arquivo de tema, você também pode utilizar os widgets de tema do WordPress. Todos os bons temas vêm com barras laterais prontas para widgets. Então, tudo o que você precisaria fazer é ir para a aba Aparência » Widgets. Em seguida, adicione um widget de texto à sua barra lateral apropriada. Por último, cole o código acima, e pronto. Veja a captura de tela abaixo para o exemplo:
Realmente não há necessidade de adicionar um plugin para fazer algo tão simples quanto isso.
Personalização Avançada
Esta seção é para designers e desenvolvedores que desejam personalizar ainda mais este botão para combinar com o esquema de cores do site, etc. O Twitter permite que você personalize a cor do botão, a cor do texto, a cor do link, o idioma, o widget e o alinhamento do plugin.
Variáveis disponíveis na versão JavaScript que estamos usando:
- data-show-count (true ou false)
- data-button (blue ou grey)
- data-text-color (código hexadecimal)
- data-link-color (código hexadecimal)
- data-lang (en, fr, de, es) – usa o código de idioma ISO-639-1 de duas letras
- data-width – (300px)
- data-align – (right)
Se você quiser especificá-lo em um código, ficaria algo assim:
<a href="http://twitter.com/wpbeginner" class="twitter-follow-button">Follow @wpbeginner</a>
Recursos:
Biodun
Olá,
Tentei aumentar a largura com a opção “data-width=300px”, mas não está funcionando.
Pj Germain
ÓTIMO! Eu não queria instalar mais um plugin e isso funcionou perfeitamente! Sei que é um post antigo, mas ei, você acertou em cheio!!!
Muito obrigado!
Verity
Olá, obrigado pelas informações. Adicionei isso à minha página HTML, mas o link aparece apenas com texto (ou seja, meu nome do Twitter) e não com o botão oficial do Twitter. Algum conselho? Agradeço antecipadamente.
Si Sai
Olá
e se eu tiver vários autores no meu blog e quiser que o botão de seguir no Twitter de cada autor seja exibido para as postagens que eles enviaram?
Chris Q
Isso é ótimo! Obrigado.
Construí meu blog do zero, sem nenhum conhecimento prévio, e recursos como o seu foram inestimáveis ao longo do caminho.
Tenho uma pergunta, porém: há alguma maneira de ocultar ou remover o contador? Ele está meio obscurecido por uma imagem, então pensei em simplesmente removê-lo. Tentei excluir o que pensei ser a parte óbvia do código, mas ainda está lá.
Nadia
Consegui que o botão postasse perfeitamente e ele linka e tudo mais, mas não sei como mudar a localização dele. Coloquei no meu cabeçalho, mas quero que o botão apareça bem ao lado do meu ícone do FB e, no momento, ele está sendo parcialmente coberto por outra imagem no cabeçalho. Sugestões??
Nadia
Deixa pra lá, CONSEGUI!!! Uhuuu
Nadia
Para quem mais estiver tendo esse problema-
Eu postei o link fornecido nesta página na minha seção de cabeçalho. Para editar a localização, você precisa ir para a seção de estilo. Usei este código:
.twitter-follow-button{ display:block; position:absolute; top:60px; right:-170px; width:32px; height:32px;
Judy Hochberg
Instalei em um widget de texto, e parece bom no meu blog, mas não entendo como funciona. Quando um usuário clica nele, o que acontece? Como o WordPress ou o Twitter sabem quem é o potencial assinante?
Quando tento clicar nele, recebo uma mensagem pop-up que diz algo como “Você agora está inscrito em @meu_manipulador_do_twitter.” A mensagem é a mesma, quer eu esteja logado no site ou não. Então, como minha identidade é conhecida?
Punit Bhalodiya
ótimo post para iniciantes em WP, obrigado..!!!!!!
Pritam Patil
You are the real wp rockstart man !! its working ..and lets hope i get more followers
Gemma
Olá,
Segui as instruções e funcionou – o botão aparece e, quando testei, ele leva para o meu Twitter. No entanto, o widget também mostra o código HTML embaixo do botão de seguir no meu blog. Existe alguma maneira de ocultar o código e deixar apenas o botão?
Obrigado
Equipe Editorial
Parece um erro de copiar/colar porque o widget não deveria mostrar nenhum código html.
Admin
David M. Perkins
Ok, infelizmente isso não funcionou. Há algum outro lugar onde posso procurar ajuda?
Equipe Editorial
Qual parte não funcionou? Que erro ele mostra?
Admin
David M. Perkins
As instruções acima não ajudaram em nada – mas felizmente encontrei outra maneira através dos plug-ins (depois de algumas *horas* que nunca mais recuperarei). Você tem que se lembrar que isso é chamado de “WPBeginner” – ênfase em “Beginner” (iniciante), e dizer a alguém para postar código aleatoriamente sem apresentar *todos* os passos: faça isso primeiro, depois clique naquilo, que mostrará isso, etc. (alguns de nós “iniciantes” somos diplodocos digitais completos, sabe?), não é útil.
De qualquer forma, eu consegui – mas *não* seguindo as instruções acima.
Equipe Editorial
Olá David,
O motivo pelo qual dizemos para colar em qualquer lugar do seu tema é porque não sabemos onde você quer adicioná-lo. Pode ser no cabeçalho, barra lateral, rodapé, após cada postagem, etc. Todas essas são localizações diferentes. Além disso, mencionamos que você pode ir em Aparência » Widgets e adicioná-lo no widget de texto. Você pode colocar o widget de texto nas áreas de widget apropriadas (suportadas pelo seu tema). Algumas têm áreas de widget no rodapé, mas a maioria tem na barra lateral.
David M. Perkins
@ Editorial Staff disse ~
“O motivo pelo qual dizemos para colar em qualquer lugar do seu tema é porque não sabemos onde você quer adicioná-lo. Pode ser no cabeçalho, barra lateral, rodapé, após cada postagem, etc. Todas essas são localizações diferentes.”
Meu ponto era que as instruções poderiam ter dito: “Se você quiser colocá-lo na sua barra lateral, vá *aqui*, clique em *aqui*, o que mostrará *isto*, e então cole o texto *ali*. Se você quiser que ele apareça no final do seu post, vá *aqui*, clique em *aqui*, o que mostrará *isto*, etc.” Ainda tenho o código, que não fez o botão aparecer, colado *em algum lugar* na minha página de painel – mas só os deuses sabem onde está no momento.
Novamente – alguns de nós *são* iniciantes aqui – e diplodocos digitais – e iniciantes às vezes precisam de uma mão gentil, amável e *guiadora* para chegar onde queremos ir, não é mesmo?
Equipe Editorial
Olá David,
Embora entendamos exatamente o que você está dizendo, é mais difícil do que parece. Cada tema do WordPress é codificado de forma diferente (tema geral, temas filhos baseados em vários frameworks, etc.). Além disso, não podemos cobrir todos os locais possíveis que um cérebro humano pode pensar para exibir o botão. Este é o motivo pelo qual cobrimos o local mais básico (Aparência > Widgets). Dependendo do tema, você terá widgets para sua barra lateral, cabeçalho, rodapé, etc.
Temos uma visão geral detalhada de widgets em nossos vídeos gratuitos aqui: http://videos.wpbeginner.com/
eggtartbox
Eu tentei e ele linka para o meu twitter, mas como texto normal... seria porque estou em um blog wordpress.com?
Alyssa
Eu tenho o mesmo problema. Ele linka para o meu twitter, mas não mostra o botão. Alguma ideia de como consertar isso?
Gorn
@wpbeginner Na verdade, nenhum dos dois. É uma facilidade do WordPress hospedada pela CIX em blog.cix.co.uk.
Eu agora consegui fazer funcionar, mas usando os botões do twitter no "estilo antigo" em http://twitter.com/about/resources/buttons – não consegui fazer funcionar nem a forma "script" nem a forma de shortcode. Alguma ideia do porquê?
wpbeginner
@Gorn Você está fazendo isso em um blog do WordPress.com ou em um blog auto-hospedado?
Gorn
Obrigado por isso. No entanto, não funciona para mim. Quando salvo o widget de Texto, o elemento script é removido e acabo apenas com um link de texto na minha barra lateral. Alguma ideia?
TheNerdyNurse
boa adição. Sinto que meu site já carrega muito devagar. Preocupado que isso seja apenas mais uma coisa para desacelerá-lo. Eu realmente preciso descobrir o que está causando o atraso no carregamento.
jasonfox_me
Obrigado pela dica. Peguei o código do Twitter e parecia bom (que tolo eu por não testar) outro dia meu amigo me diz que ele tentou me seguir e apareceu usuário não existe. Por algum motivo, ele deixou meu antigo identificador no código... apenas um aviso.
TheFadeMusic
@wpbeginner LUMIX DMC-GF3s http://t.co/8wwbZSR
wpbeginner
@likewpcom o que na maioria dos casos não seria necessário.
likewpcom
Outra maneira de adicionar o botão do Twitter é instalar um plugin do WordPress como http://goo.gl/EHyex
AlbertAlbs
Sim. Eu já fiz isso. Ganhei muitos seguidores depois de adicionar aquele botão de seguir do Twitter.