Using jQuery to update the st_url attribute of the sharethis chicklet button?

Question

I am dynamically updating the attribute 'st_url' of all of the sharethis spans to the url of a video clicked with jQuery. In firebug you can see it is updating the st_url attribute of my spans, however I the sharethis button is still tied to the initial url. I read I may have to reinit the elements, but I am unsure of the best way to do this? Has anyone done this or have any idea of the best way to re-initialize the buttons with the updated url? Thanks!

Sharethis includes and init:

<script type="text/javascript">
    var switchTo5x=true;
</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">
    stLight.options({publisher:'xxxx'});
</script>

My markup:

<span st_url="http://sharethis.com" class='st_stumbleupon' ></span>
<span st_url="example" class='st_facebook' ></span>
<span st_url="example" class='st_twitter' ></span>
<span st_url="example" class='st_email' ></span>

My jQuery to update the attr="st_url" when a user clicks on a video:

//note: this is triggered by .bind('click')
var youtubeID = $(this).attr('id');
$('#container div > span').each(function(){
    //update sharethis to current video
    $(this).attr('st_url','http://www.youtube.com/watch?v=' + youtubeID);
});

Answer 1

Here is a code from my project. Hope, you could use it.

// define attributes for buttons
settings.share_buttons = [
    ['facebook','st_facebook_large','Facebook','Share on Facebook'],
    ['twitter','st_twitter_large','Tweet','Share on Twitter'],
    ['pinterest','st_pinterest_large','Pinterest','Share on Pinterest'],
    ['linkedin','st_linkedin_large','LinkedIn','Share on LinkedIn'],
    ['googleplus','st_googleplus_large','Google +','Share on Google +'] 
]; //[service,class,displayText,title]

// all code under could be placed into a function and bind on a click event 
// (don't forget about variable with URL, 'our_link_to_share').

//if block with buttons already exists
if (document.getElementById('share_this_id')){
    $('#share_this_id' > span').each(function(){
     $(this).removeAttr('st_url').attr('st_url',our_link_to_share).empty();
        stWidget.addEntry({
            "service":$(this).prop('service'),
            "element":this,
            "url":$(direct_link).prop('value'),
            "title":$(this).prop('title'),
            "type":"large",
            "text":$(this).prop('displayText'),
            "image":"http://www.softicons.com/download/internet-icons/social-superheros-icons-by-iconshock/png/256/sharethis_hulk.png",
            "summary":"My site"
        });
    });
}// if not, we'll create it
else{
    $('body').append($('<div>').prop('id', share_this_id).prop('class', 'share_this'));
    var share_this = document.getElementById('share_this_id');
    for(i=0; i&ltsettings.share_buttons.length; i++){
        $(share_this).append($('<span>').attr('st_url', our_link_to_share).prop('class', settings.share_buttons[i][1]).prop('displayText', settings.share_buttons[i][2]).prop('title', settings.share_buttons[i][3]).prop('service', settings.share_buttons[i][0]));
    }
}
if (stButtons){stButtons.locateElements();},