Botões do Twitter e Facebook em blogs WordPress

Depois de muita espera, o Twitter finalmente lançou seu botão oficial, o Tweet Button. Junto do Facebook, a melhor forma de se obter tráfego oriundo de mídias sociais agora fornece, também, uma opção central para que sites do mundo inteiro fomentem o compartilhamento de links dentro dessas redes.

Nossa plataforma de blogs favorita, o WordPress, também não ficou para trás e, no dia do lançamento do Tweet Button, já havia inúmeros plugins no diretório oficial baseados nele. Com tantas opções ao alcance de um clique, qual escolher? E como fazer com que o novo botão conviva pacificamente com o “Like” do Facebook?

Existem diferentes combinações de plugins, e dá para fazer o mesmo sem a ajuda de nenhum, trabalhando diretamente no código. O passo-a-passo abaixo, entretanto, faz uso de dois plugins, um para cada rede, que, depois de configurados, ficam lado a lado, dessa forma:

Botões do Twitter e Facebook, lado a lado.

Vale lembrar que a dica vale para o WordPress self-hosted, aquele baixado no .org e instalado num servidor próprio. No WordPress.com, a Automattic implementou apenas o Tweet Button. Para habilitá-lo lá, vá ao Dashboard do seu blog, expanda o item “Aparência”, entre em “Extras” e marque o item “Show a Twitter ‘Tweet Button’ on my posts”.

Voltando ao tutorial em si, o primeiro passo é instalar os plugins. Os dois que utilizo são:

A instalação pode ser feita na própria área administrativa do WordPress, basta pesquisar pelos nomes dos plugins e, ao encontrá-los, clicar em “Instalar”.

Após a instalação, ambos criam entradas no menu “Configurações”. O set de configurações mostrado abaixo deixa os dois botões no rodapé de cada post, na sequência Twitter, Facebook, conforme a imagem acima.

Abra as opções do fbLikeButton. Existe uma pré-visualização do botão, que ajuda na configuração. Existem diversos parâmetros opcionais, como layout e esquema de cores. O importante a ser feito é desmarcar a primeira caixa de seleção (“display Above the content?”), que remove o botão do início dos posts, e aumentar o tamanho da largura do iframe. Para um tema com área de conteúdo de 640 pixels, como é o caso do TwentyTen (tema padrão), 500 pixels ali está de bom tamanho.

Configurações do fbLikeButton.

Mais um detalhe: é preciso posicionar o botão manualmente, via CSS, utilizando a classe fornecida pelo plugin. Por padrão, é fbLikeContainer. Copie-a, vá ao editor de temas (“Aparência”, “Editor”), abra a folha de estilo (style.css), role a página até o final e acrescente a seguinte linha ao seu código, salvando logo em seguida:

.fbLikeContainer { float: right }

Tudo pronto, agora vamos configurar o WP Tweet Button. Expanda o menu “Configurações”, e clique no item do botão do Twitter.

Novamente, há um grande número de opções aqui. A primeira providência é, a exemplo do que foi feito com o plugin do Facebook, limitar o aparecimento do do Twitter ao rodapé dos posts. No menu “Position”, selecione “After”.

Para que ambos os botões tenham tamanhos parecidos e fiquem alinhados, selecione o modelo “Horizontal” ou “No Count”. Abaixo dessa opção, coloque seu perfil no Twitter em “Your Twitter username”.

Um aspecto legal desse plugin é que ele tem campos para edição de CSS inline, fazendo com que toda a configuração seja feita nessa página mesmo, sem precisar recorrer ao editor de temas do WordPress. O código, a ser inserido em “Container style”, é o seguinte:

float: left; margin-bottom: 18px

O alinhamento à esquerda faz contraponto com o do Facebook (alinhado à direita). A margem inferior serve apenas para distanciar o botão das meta informações que geralmente sucedem os posts.

Configurações do WP Tweet Button.

Salve, e sua dupla de botões sociais oficiais estará pronta para ação, apenas no aguardo dos leitores. Quer ver ao vivo? Dê um pulo no Kindinho, novo blog sobre ereaders com foco no Kindle, da Amazon.

Relacionados: , , , , ,

Autor: Rodrigo Ghedin

Blogger, bacharel em Direito e acadêmico de Sistemas de Informação.

Compartilhar
  • Deu um PowerUP no kindinho? Saiu do blogger? Gostou mesmo dessa idéia, 🙂

    []’s

    • @Marcelo Gouveia, sim, a ideia “vingou”, e o Blogger, por melhor que esteja, não bate o WordPress em praticidade e recursos 🙂

      []’s!

  • E aqui eu ensino a colocar o botão em qualquer website. [/jabá]

  • opa, eu só adicionei a parte “Container style” do twitter button, e ele ajustou sozinho. nao precisei arrumar nada no CSS do fb.

  • No meu blog não deu certo, o do Twitter fica em cima do Facebook 🙁 http://www.vidadegamer.com.br/samba-do-aviao/

    • @Dori Prata, Agora deu certo, o problema estava na largura que coloquei no plugin do Facebook =/

  • rubyneto

    Olá, editei o CSS um pouco diferente aqui e ficou bom, dei um float:left no Twitter e não fiz nada no FB.

  • Aranda Erickson

    No meu caso, quando clico em curtir, é publicado no Facebook, a imagem do autor do posto e não a imagem do post. Tem como mudar isso?

  • Excelente postagem. Obrigado por compartilhar seu conhecimento.

  • sadsad

  • Genesiseries

    teste

  • Obrigado pela dica. No meu site funcionou. Para acrescentar também o G+ usei o Google+ plugin e estilizei a classe wdgpo da mesma forma que você fez para o a fbLikeContainer.

Aproveite nossos cupons de desconto:

Cupom de desconto Walmart, Cupom de desconto Ricardo Eletro, Cupom de desconto Extra, Cupom de desconto Martins Fontes Paulista, Cupom de desconto Empório da Cerveja