sábado, 17 de abril de 2010

Como colocar o Twitter Anywhere 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!

O Twitter lançou nesta semana uma ferramenta que já tinha sido anunciada mês passado no SXSW (feira de tecnologia), trata-se da plataforma @anywhere, um conjunto de códigos em javascript para colocar em qualquer site/blog, no sentido de integrá-lo com o Twitter.

Assim,ao navegar em outros sites/blogs, os visitantes poderão interagir normalmente como se estivesse no próprio Twitter. A plataforma @anywhere vai suportar o autolink de usuários, hovercards, botões de seguidores, caixas de tweets e opções de login/signup, conhecido como Twitter Connect (algo semelhante ao Facebook Connect).

No momento, eu coloquei a ferramenta no sentido de não precisar mais de colocar o link do usuário no Twitter num determinado post, colocando @ mais o nome de usuário, aparecerá um hovercard com as informações necessárias e um link para seguí-lo. Prático não? Mais informações e outras funcionalidades, vocês poderão verificar no Twitter Developer Documentation. Com o tempo, adicionarei mais coisas, assim que estudar mais a ferramenta.

Para registrar as suas APPs, vá no Site do Twitter Anywhere:


Clique em "Start using Now" , e em seguida preencha o formulário abaixo:


Em Application name, coloque o nome da sua aplicação, eu coloquei Crazyseawolf
Em Application Website, coloque o site/blog onde será colocado.
Em Organization, eu coloquei  Crazyseawolf
Em Callback URL, coloque o site/blog onde vai ser feita a autenticação, ou seja no próprio.
Em Application Icon, você coloca um ícone. Isso eu não fiz,deixei para depois.
Coloque as palavras de verificação, e clique em register Application.
Aparecerá outra tela onde um código javascript será fornecido para ser colocado no header de seu site/blog.
Copie e cole esse código. Pronto, o @anywhere está instalado em seu site/blog.

Mas nem tudo são flores... O Blogger não aceita scripts em seu Header, você terá que colocá-lo entre as tags <head> e </head>. O código fornecido é semelhate ao que está abaixo:

<script src="http://platform.twitter.com/anywhere.js?id=SEU-API-KEY&amp;v=1"> 

</script> 
<script type="text/javascript"> 
twttr.anywhere(function(twitter) {
twitter.hovercards();
});

</script> 

Outro problema: o template do Blogger não aceitará o código acima do jeito que está escrito, você terá que transformá-lo numa linguagem que ele entende. No link a seguir, há uma ferramenta para fazer a decodificação do seu código.
Eu poderia colocar o código parseado aqui, mas não consegui fazer isso, o editor de posts não está permitindo. Se algém souber, por favor dá um help.
Ele ficará assim para colocá-lo no código do seu template:


<head>
&lt;script src="http://platform.twitter.com/anywhere.js?id=SEU-API-KEY&amp;v=1"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
twttr.anywhere(function(twitter) {
 twitter.hovercards();
});
&lt;/script&gt;
</head>


Para ver a ferramenta em ação, é só passar o mouse em cima do link de usuário do Twitter. Por exemplo, teste em @luanfr e em @portalmeira. Divertido, não?

Como o serviço é novo, alguns bugs podem ocorrer. Caso não veja o hovercard, dê F5 para atualizar o navegador.

Fonte do artigo

Artigos recentes

Linkem me:

Related Posts with Thumbnails
Google