Is there a way to register a callback on Twitter's Tweet button? I'd like to be able to track which particular users on my site have tweeted a link. I can't add on onClick event because it's a cross-domain iFrame. Any other ideas?
I've seen one way to do it but it seems unreliable. Their documentation doesn't mention anything so I am looking for help with a work-around.
Twitter has Web Intent events for loaded, rendered, resize, tweet, follow, retweet, like, and click.
twttr.events.bind(
'tweet',
function (event) {
// Do something there
}
);
The behavior was changed in the fall of 2015 due to the unreliableness of callbacks happening after an event is complete.
They will now be triggered when a user invokes the action in your page, rather than after the action is completed.
<script>
// Performant asynchronous method of loading widgets.js
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
<script>
// Wait until twttr to be ready before adding event listeners
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function(event) {
console.log(event);
});
});
</script>
I have just implemented a tweet callback event.
More information on Twitter's callback event
- Twitter Web Intents
- Web Intents Javascript Events
The Javascript callback
$.getScript("http://platform.twitter.com/widgets.js", function(){
function handleTweetEvent(event){
if (event) {
alert("This is a callback from a tweet")
}
}
twttr.events.bind('tweet', handleTweetEvent);
});
The tweet button:
<a href="http://twitter.com/intent/tweet?url=http://test.com;via=stack">twitter</a>
If you load the Twitter Widgets JS, you can bind a callback function to the tweet event. See the code below:
<a href="https://twitter.com/intent/tweet?url=http://yoursite.com/about&text=Message">Twitter</a>
<script>
//Twitter Widgets JS
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
//Once twttr is ready, bind a callback function to the tweet event
twttr.ready(function(twttr) {
twttr.events.bind('tweet', function (event) {
console.log('tweet, tweet');
});
});
</script>