AddThis Popup Menu in Flash

Continuing on my AddThis journey from last post, I’ve moved away from doing something really custom for the social bookmarking part of this project. My fear as the designer is that a slick functionality is going to take away from the project itself. My fear as the developer is that making something that doesn’t hook up to AddThis’ data will become obsolete and will require updates. So, I decided to do some research on getting the native AddThis popup menus to work with a Flash site. I was kind of leary about it, but I read this post and decided that it might be worth attempting.

Well, it was relatively easy to get something working pretty well. I haven’t tested this on every browser on the planet yet, and I’m sure this kind of overlay functionality is going to cause some problems on some browsers. Right now, this is tested on Safari 4 and Firefox 3. I didn’t even need to use the wmode Flash param for this. The forum said setting this to transparent would help, but I didn’t find it necessary. I’m thinking as a workaround for troubled browsers I will give them a different functionality that opens this page instead of the popup.

Here is the simple demo I put together. Below is a long winded explanation of what is going on here.

Here is the only change to the Flex HTML template. It is the addthis_open function wrapped up in a function. For some flexibility I gave the showAddThis function the ability to exclude from the more list using the AddThis variable addthis_exclude. The excludes are sent as a comma delimited string. The next parameter set is a boolean that decides whether the popup is the email popup or the bookmark popup.

I couldn’t find decent documentation on the addthis_open function, so allow me to break it down for you. The first parameter is an object that the hover menu is attached to. In Flash, the hover menu is not going to be used so I just set that element to the body of the document. The second parameter is the type of popup. In most of the examples on AddThis that second parameter is set to an empty string which gives the hover. Adding more as a string goes straight to the popup. From what I gleaned there are 3 acceptable string values: email, more and feed. I left feed off because it doesn’t make sense for my project. The third one is the url to share. Their default is [URL] as a string, which is equivalent to location.href in JavaScript. Lastly, is the title parameter. Their default is [TITLE] as a string, which is equivalent to document.title in JavaScript.

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<script type="text/javascript">
	var addthis_exclude;
 
	function showAddThis(excludes, isEmail)
	{
		addthis_exclude = excludes;
		addthis_open(document.body, (isEmail ? 'email' : 'more'), '[URL]', '[TITLE]');
	}
</script>

In Flex, I added this code. It uses ExternalInterface to call the JavaScript code above. In this example I’ve excluded yardbarker and ballhype services because sports are totally gay. Two buttons were added to show email and the bookmark interface. That’s it, AddThis takes care of the rest.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
	<mx:Script>
		<![CDATA[
			private function addThis(isEmail:Boolean = false):void
			{
				ExternalInterface.call("showAddThis", 'yardbarker, ballhype', isEmail);
			}
		]]>
	</mx:Script>
	<mx:Button label="AddThis Bookmark" click="addThis()" />
	<mx:Button label="AddThis Email" click="addThis(true)" />
</mx:Application>

For those of you who don’t care about explanations and scroll all the way to the bottom without reading, I’ve attached a simple working demo and the download for the impatient.