javascript - AddThis buttons wont update to include fragment (#Hash Tag)

Question

I have these AddThis buttons on my website, and my site uses JS to take a user though an image gallery, when changing an image the URL is updated with the image title in the fragment element, the problem I have is this is not being reflected in the AddThis links. I've tried to get some answers from the AddThis forums, but was pointed at the api documentation and the addthis.toolbox() function, but it doesn't seem to be working out for me, so I thought I'd run it past the experts here.

This is my AddThis code on the basic page.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1 add_this_but"></a>
<a class="addthis_button_preferred_2 add_this_but"></a>
<a class="addthis_button_preferred_3 add_this_but"></a>
<a class="addthis_button_preferred_4 add_this_but"></a>
<a class="addthis_button_compact add_this_but"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_clickback":false};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e77111e2de880eb"></script>

<!-- AddThis Button END -->

In my JS script when a user changes the image, I have added this to the function.

addthis.toolbox(".addthis_toolbox");

I've also tried this

addthis.toolbox();

When running the code, I get no JS errors, but I dont see any updates to the AddThis buttons.

you can see the problem here.

http://www.martynazoltaszek.com/artpages?nid=30#Rendezvouz

This link will open up the site on a particular image called "Rendezvouz" but the nid=30 is actually a differnet image called "Walking by".The problem is shown by AddThis (Facebook) will always link to the Walking by" image. AddThis Gmail appears to be ok, but I dont think this is a factor of the API, as it works with or without the above function call.

Thanks in advance.

p.s. The reason for using a ?nid GET variable and a Fragment are due to php page load and JS viewing(without page refersh), but this also leaves support for a non JS browser.

Answer 1

I had a similar issue whilst using hashbangs for a javascript driven site. This code was used because the share buttons wouldn't re-render when content is loaded async. You should be able to take parts of this to fit to your situation. Maybe just the addthis.update() code

First I changed the script for addThis to async

http://s7.addthis.com/js/250/addthis_widget.js#async=1

Once the DOM has loaded, listen for hashchanges, this is where we will update the addthis share details.

You may require additional plugins for this bit to work with older browsers, consider jQuery hashchange event - v1.3 - 7/21/2010 - http://benalman.com/projects/jquery-hashchange-plugin/

Now its all wired up for a hashchange, the next step is to alter addThis.

    $(function(){
        $(window).hashchange(function(){
            if($('body').hasClass('addThis')){
                addthis.ost = 0;
                addthis.update('share', 'url', window.location.href); // new url
                addthis.update('share', 'title', window.document.title); // new title.
                addthis.ready(); // this will re-render the buttons.
            }
            else {
                addthis.init();
                $('body').addClass('addThis');
            }
        });
        addthis.init() //As we've changed the addthis to async, you will have to call addthis.init() once the DOM has loaded.
    });

Hope this helps.