O Twitter habilitou ontem o uso da versão 1.1 da @Anywhere, a plataforma para integração do Twitter em sites de terceiros. Essa versão trás implementada toda funções mostradas na Chirp e torna útil a página:
http://platform.twitter.com/js-api.html que continha muitos métodos não implementados.

Recentemente o Twitter desenvolveu a @Anywhere, uma ferramenta que facilita a integração de funcionalidades do Twitter em sites de terceiros.

As funcionalidades disponíveis são:

• Auto-link em nomes de usuários do Twitter
• Hovercard
• Botão de seguir
• Caixa de tweet
• Login de usuário

Para adicionar esses elementos do Twitter no seu site, siga com atenção as próximas linhas.

O primeiro passo é abrir o cadastro para sites/aplicativos do Twitter. Nessa página preencha o campo “Callback URL” com um endereço que seja do mesmo domínio e sub-domínio que seu site. Além disso, marque a opção “Read & Write” no tipo de acesso, assim seus visitantes também poderão seguir profiles do Twitter e tweetarem.

Com a aplicação criada vamos entender ao código. Comece adicionando a seguinte tag dentro do HEAD do HTML, substituindo YOUR_API_KEY pela “Consumer key” que foi criada no passo anterior:

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"
type="text/javascript"></script>

Auto-link em nomes de usuários do Twitter

A Anywhere linka automaticamente nomes de usuários achados na sua página para a página do profile no Twitter. Para usar, chame o método linkifyUsers após o código do passo anterior:

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

Dessa forma todos potenciais nomes de usuários serão linkados, se você preferir linkar somente parte do seu conteúdo pode usar um seletor no objeto “T”:

T("#linka-esse-conteudo").linkifyUsers();

Hovercard

Um hovercard é um pequeno box que mostra dados sobre um usuário do Twitter. O hovercard também permite seguir e deseguir tal usuário. Para habilitar chame o método hovercards:

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

Por padrão o método hovercards chamará a funcionalidade de auto-link, linkifyUsers.

Botão de seguir

O botão de seguir permite os usuários do seu site seguirem usuários no Twitter, para adicionar utilize o método followButton:

<span id="follow-twitterapi"></span>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T('#follow-twitterapi').followButton("USUARIO_PARA_SEGUIR");
  });
</script>

Caixa de tweet

A caixa de tweet permite os usuário tweetarem diretamente do seu site, para usar chame o método tweetBox:

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox();
  });
</script>

É possível customizar a exibição da Tweet Box. Tamanho e texto padrão podem ser definidos como no exemplo:

<div id="tbox"></div>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#tbox").tweetBox({
      height: 100,
      width: 400,
      defaultContent: "<CONTEUDO INICIAL DA TWEETBOX>"
    });
  });
</script>

Login de usuário

Alguns métodos da Anywhere não precisam de autentificação, como por exemplo o Hovercard. Outros, como o Botão de seguir precisam que o usuário autorize o acesso pelo seu site. Quando a funcionalidade precisar ela vai cuidar de tudo isso, porém, é possível permitir o login para usar os dados do usuário e outros métodos da API. Para adicionar um botão para login chame a função connectButton:

<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#login").connectButton();
  });
</script>

Para executar código quando a autentificação for concluída e receber os dados do usuário use o exemplo:

<span id="login"></span>
<script type="text/javascript">
  twttr.anywhere(function (T) {
    T("#login").connectButton({
      authComplete: function(user) {
        // chamada quando autentificar
        // console.log(user);
      },
      signOut: function() {
        // chamada quando usuario da logout
      }
    });
  });
</script>

E agora?

Pronto para adicionar no seu site? Eu integrei hovercards e botão de seguir no BuzzVolume e gostei muito do resultado. O engajamento do usuário ficou visivelmente maior depois da Anywhere, com mais página por visita e menor bounce rate. Vejam lá no BuzzVolume como ficou.

Para personalizar e explorar melhor a Anywhere procure ler também a introdução preparada pelo Twitter e a API completa.

Meu último post foi uma tentativa de explicar o funcionamento da Yahoo Query Language. No final falei da possibilidade de se fazer um Widget do Submarino com a YQL e agora volto para implementar o prometido.

YQL

Como eu disse existe um post explicando a YQL, porém aqui vai uma explicação rápida:

A YQL pode ser usada para buscar dados nas APIs do Yahoo (Flickr, Delicious, Placemaker, Maps, …), nas APIs do DataTables (Twitter, Amazon, GeoLocation, …) ou em qualquer outro documento da web (página HTML).

Para mostrar como a busca em um documento qualquer da web é feita, escrevi o seguinte código:

Para testar use o console da YQL ou veja teste dessa busca. O YQL vai retornar o conteúdo pedido em XML ou JSON.

JSONP

“JSON with Padding” é uma técnica que permite o carregamento assíncrono de informações de um domínio externo.

Toda biblioteca de JavaScript que se preze possui um método para esse procedimento.
jQuery: $.getJSON(url, function(data) { // callback });
MooTools: Request.JSON([options]);

A implementação desse tipo de requisição é bem simples.

Sabemos que o retorno de um arquivo chamado pela tag script é imediatamente executado pelo interpretador JavaScript.

Também sabemos que um objeto em JS pode ser representado por {} e pode conter pares de chave/valor. Ex: var Objeto = { chave: ‘valor’ };

Assim sendo, o que precisamos agora é que o conteúdo de um arquivo que vai ser requisitado utilizando a tag script seja uma chamada a nossa função previamente declarada.

Atente que ao contrario do xhttprequest o elemento HTML script não possui limitações quanto ao domínio que a requisição pode ser feita. Porém, para que a técnica funcione é necessário que o servidor requisitado retorne (em texto puro) uma chamada para nossa função.

Requisição:
http://pomoti.com/arquivo.php?callback=recebe_json
PHP simples para retorno:
echo $_GET['callback'] . ‘( {chave: “valor”} )’;
Retorno:
recebe_json( {chave: ‘valor’} );

Todos webservices que queiram trabalhar com JSON devem, então, aceitar um parâmetro para envio de callback.

Widget do Submarino

Fundamentadas as técnicas necessárias para a implementação vamos ao código.