How to use AddThis within a jQuery Fancybox?
Hi guys,
I've got a jQuery Fancybox (http://fancybox.net/) displaying some markup retrieved via an HTTP request. Now I'm fighting with adding an AddThis toolbox to this markup. My first step was to simply add a basic toolbox markup:
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4eb2f6a46482052a&domready=1"></script>
First problem: This markup is not changed by AddThis, i. e. it remains empty.
It may be the case, that the markup is not yet added to the document when the included script is run. So I tried to manually call addthis.toolbox('.addthis_toolbox') after the fancybox is displayed. This call is made, the Chrome debugger shows two steps within the AddThis script and then immediately returns. No changes are made, no errors are thrown.
When I use the exact same markup within a simple page instead the fancybox and call addthis.toolbox('.addthis_toolbox') on load, everything is set up as expected. So it somehow seems like AddThis cannot find the markup. But the fancybox is simply appended to the content of the body element, so I can't see any reason for this.
Do you have any idea how to get this working?
Regards
10 Community Answers
Have you tried adding the AddThis JavaScript to the page, rather than in the FancyBox? Also, could you post a link to your implementation so I could see it running as well?
If I fill and show the FancyBox a second time and then call addthis.toolbox() again, the toolbox gets nearly rendered as expected, but the tweet button - it becomes a simple link saying "Tweet".
Is there some known problem with rendering a tweet button multiple times?
I've got a similar issue with a jQueryUI dialog with html content loaded dynamically. The Addthis markup and scripts are in this html document. I think the problem is coming from the jQuery.load() function.
Paul, do you think the fix you are talking about could fix my issue and when it will be out roughly ? I mean, is it a matter of days, weeks, months ? Thanks for your help.
the Twitter button works for me now. But the AddThis pill is still missing (on every call, not just starting with the second one). Are you working on this? Or couldn't you even reproduce it?
Regards!