Botão enviar postagem para o Twitter

O Twitter se tornou uma grande fonte de divulgação de um blog/site. O comum agora é surgir novos gadgets para interar ainda mais esse serviço aos blogs.

O botão enviar para o twitter é um desses serviços. Ele fica disponível a todos os visitantes, assim se a pessoa gostar da matéria e quiser divulgar pelo twitter, o botão organiza tudo!

Antes de começar, recomendo que faça backup de seu template. Por segurança.

Vamos ao que interessa!

1º - Faça login no Blogger. Entre em “Layout” -> “Editar HTML”. Depois marque a caixa: “Expandir modelos de widgets”.

2º - Agora você deve escolher a opção de local onde vai ficar o widget e o tipo (completo ou compacto).

• Primeira Opção: Botão ao lado direito do título do post

Procure (Ctrl + f) por:

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

ou

<div class='post-header-line-1'>

ou

<div id='post-header-line-1'/>

ou

<div id='post-header-line-1/>

Escolha a forma do botão abaixo e insira o código ACIMA do lugar encontrado:

• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

OU

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.

Exemplo: pauloestevao

Agora teste, se tudo estiver certo, salve.

• Segunda Opção: Botão abaixo da postagem

Procure por:

<div class='post-footer'>

ou

<div id='post-footer'>

Cole o seguinte código DEPOIS:



• Para botão completo

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

OU

• Para botão compacto

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Usuario_ Twitter';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Agora edite a parte VERMELHA, colocando no lugar de Usuário_Twitter o nome de login do seu Twitter.

Exemplo: pauloestevao

Teste e salve.

Widget contador de assinantes feed e seguidores do Twitter

Atualizado! 05/02/2010 Atualizado! 25/03/2010



Alguns dias atrás publiquei aqui no Códigos Blog um script que mostra em forma de texto o número de assinantes feed de qualquer blog e fiquei devendo o contador de seguidores do Twitter. Pois é, não consegui desenvolver um contador de seguidores como prometi, no entanto o Marcos Lemos do Ferramentas Blog conseguiu arrumar o tal script.

O Marcos está com alguns problemas no servidor do widget e com minhas artimanhas e algumas dicas do Fernando, consegui criar o código para ler o número de seguidores do Twitter e com isso o widget está completo e funcionando.

Obs.: O contador de seguidores do Twitter foi programado para ser atualizado de 2 em 2 horas. Além disso vou ter acesso aos usuários desse widget, então pense antes de retirar os créditos. ;D


Com esse post, vou divulgar o widget de assinantes feed + seguidores Twitter. Siga os passos abaixo:



1º- Faça login no Blogger, entre em “Layout” -> “Elementos da página”, clique em “Adicionar um Gadget” -> “HTML/Java Script”

2º - Ao abrir uma janela cole o seguinte código abaixo:

<div align="center">

  <div style='width: 170px; height: 112px; border: 4px #EFEFEF solid;   margin: 0; padding: 0; background: #fff; font-family: "Times New Roman",   Times, serif;'>

  <div style='width: 170px; height: 40px; float: left; padding:   8px;'><img   src="http://codigosblog.net/servidor/widget_twitter+feed/feed-icon.png"   width="40" height="40" style="margin-right: 8px; float: left;"/>   <a href="http://feeds.feedburner.com/NOME_DO_FEED" target="_blank" ><span style="float: left;   margin-top: 2px; padding: 0; font-size: 17px; color: #000066;   font-family: "Times New Roman", Times, serif;">

  <script language='javascript' type='text/javascript'   src='http://www.codigosblog.net/servidor/contadorfeed.php?uri=NOME_DO_FEED'></script>   leitores</span><br/>

  <span style="float: left; margin: 0px; padding: 0px; font-size: 12px;   color: #000066; font-family: "Times New Roman", Times,   serif;">assine o feed</span></a>
  </div>
  <div style='width: 170px; height: 40px; float: left; padding:   8px;'>
  <img   src="http://codigosblog.net/servidor/widget_twitter+feed/twitter-icon.gif"     width="40" height="40" style="margin-right: 8px; float: left;" />
  <a href="http://www.twitter.com/SEU_USUÁRIO_TWITTER"   target="_blank" ><span style="float: left; margin-top: 2px;   padding: 0; font-size: 17px; color: #000066; font-family: "Times New   Roman", Times, serif;">

  <script type='text/javascript'   src="http://www.codigosblog.net/servidor/contadorTwitter/seguidores.php?usuario=SEU_USUÁRIO_TWITTER"></script>   followers</span><br/>

  <span style="float: left; margin: 0px; padding: 0px; font-size: 12px;   color: #000066; font-family: "Times New Roman", Times, serif;">siga   no twitter</span></a>
  </div>
  </div>

  <span style="font-size: 10px; font-family:Arial, Helvetica,   sans-serif; padding: 2px 0px 0px 0px; margin:   0;"><small><script language='javascript'   type='text/javascript'   src='http://www.codigosblog.net/servidor/widget_twitter+feed/widget+codigosblog.js'></script></small></span>
  </div>

Substitua:

• NOME_DO_FEED pelo nome do feed do seu blog.

Exemplo: http://feeds.feedburner.com/codigosblog (no caso o NOME_DO_FEED é: codigosblog)

• SEU_USUÁRIO_TWITTER pelo nome de usuário do seu Twitter.

Exemplo: http://twitter.com/pauloestevao (no caso o SEU_USUÁRIO_TWITTER é: pauloestevao)

Obs.: Coloque o nome de usuário do Twitter todo em letras minúsculas! Se colocar alguma letra maiúscula o widget não vai funcionar.


Lembre-se: Existem quatro modificações a serem feitas.

3º - Depois que modificar é só salvar. Não tem problema algum em modificar o widget, basta não retirar os créditos.

4º - Para o contador de assinantes feed funcionar, você deve liberar a funcionalidade diretamente no FeedBurner.

Entre no site http://www.feedburner.com/ , faça seu login, acesse a conta desejada.

Acesse a aba: “Publicize” (Publicar) e clique em “FeedCount” (FeedCount) localizado no menu lateral. Após isso clique em “Activate” (Ativar).

Pronto! O contador está ativado.

Como colocar o Tweet Button oficial do Twitter em seu blog

O Twitter lançou essa semana o seu Tweet Button oficial. O recurso é muito parecido com o botão curtir do Facebook. Como o Twitter é uma importante fonte de visitas e divulgação para blogs, vou ensinar como colocar o botão do Twitter no blog.

Basta seguir os passos e colocar o botão em seu blog:

1. Acesse a página do Twitter em https://twitter.com/goodies/tweetbutton.
2. Escolha o tipo de botão que deseja.
3. Recomende um usuário do Twitter, basta colocar o nome de usuário dele, sem o @. Você pode sugerir até 2 usuários, entre eles você mesmo.
4. Copie o código gerado.
5. Abra a área administrativa de seu blog e procure o local que deseja colocar o botão.
6. Cole o código nesse local.

Veja abaixo como ficou nosso botão. Teste, é muito interessante o resultado e a facilidade.