How to Add an AddThis.com Component to Your Flash Site
Tweet
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.