Com o tutorial de instalação do botão Topsy surgiram algumas dúvidas sobre formas de personalização e posicionamento. Acredito que essas dúvidas sejam de todos e por isso achei necessário a composição deste post. Aqui irei ensinar como trocar o “tweet” e “retweet” padrão do botão por outras frases, irei comentar um pouco sobre a troca de cores do botão e sobre formas de posicionar o botão (a direita ou a esquerda do conteúdo – com ou sem tabela). Preparado?
Personalizar texto do botão:
O @Papi, no post sobre a instalação do Topsy, me perguntou como faz para trocar os textos “tweet” e “retweet” que vem por padrão no botão. Para personalizá-los siga os passos citados abaixo.
Trocar “tweet”:
Adicione, abaixo do código do seu nick do twitter (ensinado no tutorial de instalação do Topsy), esse código:
var topsy_tweet_text = "tweet";
Troque o “tweet” entre aspas por outro texto.
Trocar o “retweet”:
Adicione esse código e troque o que está entre as aspas (o “retweet”):
var topsy_retweet_text = "retweet";
Os códigos acima devem ficar assim:
<script type="text/javascript">
var topsy_style = "big";
var topsy_nick = "PERFIL DO TWITTER";
var topsy_tweet_text = "tweet";
var topsy_retweet_text = "retweet";
</script>
<script type="text/javascript" src="http://cdn.topsy.com/button.js"></script>
Leia o tutorial “Topsy – outro botão de RT para o seu blog” para saber instalar corretamente.
Personalizar cor:
Não tenho muito o que falar, pois já comentei e ensinei a realizar isso no tutorial de instalação. O código abaixo permite a troca de cor do botão, utilize-o e mude o texto entre aspas para um outro destacado na imagem.
var topsy_theme = "jade";
Opções de cores:
Ao lado das dos botões coloridos você contra os nomes das cores, utilize-os para personalizar seu botão.
Posicionamento do botão:
Sem tabelas:
Você pode posicionar seu botão tanto à direita, quando à esquerda. Confira os códigos abaixo e troque a parte vermelha pelo código (pronto) do seu botão Topsy.
Alinhamento a esquerda:
<b:if cond='data:blog.pageType == "item"'>
<div style="float:left; margin-right:5px;">CODIGO DO BOTÃO</div>
</b:if>
Alinhamento a direita
<b:if cond='data:blog.pageType == "item"'>
<div style="float:right; margin-left:5px;">CODIGO DO BOTÃO</div>
</b:if>
Com tabelas:
Esse modo foi ensinado no post de instalação, botão de retweet + banner de publicidade. Para inverter os dois, ou seja, colocar o botão ao lado direito e o banner no lado esquerdo, utilize o código de tabela abaixo:
<b:if cond='data:blog.pageType == "item"'>
<table
style="border: 1px solid rgb(255, 255, 255); background:rgb(255, 255, 255);text-align: left; width: 100%;" cellpadding="2" cellspacing="2 ">
<tbody>
<tr>
<td valign="undefined" align="left">CÓDIGO DO ANÚNCIO</td>
<td valign="undefined" align="undefined"> CÓDIGO DO TOPSY </td>
</tr>
</tbody>
</table> </b:if>
NOTA: O Topsy, assim como o TweetMeme recolhe as informações para o retweet através do navegador, ou seja, se você instalar os botões na página inicial e clicar no botão, você vai retwuitar a página inicial. Entendeu? Por isso recomendo (e ensino) a instalar somente nas páginas dos posts.
PS: Essa regra não serve para o plugin para o Wordpress do Topsy!
Espero que você tenha gostado, essas são algumas formas de personalizar seu botão do Topsy. Até a próxima. ;D
