terça-feira, 4 de maio de 2010

Como colocar o Tweet Box no Blogger

ATUALIZAÇÃO (23/03/2013): O Twitter fechou a plataforma Anywhere em 05/03/2013, pois lançou novos recursos de integração com os sites. Além disso, com a mudança das URLs no Blogger, essa funcionalidade teria que ser refeita e há muito tempo eu tinha deixado de usá-la. Infelizmente, esse recurso foi bom enquanto durou!

Como alguns já puderam notar, na barra lateral ao lado, há uma caixa de texto (Twitter Box) destinada à postagens no Twitter direto do meu blog. Esse recurso é uma das novidades vindas da ferramenta @anywhere disponibilizada pelo próprio Twitter, no sentido de haver uma integração maior entre sites/blogs e o microblog.

Quando você escreve um tweet, e clica no botão "Tweet",abre-se um popup para autorizar que a minha aplicação(que no caso é o meu blog) se conecte com a sua conta. Assim é feita a integração.


Para colocar uma caixa do Twitter ou TwitterBox como está ao lado, você tem que primeiro registrar as suas apps no site do Twitter Anywhere conforme descrito neste post, e colocar o código fornecido entre as tags <head> e </head<.

Feito isso, em seu painel de controle do Blogger, vá em Layout >> Elementos de páginas >> Clique em Adicione um Gadget no lugar onde você queira que a caixa fique >> No popup, clique em HTML/JavaScript, para colocar o código que está abaixo:
<div id="tbox"></div>
<script type="text/javascript">
 twttr.anywhere(function (T) {
      T("#tbox").tweetBox({
      height: 30,
      width: 340,
      defaultContent: "<Escreva o seu Tweet aqui>",
      label: "O que está acontecendo?"
    });
  });
</script>
No código acima, coloquei algumas pré-definições que usei no meu blog, e que você pode alterar como se segue:

Em "height", coloque a altura em pixels que você quer na caixa.
Em "width", coloque o comprimento da caixa de acordo com a largura da sua coluna.
Em "defaultContent", você coloca um texto prévio como no exemplo.
Em "label", Você coloca o título da caixa: "O que está acontecendo", "O que você está fazendo", etc.

Além disso, você pode adicionar uma outra caixa, como eu fiz, no sentido de já pré-definir um tweet que alguém queira te enviar, assim o código fica como se segue:

Obs.: O código aqui colocado entrou em conflito com o código na barra lateral. Portanto estou disponibilizando-o no Google Docs:


Na 2ª caixa, em "defaultContent", coloque o seu nome de usuário no Twitter. O resultado pode ser visto ao lado na barra lateral.

Assim, qualquer pessoa estando em seu site/blog , pode "twittar" a vontade. Interessante, não?

Este tutorial foi feito para quem tem blogs no Blogger, espero que alguém possa fazer o mesmo para quem usa outras plataformas, já que não são do meu conhecimento!

14 comentários:

  1. Não tem como colocar apenas a segunda parte do código? Fiz isto e apareceu a box inteiro como está na sua sidebar, com o defaultContent [mensagem escrita] duplicada. Seria até legal colocar como sistema de comentários para twittar, não acha?

    ResponderExcluir
  2. Luma: Pegue o código como está na caixa e altere no [defaultContent: "",] para [defaultContent: "nome-de-usuario-no-twitter",] e [label: "O que está acontecendo?"] para [label: "o-texto-que-você-quiser"].
    Só uma pergunta; você já registrou sua app conforme descrito no meu outro post que está linkado?

    ResponderExcluir
  3. Tá registrado, Cidão! Mas toda hora que entro no twitter aparece uma mensagem dizendo que a minha url é inválida. Não sei o que aconteceu! Verifiquei e está tudo certo!

    ResponderExcluir
  4. Luma: Você deve ter errado em alguma URL. Certifique-se se você colocou os códigos e os dados corretamente. Antes de colocar aqui, apliquei tudo em blogs de testes e tudo correu normal.

    ResponderExcluir
  5. opa!! Adorei, instalei num blog de teste e já vou colocar no meu blog principal...valeuuu Crazy!!

    bjuss

    ResponderExcluir
  6. Ah, Crazy!
    Meu Twiter esta com birra. Não consigo acessar...
    Estou no Face...hehe!

    ResponderExcluir
  7. Ou queridão, obrigado por partilhar essa opção tão valiosa.

    Explorando gostaria de perguntar, como fazer pra colocar a twitbox com mensagem diferente pra cada postagem, igual aqui no blog.

    Abrass,
    Misael M.

    ResponderExcluir
  8. @Misael M.


    Assim que o Twitter liberar o encurtamento de links t.co, eu publico.

    ResponderExcluir

Pessoal, comentem, críticas e elogios serão bem aceitos. E eu respondo, posso demorar mas respondo. Esse velho lobo do mar tarda mas não falha!!!!

Leia antes a minha Política de Comentários.

Se quiser deixar o link de uma postagem sua, utilize o código abaixo trocando o que está escrito em letra maiúscula:

<p><abbr><em><strong>SEU NOME</strong> - último post do blog... <a href="<strong>LINK-DA-POSTAGEM</strong>"><strong>TÍTULO DA POSTAGEM</strong></a></em></abbr><p>

Artigos recentes

Related Posts with Thumbnails
Google