Dynamic Update AddThis Sharing (Full)

Dynamically update AddThis sharing toolboxes when loading in new content, for example using AJAX.

by Himanshu Joshi

HTML

<div id="header">
    <div id="header-sharing" addthis:title="Update Shares on the Fly" class="addthis_toolbox addthis_32x32_style addthis_default_style">
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_twitter"></a>
        <a class="addthis_button_email"></a>
        <a class="addthis_button_compact"></a>
    </div>
</div>
<div id="explanation">
<h1>Update Shares on the Fly</h1>
<p><code>addthis.toolbox(".your-toolbox-selector", null, { title: "New Title", url: "http://new.url" })</code> Client API command is your friend when you're dynamically updating content that includes AddThis sharing buttons.</p>
<p>View the source code of the fiddle for info.</p>
</div>
<div id="pageContent">
    <h1>Welcome To Something Cool!</h1>
    <p>
        <button id="page1">Page 1</button>
        <button id="page2">Page 2</button>
        <button id="page3">Page 3</button>
    </p>
</div>

<script id="sharing_markup" type="text/html">
    <div class="page_sharing_facebook addthis_toolbox facebook_like">
        <a class="addthis_button_facebook_like" title="Facebook Like"></a>
    </div>

    <div class="page_sharing_toolbox addthis_toolbox addthis_default_style" style="width:290px;">
        <div class="share-icons" id="share-icons">
            <a class="addthis_button_email left" title="Email"></a>
            <a class="addthis_button_print left" title="Print"></a>
            <a class="addthis_button_facebook left" title="Facebook"></a>
            <a class="addthis_button_twitter left last" title="Twitter"></a>
            <a class="addthis_button_delicious left" title="Delicious"></a>
            <a class="addthis_button_google left" title="Google"></a>
            <a class="addthis_button_blogger left" title="Blogger"></a>
            <a class="addthis_button_digg left last" title="Wordpress"></a>
        </div>  
    </div>
</script>
<script id="page1content" type="text/html">
    <h1>Page 1</h1>
    <p>Lorem ipsum dolor sit amet,...

JavaScript

(function () {
    
    addthis.init();

    function navigatePage(e) {
        var pageId = $(this).attr("id"),
            $pageContent, sharingMarkup, content,
            config = $.extend(true, {}, window.addthis_config),
            share = $.extend(true, {}, window.addthis_share);

        if (pageId != "pageContent") {

            config["some_property"] = "some value";
            share.title = $(this).html();
            share.url = "http://" + pageId + ".not-a-tld";

            $pageContent = $("#pageContent");
            sharingMarkup = $("#sharing_markup").html();
            content = $("#" + pageId + "content").html();
            $pageContent.html(content + sharingMarkup);

            // Create the AddThis toolbox, with the new settings
            addthis.toolbox(".page_sharing_toolbox", config, share);
            // A separate toolbox with a Facebook Like button in it
            addthis.toolbox(".page_sharing_facebook", config, share);
        }

        $("#page1,#page2,#page3").click(navigatePage);
    }

    navigatePage.call(document.getElementById("pageContent"));

}());