quinta-feira, 21 de outubro de 2010

Tweet Button oficial no blogspot

Há outras formas de colocar o Tweet Button no seu blog. Eu vou abordar  a mais "complicada" ;)

Ao editar o HTML do blogspot você o faz na verdade em XML. É um formato de XML que dirá ao mecanismo do blogger como será seu HTML depois. E esse XML aceita alguns "comandos" como veremos.

O botão Tweet é uma tag de âncora de hiperlink <a> comum que além dos atributos class e href possui esses atributos especiais, tradados pelo script que vem junto:


data-count='vertical'  --> tipo de contador: pode ser vertical, horizontal ou none
data-via='vitorrubio' --> seu nome  no twitter
data-text='titulo do post'  --> título do post :p
data-url='url do post' --> url do post ;)



Dentro de marcadores de tags < > você não pode colocar outros marcadores como estes. E para obter automaticamente o titulo do post e a url devemos usar os já ditos "comandos" do blogspot.

Para obter o títilo do post você deve utilizar data:post.title e para obter a url você deve utilizar data:post.url.

No entanto para utilizar os comandos citados você não pode simplesmente atribuí-los aos atributos, mas deve preceder os nomes dos atributos com "expr:" para que eles possam ser "calculados" antes de "montados".

Ou seja, colocar:



data-text='data:post.title'  
data-url='data:post.url' 
Estará errado pois fará com que seu título se torne a palavra "data:post.title" e a url seja a expressão "data:post.url" em vez dos respectivos título e endereço corretos. Você deve preceder os atributos com expr: assim:

expr:data-text='data:post.title' 
expr:data-url='data:post.url' 

Se quiser "concatenar" ou adicionar algo mais no titulo deve "somar" com a sua mensagem envolvendo em aspas, mas deve usar "&quot;" uma "html entitie" que se tornará aspas depois do cálculo. Não use aspas "de verdade"

expr:data-text='data:post.title + &quot; algo mais que eu queira dizer &quot;' 
expr:data-url='data:post.url' 

O código completo "normal" ficará assim:

<a 
  class='twitter-share-button' 
  data-count='vertical' 
  data-via='vitorrubio' 
  expr:data-text='data:post.title' 
  expr:data-url='data:post.url' 
  href='http://twitter.com/share'>Tweet</a>
   <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>


Com o resultado:




O código com "um algo mais" ficará assim:

<a 
  class='twitter-share-button' 
  data-count='vertical' 
  data-via='vitorrubio' 
  data-text='Teste de Tweet Button no Blogspot' 
  expr:data-url='data:post.url' 
  href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Com o resultado:





Espero ter ajudado ;)

4 comentários:

  1. Olá... coloquei o tweet button como instruída no meu blog, gostaria de saber como coloc-alo a direita das postagens?
    Obrigada.

    ResponderExcluir
  2. Oi Mell, obrigado pelo feedback.
    Tudo depende de como é o template do seu blog, o HTML e o CSS dele. Você quer colocar o botão à direita da postagem ou à direita do título da postagem?
    Passe o link do seu blog para eu ver.

    ResponderExcluir
  3. Valeu msm cara!! Tava procurando isso a dias! Só achava como colocar o botão, mas nunca funciona para divulgar o post, só dava pra divulgar o blog, pra divulgar o post tinha q entra nele.

    Muito obrigado msm!!

    ResponderExcluir
  4. Teu posto realmente nos ajudou, obrigado

    ResponderExcluir

Postagens populares

Marcadores

delphi (60) C# (31) poo (21) Lazarus (19) Site aos Pedaços (15) sql (13) Reflexões (10) .Net (9) Humor (9) javascript (9) ASp.Net (8) api (8) Básico (6) Programação (6) ms sql server (5) Web (4) banco de dados (4) HTML (3) PHP (3) Python (3) design patterns (3) jQuery (3) livros (3) metaprogramação (3) Ajax (2) Debug (2) Dicas Básicas Windows (2) Pascal (2) games (2) linguagem (2) música (2) singleton (2) tecnologia (2) Anime (1) Api do Windows (1) Assembly (1) Eventos (1) Experts (1) GNU (1) Inglês (1) JSON (1) SO (1) datas (1) developers (1) dicas (1) easter egg (1) firebird (1) interfaces (1) introspecção (1) memo (1) oracle (1) reflexão (1)