Meio Bit » Arquivo » Internet » Botões do Twitter e Facebook em blogs WordPress

Botões do Twitter e Facebook em blogs WordPress

Aprenda como inserir os botões oficiais do Twitter e do Facebook em seu blog movido a WordPress.

13 anos e meio atrás

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.

Leia mais sobre: , , , .

relacionados


Comentários