Change AddThis url dynamically with jQuery

I am trying to dynamically change the URL sent by addthis. When a user alters an element it updates a text area containing a custom url so they can return to that url and continue/view their work.

I am creating an addthis button like so(from their API docs):

var addthis_share = {url:"http://www.johndoe.com"}
$(document).ready(function(){
    var tbx = document.getElementById("toolbox"),
    svcs = {email: 'Email', print: 'Print', facebook: 'Facebook', expanded: 'More'};
    for (var s in svcs) {
        tbx.innerHTML += '<a class="addthis_button_'+s+'">'+svcs[s]+'</a>';
    }
    addthis.toolbox("#toolbox");
});

Then when the url is updated I am trying to update the addthis share URL like so:

function updateURL(){
    ...get some variables here and generate a new url
    var newURL="http://the.url.i.want.to.share.com";
    $('#tagUrl').val(newURL);
    //addthis_share = {url:newURL}
    addthis_share = {url:newURL}
    addthis.toolbox("#toolbox");
}

The original buttons are getting generated and contain the correct url, but when the url update function executes the addthis share url is not getting updated. How can I force it to update the addthis url?

sunnyuff

If you wants to change the addthis url after the html is loaded (in case of ajax or some user events), please use the below hack . Addthis apis are broken as on [09/04/13 11:42:24 AM] sunny jhunjhunwala:

addthis.update('share', 'url', 'http://www.sourcen.com'); 
addthis.url = "http://www.sourcen.com";                
addthis.toolbox(".addthis_toolbox");

http://www.sourcen.com ---> new url

It is as simple as this:

addthis.update('share', 'url', "http://www.example.com");
addthis.update('share', 'title', "Example Domain Title");
addthis.update('share', 'description', "Hello, I am a description");

Cheers, Gary

AddThis provides addthis.update("share", "url", value) function (but it is a buggy function in IE8); try this one:

for(var i = 0; i < addthis.links.length; i++){
    addthis.links[i].share.url= "new url";
}

<span id="share-obj" addthis:url="" addthis:title=""></span>

<script type="text/javascript">
    var shareConfig = {url: '', title: ''};

    addthis.button('#share-obj', {}, shareConfig);

    addthis.addEventListener('addthis.menu.open', function(event){
        if ( ! event.data.element.isSameNode($('#share-obj')[0])) {
            return;
        }

        event.data.share.title = shareConfig.title;
        event.data.share.url = shareConfig.url;
    });

    // in updateURL() or any other place during runtime...
    function updateURL() {
        shareConfig.url = 'http://different.url';
        shareConfig.title = 'Title changed dynamically...';
    }
</script>

I used a global variable shareConfig to keep track of the URL and title configuration. I have multiple addthis buttons in a webpage, each sharing different content. Therefore I have added a isSameNode to make sure I only update the button I want.

Although URL and title are changed dynamically, the addthis:url and addthis:title attributes must be present in the button (<span>), or else it won't work.

Step-1: Preparing ajax content to be loaded with other HTML;

<div class="addthis_sharing_toolbox-CUSTOM" data-url="<?php my_dynamic_link(); ?>" data-title="<?php my_dynamic_title(); ?>">
    <a class="addthis_button_email" style="cursor:pointer"></a>
    <a class="addthis_button_facebook" style="cursor:pointer"></a>
    <a class="addthis_button_twitter" style="cursor:pointer"></a>
    <a class="addthis_button_linkedin" style="cursor:pointer"></a>
</div>

Step-2: Preparing my fancybox ajax setup;

$('.popUpBtn').fancybox({
    //....other fancybox settings can go here...
    //....
    afterShow   : function(current, previous){
        //addthis.init();
        addthis.update('share', 'url', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('url'));
        addthis.update('share', 'title', $('.fancybox-inner .addthis_sharing_toolbox-CUSTOM').data('title'));
        //addthis.update('share', 'description', "Hello, I am a description");
        addthis.toolbox('.addthis_sharing_toolbox-CUSTOM'); //-->Important: this selector should not be anything from the addthis settings page; We can choose any other names like normal selectors;
    }
});

The above lines inside the "afterShow()" function are important to keep a note;

To customized the button:

<a class="addthis_button_compact" >
   <img src="./images/share.png" width="36" height="36" border="0" alt="Share" />
</a>

Head Part:

<meta property="og:title" content="YOUR TITLE" />
<meta property="og:description" content="YOUR DESCRIPTION" />
<meta property="og:image" content="YOUR IMAGE URL" />

Body Part: In my case I am using php I set the body attributes like this.

<body
      data-url="<?php echo basename($_SERVER['REQUEST_URI']); ?>"
      data-title="<?php echo $info->record_info->brand; ?>"
      data-description="<?php echo $info->record_info->description; ?>"
      data-media="<?php echo ./uploads/logos/<?php echo $info->record_info->logo; ?>"
>

To update content dynamically (JS Part):

<script>
    addthis.update('share', 'url', $('body').data('url')); // will set the URL
    addthis.update('share', 'title', $('body').data('title')); // will set the title
    addthis.update('share', 'description', $('body').data('description')); // will set the description
    addthis.update('share', 'media', $('body').data('media')); // will set the image if you are sharing
</script>

来源：https://stackoverflow.com/questions/15367134/change-addthis-url-dynamically-with-jquery

标签

jquery

addthis