AddThis Wordpress plugin not working with AJAX theme

Question

I'm using the AddThis Wordpress plugin to include share buttons underneath each post in an AJAX theme, and am having trouble getting the code right.

I inserted the following code in the custom button field on the settings page:

<div class="addthis_toolbox addthis_default_style" id="toolbox">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
</div>

Then in the post loop in the main page PHP file I have this:

<script>
    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>';
    });

    function ReinitializeAddThis() {
        if (window.addthis) {
            window.addthis.toolbox("#toolbox");
        }
    }
</script>
<iframe style="display: none;" onload="ReinitializeAddThis();"></iframe>

The buttons will only load sporadically, and disappear after a refresh. I'm also getting the error Uncaught ReferenceError: ReinitializeAddThis is not defined which is confusing... I'd really appreciate any insight and I apologize if anything is unclear. Thanks!

<iframe style="display: none;" onload="ReinitializeAddThis();"></iframe> - what is this? — montrealist
@dalbaeb It's part of the code I took from this thread (bit.ly/18kLKoQ) on activating AddThis after an AJAX load. My understanding is that it's supposed to execute the ReinitializeAddThis(); function. (edited link, having trouble with the markdown) — bedlogic
Are you loading the button via AJAX? If not then research for a cleaner way of including it in the page and your problem will go away. — montrealist
I am not loading via AJAX. This is the solution I came across while researching the use of the plugin in AJAX themes. The solution worked for other users but is not working properly for me, which is why I posed the question here. Thanks! — bedlogic
Well, this solution is for "loading ... AddThis toolbox, into a page via AJAX", which seems to be not your case. Have you tried a standard way of including the AddThis button? If not try it. — montrealist

bedlogic bedlogic · Accepted Answer · 2013-05-24T03:27:22

I have arrived at a solution, so I'll post it here in case anyone ever runs into the same problem.

On the AddThis settings page, I pasted this code into the "custom button" field:

<div class="addthis_toolbox addthis_default_style" id="toolbox">
    <a class="addthis_button_preferred_1"></a>
    <a class="addthis_button_preferred_2"></a>
    <a class="addthis_button_preferred_3"></a>
    <a class="addthis_button_preferred_4"></a>
    <a class="addthis_button_compact"></a>
</div>

Then in the post loop within the main page PHP file:

<script type="text/javascript">
        $(document).ajaxComplete(function(){
            console.log("All AJAX requests completed");

            if (window.addthis) {
                window.addthis.toolbox(".addthis_toolbox addthis_default_style");
                console.log("AddThis rendered")

            };
        });
        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>';
        };
    </script>

This calls the window.addthis.toolbox() function for each individual post and creates a sharing toolbox after AJAX has rendered as specified on this page.

AddThis Wordpress plugin not working with AJAX theme

1 Answers