A Tweet Button for Flash

Tweet Button Popup Login

Tweet Button Popup Login

Recently, twitter introduced another method of sharing using a Tweet Button and I haven’t seen many AS3 or Flash friendly solutions. In fact, I’m a little surprised the folks at twitter snubbed Flash on this one – there doesn’t appear to be any Flash friendly documentation.

I suspect the Tweet Button is a direct response to the popularity of Facebook’s Like Button. At first I didn’t really see the point – there already is a way to add a type of status update button and I often don’t see the point of just jumping on the new thing. However, there are some definite advantages. You can include the following in a Tweet Button:

  • related allows you to ‘recommend’ other twitter profiles for the end-user to follow – this will show up for the end-user after they’ve submitted their comment
  • via lets you specify a screen name that will get added to the end of the post. e.g. via @blacksanta_69
  • url lets you specify the path to the page to share. This gets shortened using twitters t.co link service. The t.co service is going to be used for all twitter links in the near future
  • text value is used for  the content update

Additionally, twitter now “counts” the number of times an url is tweeted and you have the option to display that on your page. At this point, there isn’t a way to tap into the count data using the twitter api – I think you would have to rely on digging through the DOM with Javascript, and that’s not ideal. Fortunately, displaying the number of tweets seems a little tacky to me (think geocities),  so I haven’t included that in my Flash approach. However, I have to accept that, like youtube, people are probably more likely to click on things that have millions of tweets. Adding the count is something I’m going to have to do in the future.

There is also a noticeable advantage in using a branded popup that can be closed and minimizes how intrusive the sharing process can be.

Tweet Status Submission

Tweet Status Submission

Related Screen

Related Screen

Tweet Button in AS3 with Javascript Popup

I’ve decided to mimic the html Tweet Button functionality as much as possible. This means presenting the user with a custom Tweet Button in Flash, popping up a popup window on click and prepopulating the window.

The single most important thing to remember is to drop the ‘www’ when opening the popup window. This screwed me up for a while – encoding the data you send gets really murky when you post to ‘www’.

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 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_tweet.addEventListener(MouseEvent.CLICK, clickTweet);
btn_tweet.buttonMode = true;

function clickTweet(e:Event):void{

//The path to the share page
var path:URLRequest = new URLRequest("http://twitter.com/share");

//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.url = "http://www.majorcallisto.com/?p=15";
tweetVars.text = "Major Callisto rocks my world with an AS3 Tweet Button";
tweetVars.via = "blacksanta_69";
tweetVars.related = "majorcallisto: Christopher Lewis, Creative Technologist";

//Set the URLRequest to include the URLVariables
path.data = tweetVars;

//If Flash is okay with us using ExternalInterface
if (ExternalInterface.available){
//I would imagine that If ExternalInterface wasn’t available that would be caught
//with the try/catch statement – oh well.
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

Status updates the old way

Twitter already has a few methods of ‘sharing’ by creating a status update. With a status update you can simply add a Query String to the end of a link to Twitter. Below is the HTML only example followed by the Flash example I commonly use.

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="http://twitter.com/home?status=Major+Callisto+rocks+my+world+http://www.majorcallisto.com" target="_blank">Share This</a>

Gives you:
Share This

In AS3:

//Import the button class
import fl.controls.Button;

//Create a button and position it
var btn_tweet:Button = new Button();
btn_tweet.label = "TWEET";
btn_tweet.x = 10;
btn_tweet.y = 10;

//Add the button to the stage
addChild(btn_tweet);

//Add an Event Listener for the button
btn_tweet.addEventListener(MouseEvent.CLICK, clickTweet);

function clickTweet(e:Event){

//The path to the status page
var path:URLRequest = new URLRequest("http://twitter.com/home");

//using the GET method means you will use a QueryString to send the variables
//twitter likes this
path.method = URLRequestMethod.GET;

//The custom status message to send. Might as well let twitter worry about the char count
var tweetVars:URLVariables = new URLVariables();//escape("Major Callisto rocks my world http://www.majorcallisto.com");

//Twitter uses a "status" variable to prepopulate the page
tweetVars.status = "Major Callisto rocks my world with his Flash AS3 Tweet Button http://www.majorcallisto.com";

//Add the variables to the URLRequest
path.data = tweetVars;

//Open the page in a "_blank" (new) window and let the user worry about closing
navigateToURL(path, "_blank");
}

Gives you:
Get Adobe Flash player


Source FLA

Now if I can only customize that damn Share This Tweet Button \/

This entry was posted in Projects and tagged , , , . Bookmark the permalink.

13 Responses to A Tweet Button for Flash

  1. luvs it! trying it out now. Great post Chris keep it coming.

  2. Zach says:

    Very nice.
    Would suggest one change:
    escape your values in the loop. If a user includes a #hashtag int he messageit will break unless you escape your vars.

    //=========================================
    path.url +=”?d=0″;
    for (var each in tweetVars){
    path.url += “&”+each+”=”+escape(tweetVars[each]);
    }
    ExternalInterface.call(“openTweetWin”, path.url);
    //=======================================
  3. Tim says:

    Hey, i see you have an error in your javascript. The tweetThis needs to be:

    window.open(url, “tweetThis”, “width=550,height=450,toolbar=no,scrollbars=no”);

    instead of:


    window.open(url, ‘tweetThis’, “width=550,height=450,toolbar=no,scrollbars=no”);

    it needs to be: “tweetThis” instead of ‘tweetThis’..

  4. zombie says:

    thanks its work.. how about fb share button?i cant add comment for facebook using t option

  5. derek says:

    Great post! Thanks a ton for dropping some Twitter share knowledge! Your AS3 solution works like a charm, thanks again.

  6. Diego says:

    Were did you get that twitter uses a “status” variable? I’m sure it’s in the documentation somewhere, but I can’t find it and have no idea where should I be looking :P

    • Good question, Diego. I think Twitter is trying to discourage this approach in favour of the Tweet Button, so they might have buried the documentation for it. I’ve only included it above as a type of fallback plan for situations where a Tweet Button won’t work, like when a text link is needed, so hopefully they don’t completely drop it.

  7. Marc Pelland says:

    Thanks for this, great to have a useful reference for quick Twitter interactions.

  8. Pingback: A Twitter Follow Button for AS3 Flash | Major Callisto

  9. Sarah says:

    Thank you so much!! I used your button movie clip from your example and then the code for AS3 and it worked perfectly!

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>