How does twitter give me a callback for tweeting?

Question

The Tweet Button is usually:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="someone">Tweet</a>
<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

and here I can get a callback when the user tweets:

<script>
  twttr.events.bind('tweet', function(event) {
    console.log(event);
  });
</script>

What I don't understand: how does twitter give me this callback? The tweet is done in another window and from another domain. How is this possible?

Answer 1

From what I can gather this is Twitters own implementation of Web Intents which is a Web API loosely based on Androids Intents functionality. It looks like that Twitter are using a JavaScript implementation of Web Intents (possibly similar to this).

In this scenario, the Twitter JavaScript registers an intent with the browser. The intent being you sharing a URL. When the user clicks the tweet button the intent activity is started and a new pop-up windows is displayed.

The user clicks the tweet button from the pop-up window and the browser posts back the event data to a callback specified when starting the activity. The callback is specified in the widget.js and you hook up to this event using the twttr.events.bind method.

There is a really good example of how this works on the JavaScript github implementation of WebIntents.

Usage

To use today

No browsers currently support this API natively. To use this system simple drop the following code in to your site:

<script src="http://webintents.org/webintents.min.js"></script>

When browsers start to implement this natively the Shim will defer all its functionality to the native interface.

Declaration

To register your service application to be able to handle image sharing simply declare an intent tag.

<intent 
  action="http://webintents.org/share"
  type="image/*" />

This will register the current page's ability to share images.

Invocation

To build a client application that can use the share functionality, it is as simple as using the following code:

var intent = new Intent(
    "http://webintents.org/share", 
    "image/*", 
    "http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Three_jolly_kittens.png/800px-Three_jolly_kittens.png"

);
window.navigator.startActivity(intent);

Service

When a service is invoked via startActivity, the "intent" object on window will be populated with the data provided by the client.

window.intent

That's it.

To send data back to the client that invoked it, it is as simple as calling postResult() on the intent.

window.intent.postResult("something cool");

The example is obviously slightly different to the Twitter implementation but the general process is the same.

Here are few other references for the WebIntents API:

• Chromium Project - Web Intents
• Another Example of how WebIntents is used from the Chromium blog
• Twitter Web Intents API Documentation