How to Add an AddThis.com Component to Your Flash Site
The AddThis.com component allows for an easy way to add social website links to your website. Unfortunately they don’t have a flash component yet. I will show you a work around so you can quickly add this to any flash site you may have.
Example
Download
The Theory
The title of this post might be a bit misleading. Technically we won’t be adding the addThis component to the flash, we’re going to float it above the flash. Then have the flash communicate with the JavaScript to position it where it needs to go. To the user it will look like it is part of the flash.
Creating The Flash
In this example we will be adding the addThis component below a menu. In the timeline I created a MovieClip with the name “menu” and placed the menu inside of this. You’re probably going to have your own setup, I’m just using the menu so I can position the component relative to where the menu is.
ActionScript
1 2 3 4 5 6 7 8 9 10 11 12 13 | //Place the component at the bottom left of the menu //(You can place any x and y co-ordinates here) positionAddThis(menu.x, menu.y + menu.height +10); //Position Addthis.com component function positionAddThis(x,y){ //Values have to be integers var left = Math.round(x); var top = Math.round(y); //Calling JavaScript Function moveAddThis(top,Left) ExternalInterface.call("moveAddThis",top , left); } |
You’re going to have to play around with the x and y values a bit later to get everything to line up perfectly.
Load the Flash
Now that we have the flash, we need to embed it into an html file. I’ll be using swfObject, but you can use any method you like. Just make sure the wmode is set to transparent, otherwise the flash will be on top of your component.
You can also add the script for the addThis component at this point. You can pick this up on addThis.com’s website. We’re going to wrap the script within a div with an id so we can reference it later.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <!-- Embed Flash using swfobject. (Can use any method of embeding flash here) --> <script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript"> var flashvars = {}; var params = {}; var attributes = {}; attributes.id = "example"; params.wmode = "transparent"; swfobject.embedSWF("example.swf", "website", "800", "600", "9.0.0", false, flashvars, params, attributes); </script> </head> <body> <div id="website"> <!-- Flash Will Go Here --> </div> <div id="addThisBtn"> <!-- Add Script Given By AddThis.com --> </div> </body> </html> |
Positioning the AddThis Component
At this point we have the flash loaded and calling a JavaScript function that doesn’t exist yet. So lets create that function. We will also add the CSS that will put the component on top of the flash.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css" media="screen"> /* Places the addthis button on top of flash */ #addThisBtn{ position:absolute; z-index:1000; } </style> <!-- Load JQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> <script type="text/javascript" charset="utf-8"> // Function for letting flash position the button function moveAddThis(top, left){ //Changes css top and left properties of //the addThis div wrapper. $("#addThisBtn").css("top", top+"px"); $("#addThisBtn").css("left", left+"px"); } </script> |
The last thing you’ll need to do is test it out and make sure the button is showing up where you need it. You might have to do some tweaking but you can eventually get it where you need it.
hi, I was looking for how to embed addtoany.com share/save button into my flash site. could you provide instruction on how it is done? very interesting, thank you!
You just have to replace the addthis script with the addtoany.com script and the button should be positioned properly. The addtoany by default hides the embeded objects temporarily, which in turns breaks the flash when you rollover the button. You can get around this by placing this javascript somewhere in your html file:
<script type="text/javascript" charset="utf-8">
a2a_hide_embeds = 0;
</script>
And that’s it. You should be good to go.
That is pretty sweet. Nice cross-pollenation!
you can use css opacity to show your own custom flash button instead of the addthis bar: opacity:0; filter:alpha(opacity=0);