Change AddThis url dynamically with jQuery

Question

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?

Hmm it's weird because your var addthis_share looks like to be global. You should try reloading the AddThis plugin or see if you can change the url in the DOM directly. — soyuka
– soyuka, Commented Mar 12, 2013 at 16:52
Thank you for your help: addthis.update('share', 'url', newURL); solved the problem. — maddogandnoriko
– maddogandnoriko, Commented Mar 12, 2013 at 16:58

Shrujan Shetty · Accepted Answer · 2014-08-02 09:27:42Z

26

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

edited Aug 2, 2014 at 9:27

Shrujan Shetty

2,4323 gold badges28 silver badges44 bronze badges

answered Apr 9, 2013 at 6:20

Sunny

8639 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shrujan Shetty Over a year ago

hi can we change the discription in this way

HostedMetrics.com Over a year ago

Set "addthis:url" and "addthis:title" on each sharing toolbox you have on your page and call: addthis.toolbox(".addthis_toolbox"); Don't change the selector. See my example at jsfiddle.net/bs7g9rm8

Gary · Accepted Answer · 2014-01-17 01:50:26Z

17

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

answered Jan 17, 2014 at 1:50

Gary

1791 silver badge3 bronze badges

Comments

zarpio · Accepted Answer · 2017-07-25 10:50:10Z

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>

ronnyfm · Accepted Answer · 2013-05-03 18:42:19Z

0

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";
}

answered May 3, 2013 at 18:42

ronnyfm

2,10128 silver badges33 bronze badges

Comments

hongster · Accepted Answer · 2013-11-03 16:29:21Z

0

<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.

answered Nov 3, 2013 at 16:29

hongster

5443 silver badges12 bronze badges

1 Comment

crmpicco Over a year ago

Where does isSameNode come from?

Reza Mamun · Accepted Answer · 2015-08-24 15:30:47Z

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;

yurk · Accepted Answer · 2020-09-04 13:50:31Z

0

Just works for now

window.addthis.layers.refresh('new_url', 'new_title');

Another configs should be absent (like dom attributes) should be absent

answered Sep 4, 2020 at 13:50

yurk

313 bronze badges

Collectives™ on Stack Overflow

Change AddThis url dynamically with jQuery

7 Answers 7

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related