Como integrar o Twitter no seu site com @Anywhere
Posted by Dirceu | Filed under widget, sweet-js, anywhere, api, twitter-platform, uncategorized
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.
Previous Post Next Post