Question

I have an AS3 application that shows users tweets. I’m trying to use the twitter intents links to do popups, such as https://twitter.com/intent/retweet?tweet_id=93035636432437248.

When you have a simple href=”link” it will use the embedded http://platform.twitter.com/widgets.js to properly format a nice popup window.

When in flash I can only open in self or blank and neither triggers the JavaScript the same way it does when you click from html href links.

I also tried using ExternalInterface to call a js method to use document.location or window.open and neither used the twitter js.

What is the best way to harness the Twitter JavaScript from a flash button so we get the nice clean popup window?

Answer 1

Looking at the Twitter Web Intents API Documentation, near the bottom of the page you can find a link to the unobfuscated source code which shows how their API automatically handles links.

Put simply they are attaching a Click Event Handler to the DOM which then checks to see if the link being clicked points to their Web Intents URL. As you are opening a window from ActionScript you are bypassing the DOM and therefore the code won’t fire.

Now normally you would just expect to use ExternalInterface to call a method exposed by the Web Intents API; however the clever chaps at Twitter have created their entire API in an anonymous closure to avoid polluting the DOM – gotta love javascript 😉

So, personally, I would tackle this by creating my own version of the Twitter Web Intents API and including it on the HTML page which my Flash Application sits; for example:

// Create a global object which we can attach methods to.
var TwitterAPI = {};

// The methods themselves are created in a closure to avoid polluting the global
// namespace with temporary variables.
(function() {
    // The base URL of the Twitter API.
    TwitterAPI.baseURL = "https://twitter.com/intent/";

    // Opens a pop-up window and prompts the user to retweet the Tweet linked to 
    // the supplied tweet_id.
    TwitterAPI.retweet = function(tweet_id) {
        var url = TwitterAPI.baseURL + "retweet?tweet_id=" + tweet_id;
        openWindow(url);
    }

    function openWindow(url) {
        var windowOptions = "scrollbars=yes,resizable=yes,toolbar=no,location=yes";
        var width = 550;
        var height = 420;

        // Center the popup window.
        var left = Math.round((screen.width / 2) - (width / 2));
        var top = 0;        
        if (screen.height > height) {
                top = Math.round((screen.height / 2) - (height / 2));
            }

        window.open(url, 'intent', windowOptions + ",width=" + width +
            ",height=" + height + ",left=" + left + ",top=" + top);

    }
}());

You can then invoke this from your ActionScript project via an ExternalInterface call, as you previously suggested:

ExternalInterface.call("TwitterAPI.retweet", "35782000644194304");