Adicionar botão TweetMeme no WordPress e Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+

botao-RT Como o Twitter já é uma febre entre nós blogueiros principalmente, sabemos de sua importância na hora de divulgar um conteúdo para atrair mais visitas e conhecemos o poder que tem o RT na difusão de informações. Vou mostrar aqui como adicionar um botão, como da imagem ao lado, para que seus visitantes possam dar RT em seus artigos diretamente da página do seu blog e ajudar na divulgação. Vou mostrar como usa tanto no WordPress.com (padrão), quanto no WordPress.org (com hospedagem) e nos blogs do Blogger.

Fazer download do e-book Como Ganhar Dinheiro com Blog

Primeiro o mais simples e fácil de usar.
WordPress.com (padrão).
Esse é o mais simples de instalar. Apesar do serviço padrão do WordPress ser muito básico, há muita gente que prefere por ser totalmente gratuito e bem intuitivo. São os blogs que têm o endereço do tipo .wordpress.com.

http://<nome_do_blog>.wordpress.com

. Se esse é o seu caso você pode agora usar um “shortcode”, um código curto e objetivo que insere uma função sem você precisar saber nada de HTML.
Adicione no topo do texto em que quer que apareça o botão do TweetMeme, o seguinte shortcode:

[tweetmeme]

Da forma como está escrito acima. Para adicionar isso, vá ao modo HTML do editor de textos, após terminar de digitar o artigo, e coloque isso na primeira linha, como mostra a imagem abaixo:

tweetmeme-wordpress

Se você quiser um modelo de botão mais compacto, que mostra apenas o número de RTs recebidos, basta adicionar o código da seguinte forma:

[tweetmeme style=”compact”]

Ou para que o RT vá com o seu nome de usuário, basta adicionar uma fonte:

[tweetmeme source=”seu_twittername“]

Fonte: Tweetmeme Help – WordPress.com Button Integration.

WordPress.org (com hospedagem).
Para quem usa o WordPress mais avançado, com hospedagem e domínio próprios, é preciso instalar um plug-in para que essa função seja adicionada nas páginas de seus artigos. Depois de instalar o plug-in, basta fazer as configurações no menu do painel de seu blog.

Download do Plug-in TweetMeme WordPress.

Instale normalmente ou copie para a pasta “/wp-content/plugins/” do seu servidor de hospedagem. Depois abra o painel do seu blog e procure pelo menu “Configurações” ~> “TweetMeme” para escolher suas preferências.

Blogger/BlogSpot.
Para adicionar no Blogger você precisa usar um código dentro do código-fonte de seu layout (template). Por isso, antes de prosseguir faça um backup completo e teste esse recursos em um blog de testes para ter certeza do resultado esperado.
Vou mostrar aqui como adicionar o botão logo abaixo do título do artigo, mas você pode ver mais opções de lugar, lendo o seguinte tutorial:

Abra o painel do Blogger e clique em “Layout” ~> “Editar HTML” e em “Expandir modelos de widgets” (para ver o código-fonte completo). Procure pela seguinte linha:


<div class='post-header-line-1'/>
ou
<p class='post-header-line-1'/>

E imediatamente ABAIXO dela cole o seguinte código, só modificando o que está indicado de vermelho:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
tweetmeme_source = 'SEU_NOME_TWITTER';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</b:if>

O código destacado de verde-limão é a condicional que fará o código só aparecer quando o leitor estiver dentro do artigo desejado e impede que o código apareça na primeira página do blog.

Veja também sobre o Twitter e Blogs:

7 Comentários

  1. Muito bom, tinha esse botão no meu blog, mas dai troquei o template e me esqueci aonde tinha achado o código.
    Vlw pela dica!

    Responder

  2. Até que enfim achei como colocava ese botão. Brigadão por colocar essa dica aí. Testei e tá funcionando perfeitamente. =)

    Responder

  3. Coloquei no meu blog mas não tá funcionando muito bem. Na verdade, queria que aparecesse esse ícone na página principal do blog, e por isso tirei as linhas verdes. Tem como fazer esse botão sem ter que entrar na postagem?

    Um abraço

    Responder

  4. @Fábio,
    tirando as linhas verdes e colocando onde foi indicado no tutorial acima, tudo vai funcionar como vc quer.

    Responder

Deixe um comentário

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