A Twitter Follow Button for AS3 Flash

Follow and Mini-profile

Earlier this year, Twitter introduced Web Intents as an easy way to Tweet, Reply, Retweet, Favorite, and Follow. Web Intents are meant to be used with popups, which means I can easily adapt from my previous Tweet Button for Flash technique: add a javascript popup to the page, set some variables and call the popup from Flash.

Twitter introduced a Follow Button that behaves similarly to the Tweet Button, but their claims that it, “uses the same implementation model”, is the tiniest bit bullshit. The Follow Button relies on Javascript in ways that we can’t easily use with Flash.

Our Web Intent Follow Button opens a popup window with a Mini-profile page, as pictured above. The Web Intent Follow Button uses either one of the following two values:

  • screen_name is the name of the twitter user you’d like to follow. e.g. @blacksanta_69
  • user_id is the id of the twitter user you’d like to follow. I had a hard time finding my twitter id so I’m using screen_name instead.

Like before, you drop the ‘www’ when using Web Intents.

1. The Popup Javascript function needs to be added to your html page in the <head> part of the page. The width and height are hardcoded in the javascript to reflect the Twitter recommended dimensions of a Tweet window. However, this can easily be passed as a parameter from Flash if you want.

function openTweetWin (url) {
window.open(url, "tweetThis", "width=550,height=450,toolbar=no,scrollbars=no");
}

2. Create a button in flash with the instance name btn_follow and add the following code. It’s worth noting that this works everywhere except within the Flash IDE, so test it on the html page

//Add an Event Listener for the button
btn_follow.addEventListener(MouseEvent.CLICK, clickFollow);
btn_follow.buttonMode = true;

function clickFollow(e:Event):void{

        //The path to the follow "intent" page
        var path:URLRequest = new URLRequest("https://twitter.com/intent/user");
       
        //using the GET method means you will use a QueryString to send the variables
        //twitter likes this. This is used as an alternate method if we don’t use
        //a javascript popup
        path.method = URLRequestMethod.GET;
       
        //The URLVariables class is a nice way to keep everything organised. There is the added bonus
        //that we can use these values if we GET instead of using the Javascript popup.
        var tweetVars = new URLVariables();
        tweetVars.screen_name = "blacksanta_69";
        //tweetVars.user_id = "";
       
        //Set the URLRequest to include the URLVariables
        path.data = tweetVars;
       
        //If Flash is okay with us using ExternalInterface
        if (ExternalInterface.available){
                try{
                        //We’re going to pass this as a string to javascript, so we have to
                        //"stringify" it instead of using the URLVariable + URLRequest approach
                        //I’m putting a dummy placeholder in the first position of the
                        //QueryString so that I can shuffle my variables around without
                        //worrying about who gets a ‘?’ instead of a ‘&’. It’s faster than
                        //writing a quick if statement, but commenting about it takes far more time ; )
                        path.url +="?d=0";
                        for (var each in tweetVars){
                                path.url += "&"+each+"="+tweetVars[each];
                        }
                       
                        //Make a call to the openTweetWin Javascript function
                        //and pass it the ‘stringified’ version of the QueryString
                        ExternalInterface.call("openTweetWin", path.url);
                } catch (error:SecurityError){
                        //If it doesn’t work just open a damn window.
                        navigateToURL(path, "_blank");
                } catch (error:Error){
                        //If it doesn’t work just open a damn window.
                        navigateToURL(path, "_blank");
                }
        } else {
                //If it doesn’t work just open a damn window.
                navigateToURL(path, "_blank");
        }
}

Gives you:
Get Adobe Flash player
Source FLA Here

In HTML

<!– Simply take the link to twitter and add a querystring (denoted by the ‘?’) at the end with your text Use the ‘+’ symbol instead of spaces so browsers can understand (this is called escaping and can be done with javascript) –>
<a href="https://twitter.com/intent/user?d=0&screen_name=blacksanta_69" target="_blank">Follow</a>

Gives you:
Follow

Because there are so many easy to use features with Web Intents, the logical next step would be to build AS3 classes.

This entry was posted in Projects, Uncategorized. Bookmark the permalink.

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>