javascript - Using jQuery to update the st_url attribute of the sharethis chicklet button? - Stack Overflow

admin管理员组

文章数量:1350027

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=".js"></script>
<script type="text/javascript">
    stLight.options({publisher:'xxxx'});
</script>

My markup:

<span st_url="" 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','=' + youtubeID);
});

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./button/buttons.js"></script>
<script type="text/javascript">
    stLight.options({publisher:'xxxx'});
</script>

My markup:

<span st_url="http://sharethis." 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./watch?v=' + youtubeID);
});

• javascript
• jquery
• sharethis

Share Improve this question Follow edited Jan 25, 2013 at 14:30 Michaël 3,68177 gold badges4141 silver badges6464 bronze badges asked May 10, 2011 at 23:36 FostahFostah 2,95644 gold badges5656 silver badges7979 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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./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();},

Because there's no updateEntry call in ShareThis you need to use jQuery's .html() to recreate your elements inside your container, then repopulate each one using individual calls to stWidget.addEntry against the span's ID.

I use the following snippet to reinitialize ShareThis buttons after loading in a new page via ajax. Just make sure to add in your publisher key:

$.ajax({  
    url: 'http://w.sharethis./button/buttons.js',  
    dataType: 'script',  
    success: function(){  
    stLight.options({  
    publisher: 'xxx',  
    onhover: false  
    });  
    },  
    cache: true  
});  

I originally found the snippet, at the location I link to below below, after searching for a long time for a good solution. Reposting here because it was buried in a mass of other overly plicated code: http://forums.sharethis./topic.php?id=3937#post-84933

Eventually I also ended up rewriting the whole block. I did it like this

<div id="share-buttons">
    <button>custom stuff</button>
</div>

<div id="share-template" style="display:none">
    <span class='st_facebook_large' displayText='Facebook'></span>
    <span class='st_twitter_large' displayText='Twitter' st_via="Myself"></span>
    <span class='st_linkedin_large' displayText='LinkedIn'></span>
    <span class='st_email_large' displayText='Email'></span>
</div>

everytime the url to share changed:

var url=newurl, title = newtitle;
$('#share-buttons > span.st_dynamic').remove();
$('#share-template > span').empty().unbind().removeAttr('st_processed').each(function(){
    $(this).clone().prependTo('#share-buttons')
        .attr('st_url',url)
        .attr('st_title',title)
        .addClass('st_dynamic');
});
if (window.stButtons) stButtons.locateElements();

all the empty().unbind.removeCrap() appeared necessary. also necessary to reset the st_title - it was cached somewhere.

YMMV, especially since the buttons.js is external and this undocumented stuff changes :-/

本文标签： javascriptUsing jQuery to update the sturl attribute of the sharethis chicklet buttonStack Overflow