Adicionando callbacks por JavaScript no tweet button / like button / +1 button

Imaginei vários cenários em que isso pode ser útil, basicamente adicionando uma função de callback no JavaScript após twittar ou dar like / curtir ou apertar o botão mágico que o Google inventou, que quando você clica soma 1 (HÁ!), enfim, pode evitar que você precise programar server-side e se preocupar com oauth, e os malditos tokens, ou seja, dá pra fazer tudo no JavaScript, tipo:

  • Como trackear ou como colocar tags do Google Analytics no tweet button , like button e +1 button, mensurando o compartilhamento de cada post, página ou sessão do site nas redes sociais.
  • Aplicações do tipo, pague com um tweet, ou compartilhe para fazer o download, liberando um conteúdo, uma foto um vídeo ou qualquer arquivo somente depois que o usuário efetivamente compartilhar a página no Twitter, Facebook ou Google Plus.
  • Fazer coisas bregas do tipo “Obrigado por compartilhar“, tem gente que adora isso, sério.


Vamos aos códigos…

Callback no Like Button

Dos três botões, o único que tem frescura é o do Facebook, pois ainda que você faça tudo no JavaScript, ele te obriga a criar uma app lá no canal de desenvolvedores deles, vai lá, criar uma App só pra pegar o ID. Além disse também tem a frescura de precisar colocar o atributo xmlns:fb=”http://www.facebook.com/2008/fbml” dentro da sua tag <html> .
E dentro do seu <body> (que gay isso), no lugar onde você vai colocar o like button, adicione:

<div id="fb-root"></div>
<fb:like></fb:like>

E lá no fim do body, em javascript:

	window.fbAsyncInit = function() {
		FB.init({appId: 'SUA_APP_ID', status: true, cookie: true, xfbml: true});
		FB.Event.subscribe('edge.create', function(href, widget) {
			alert('Você acabou de curtir a página: '+href);
		});
	};
	(function() {
		var e = document.createElement('script');
		e.type = 'text/javascript';
		e.src = document.location.protocol + '//connect.facebook.net/pt_BR/all.js';
		e.async = true;
		document.getElementById('fb-root').appendChild(e);
	}());	

E vai funcionar assim:

Clica aí em like, e depois que você efetivamente compartilhar, vai dar um alert de callback, obviamente poderia ser qualquer outra coisa, como usar uma tag do analytics, ou dar show/hide numa div, sei lá.

Callback no Tweet Button

Tem um detalhe só, tem um script que necessariamente tem que estar dentro da tag <head> :

<script src="http://platform.twitter.com/anywhere.js" type="text/javascript"></script>

No demais, sem segredo, onde você for colocar o tweet button é só colocar o seguinte html

<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="maktuiu">Tweet</a>

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript">
	twttr.events.bind('tweet', function(event,user) {
		alert('Você twittou pelo tweet button =)');
	});
</script> 

E vai funcionar assim:


Testa aí, é a mesma coisa do Like button.

Plus One Button

Sem frescuras, simples e além de saber se alguém clicou no +1, dá pra saber se alguém desclicou depois:

O código é este:

<g:plusone annotation="inline" callback="PlusOneCallBack"></g:plusone>

<script type="text/javascript">
	function PlusOneCallBack(obj){
		if(obj.state=='on'){
			alert('você clicou no +1');
		} else {
			alert('você desclicou no +1');
		}
	}
	(function() {
		var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
</script>

E vai funcionar assim:

FAQ

  • Não dá pra saber, nos 3 casos, dados da pessoa que compartilhou (como foto, nome, perfil, senha do banco, etc), pra acessar dados do perfil é necessário pedir permissão no applicativo, e aí é obrigado a passar por aquele pedágio “O aplicativo tal que saber suas informações de blablabla”. Não é essa a intenção de quem quer simplemente compartilhar um conteúdo.
  • Pro orkut, naquele “Promova” não sei se tem algo do tipo ou não, e também não estou muito interessado em ir atrás.

Bom, é isso.

[]s,

2 thoughts on “Adicionando callbacks por JavaScript no tweet button / like button / +1 button

Leave a Reply

Your email address will not be published. Required fields are marked *