Using ShareThis with Flash

This feature does currently not work – see list of updates below

ShareThis is a great service for adding shareability to your website in a very simple way. It even includes the “tip a friend” option, so you don’t need to code that for your own site. I will describe how to embed it from flash.

Note 2009/05/19: Due to changes in the ShareThis API popup-functionality is broken currently (both in my example and in some of my live projects). I have filed a bug with ShareThis to fix this ASAP.

Note 2009/05/21: ShareThis have now fixed the above bug but there is still a minor JavaScript error thrown. The popup works now though as it should from both JS and Flash.

Note 2009/06/08: ShareThis now broke it again. And this time their support staff doesn’t answer. Please see an example implemented with AddThis instead.

Note 2009/06/19: ShareThis finally fixed it again. They wrote a mail on the 17th to me stating the bug was reintroduced when they implemented CDN, but would be fixed in the next release. Let’s hope it stays that way.

Note 2009/08/14: ShareThis has recently implemented a brand new version of their service – and surprise: it is not backwards compatible. Thus my popup example is broken again. I will investigate and fix soon.

Note 2009/08/17: ShareThis has promised to deliver a flash API within a few weeks. Let’s see what happens then…

You can do that in two ways, either by using a overlay div in HTML or creating a popup (that might get blocked). The prettiest and most user friendly is of course the overlay, but in order to have HTML overlays on top of Flash elements, you need to set the Flash wmode to transparent. This has a strange and unfortunate side-effect (which has been bug-reported to Adobe), that the keyboard defaults to standard US layout. For US websites, this is not a big problem, but for a Danish website it matters a lot. There are many differences between US and DK keyboard layout including Danish special characters and the location of the @-sign. Thus, wmode-transparent cannot be used for Flash-objects having input fields requiring users to enter text (which could contain special characters) or an email address (which contains the @-sign). Thus we need to use the popup-solution.

First, simply go to sharethis.com publisher section and customize your widget. Instead of placing the widget code snippet where you want the button, put it in the <head>-section of your website. The code snippet I got was: 

<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=636e055b-a4a2-4f9c-872c-b7aa9a701bb0&amp;type=website&amp;send_services=email&amp;post_services=facebook%2Clinkedin%2Cmyspace%2Cdigg%2Cdelicious%2Ctwitter%2Creddit%2Ctechnorati%2Cwordpress%2Cblogger%2Cgoogle_bmarks%2Cwindows_live"></script>

Then create a little javascript function like: 

  function share(url, title) {
    var s = SHARETHIS.addEntry({
      url: url,
      title: title
    }, {button:false,popup:true});
    s.popup()
    return false;
  }

Finally, simple call this function from Flash using ExternalInterface: 

var url:String = "http://www.barklund.org/blog/2009/05/06/using-sharethis-with-flash/";
var title:String = "Barklund.org - Using ShareThis with Flash";
import flash.external.ExternalInterface;
ExternalInterface.call("share", url, title);

See an example here – the javascript function is invoked both from a regular HTML link and from a simple Flash file using just the above ActionScript.

Related posts:

  1. Using AddThis with Flash
  2. Minor change in handling NaN positions in Flash Player 10,0,22
  3. Announcing MXHR4AS3: Multipart/mixed-file download by Flash clients

Category: API, AS2, AS3, HTML, JavaScript 13 comments »

13 Responses to “Using ShareThis with Flash”

  1. Armin
    May 16th, 2009 at 17:57

    Hi, I’m having problems implementing this into flash. Do you have a flash example you could send me? would be very greatful. Thank you for the article. Cheers
  2. Barklund
    May 19th, 2009 at 14:51

    Hi, I have now updated the example to include a flash version. However, the entire ShareThis API has changed and actually broken popup-functionality. I have filed a bug with them and hope to find a solution soon.
  3. Ravichandran J
    June 8th, 2009 at 11:33

    Hey Hi,

    Thanks for publishing tutorials on Integration of ShareThis and Flash.

    But i could not view the pop up from my browser.

    I am using Firefox 2.0.

    Hope you will find some solutions. :)

    Thanks and Regards,

    Ravichandran J
  4. Barklund
    June 8th, 2009 at 11:36

    Hi Ravichandran,

    Well, apparently ShareThis broke the functionality once again – and I contacted them without any response. Will try again though.
  5. Ravichandran J
    June 8th, 2009 at 13:12

    Hi Barklund,

    Thanks for your quick updates. :)

    Hope this will be solved soon.

    With Best Regards,

    Ravichandran J
  6. Barklund
    June 8th, 2009 at 14:37

    Ravichandran and others,

    I have now experimented using AddThis instead, and it works much simpler, actually so simple, they can’t even break it ;)

    Please see this new post instead: http://www.barklund.org/blog/2009/06/08/using-addthis-with-flash/
  7. slee
    August 6th, 2009 at 18:43

    thanks so much for the quick guide it helped me a lot.
    one thing i had to make sure i put in flash in the top of the script was this:

    import flash.external.ExternalInterface;
  8. Barklund
    August 10th, 2009 at 12:00

    Ah, of course – just added that to the snippet above :)
  9. slee
    August 13th, 2009 at 22:50

    Glad i could help :)
    one thing i have noticed is that the sharethis message box only has a – in it. is there any way to put the url and title in there like the normal shareThis window?
  10. Barklund
    August 14th, 2009 at 14:07

    @slee: Well, what you have found is, that given the new ShareThis API and layout, they’ve broken popup’s once again. I don’t have time to investigate now, but can just say that AddThis is clearly a better choice simply for the fact, that ShareThis clearly has no hesitation to create non-backwards-compliant updates. Strange policy…
  11. slee
    August 14th, 2009 at 18:19

    ye not so good just a shame that the widget it better than the AddThis one.
  12. slee
    August 14th, 2009 at 18:20

    I forgot to mention that i contacted Sharethis about integrating it in Flash and they sent back:

    We’ll be releasing a flash widget soon that should work for your
    implementation. If you’d like to check back in a few weeks, we can
    update you on the progress.

    hth
  13. Barklund
    August 17th, 2009 at 12:01

    Let’s see what they come up with – because something sure is needed and preferably something that integrates nicely :)

Leave a Reply



↑ Back to top

     

Get Adobe Flash playerPlugin by wpburn.com wordpress themes