2

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api

I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.

<div id="toolbox"></div>
<script type="text/javascript">
    addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Eli
  • 14,779
  • 5
  • 59
  • 77
Anagio
  • 3,005
  • 9
  • 44
  • 81

4 Answers4

4

Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');

If you have a typical toolbox like this...

<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_email" style="cursor:pointer"></a>
</div>

Once your ajax content has finished loading into the dom you could do the following...

addthis.toolbox('#myToolbox');

However, watch out for this!

Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.

In the case of multiple toolboxes

you should probably use a class instead. See the following code for the final example.

html

 <div class="toolbox">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a> 
 </div>
 <div class="toolbox addthis_toolbox addthis_default_style ">
    <a class="addthis_button_facebook" style="cursor:pointer"></a> 
    <a class="addthis_button_twitter" style="cursor:pointer"></a> 
    <a class="addthis_button_email" style="cursor:pointer"></a>
 </div>

javascript:

//on complete of ajax load
addthis.toolbox('.toolbox');
Ryan Ore
  • 1,315
  • 17
  • 23
1
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false

};


var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}

addthis.method("#Button2", addthis_config, addthis_share);

Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.

Anushka
  • 2,434
  • 1
  • 17
  • 14
0

method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.

databyss
  • 6,318
  • 1
  • 20
  • 24
-1

You are never really calling anything as you aren't waiting for the DOM to ready:

<script type="text/javascript"> 
    $().ready(function () {
        addthis.method('#toolbox', [configurationObject], [sharingObject]);
    });
</script>
naspinski
  • 34,020
  • 36
  • 111
  • 167
  • Getting an error in chrome `Uncaught ReferenceError: addthis is not defined` – Anagio Jul 09 '12 at 20:28
  • actually, it shouldn't make a difference in this case because the script element is after the DOM element it operates on. So the element will be loaded... – danwellman Jul 09 '12 at 20:29
  • @Anagio - I am assuming that is a function that is defined in a seperate .js file. – naspinski Jul 09 '12 at 20:42
  • 1
    why this has negative rate, I was getting this exact error on random but once places in `ready` function it is now defined. may have something to do with like buttons not yet fully loaded when it is referenced. This is ugly though, there should be some global get_addthis() thingy. – dashesy Jan 19 '15 at 01:34