Is there a callback for Twitter's Tweet Button

Question

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.

Answer 1

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.

Example loading widgets.js:

<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>

Answer 2

function loguser( event ) {
    if ( event ) {
        alert( 'Tweeted' );
        console.log( event );
    }
}

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="//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"));

twttr.ready(function (twttr) {
    twttr.events.bind('tweet', loguser);
});

Working Example

Answer 3

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>

Answer 4

<a href="https://twitter.com/IamAnessaReyes" class="twitter-follow-button" data-show-count="false">Follow @IamAnessaReyes</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Answer 5

yes, there is a callback function. for custom twitter buttons as well. you can find it here: https://dev.twitter.com/discussions/671

Answer 6

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>