Geek Answers Handbook

Javascript: load AddThis on click

I have been puzzling this for quite some time and cannot make it work. Here is the situation. I want the SOCIAL MEDIA panel to display ONLY if people click on some kind of DIV. It should not load unless people click on the div. For social networks, I ADD THIS and the GOOGLE + 1 icon. But I can't get them to load such an external call. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#socialmedia").live('click',function(){ $("#loadhere").load('html-part.html'); $.getScript('js-part.js'); }); }); </script> </head> <body> <div id="socialmedia"> Show the Social Media </div> <div id="loadhere"> </div> </body> </html>

In the HTML part, I have HTML information that needs to be loaded:

HTML-part.html:

 <!-- AddThis Button BEGIN --> <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_counter addthis_pill_style"></a> </div> <!-- AddThis Button END --> <g:plusone size="medium" id="gg"></g:plusone> </div>

For the JS part, I'm struggling. Here's what you need to download:

 <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

I tried to call them one by one:

 $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=ID'); $.getScript('https://apis.google.com/js/plusone.js');

But I guess this is a cross object problem ...?

If I use PHP to get the content and upload a local PHP file, it still doesn't work. Before you spend another day on it ... can this be achieved?

+4
source share
3 answers

The problem is that this code is fired on the dom ready event. When you load it using jQuery, dom is already loaded, so the code is not executing. The fix is ​​to use the addthis.init() method to force code to execute after the code loads. There is no problem with the cross domain or anything else.

Note that according to the addthis documentation, this should be possible by simply passing the get variable through the widget url, like this http://s7.addthis.com/js/250/addthis_widget.js#pubid=[PROFILE ID]&domready=1 , but it didn’t work for me.

I would also recommend that you store html in a string variable, so you don't need to make unnecessary requests for small static html.

See a working demo here: http://jsfiddle.net/z7zrK/3/

 $("#socialmedia").click(function(){ var add_this_html = '<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_counter addthis_pill_style">'+ '</a>'+ '</div>'+ '<g:plusone size="medium" id="gg"></g:plusone>'; $("#loadhere").html(add_this_html); $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx', function(){ addthis.init(); //callback function for script loading }); $.getScript('https://apis.google.com/js/plusone.js'); });
+8
source

Just used amosrivera answer (a huge kiss to you btw :) and ran into another problem:

An Addthis object can only be loaded once, so when you have several addthis toolboxes on the same page, it can only work for the first toolbar.

Workaround:

 if (window.addthis){ window.addthis = null; }

before calling

 addthis.init();

Here is what I just did to start loading buttons only if the article crashed long enough:

HTML:

 <article data-url="someUrl" data-title="someTitle" data-description="someDesc"> ..... <div class="sharing"> <div class="spinner"></div> <div class="content"></div> </div> </article>

JS:

 // Only throw AJAX call if user hovered on article for more than 800ms // Then show the spinner while loading buttons in a hidden div // Then replace the spinner with the loaded buttons $(function() { var t; $("article").hover(function() { var that = this; window.clearTimeout(t); t = window.setTimeout(function () { sharing_div = $('.sharing', that); add_this_html = '<div class="addthis_toolbox addthis_default_style "> \ <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> \ <a class="addthis_button_google_plusone" g:plusone:size="medium"></a> \ </div>'; if (sharing_div.find('.content div').length == 0) { sharing_div.find('.spinner').show(); sharing_div.find('.content').html(add_this_html); sharing_div.find('addthis_toolbox').attr({ 'addthis:url': $(that).attr('data-url'), 'addthis:title': $(that).attr('data-title'), 'addthis:description': $(that).attr('data-description'), }) if (window.addthis){ window.addthis = null; } // Forces addthis to reload $.getScript('http://s7.addthis.com/js/250/addthis_widget.js#pubid=xxx&async=1', function(){ addthis.init(); setTimeout(function() { sharing_div.find('.spinner').hide(); sharing_div.find('.content').show(); }, 2500); }); } }, 800); }); });
+3
source

To answer your official question, yes, I believe that this can be achieved.

But in order to dwell on this in more detail, I believe that you can try to work, this is the order in which your external scripts and external markup are loaded. An interesting situation that we find when working with asynchronous actions, such as these, is that they do not always populate, load, or execute in the order you want, unless you specifically talk about it. jQuery allows you to do this through some callbacks that you can pass to the getScript and load methods.

There should also be no problem with cross domains with javascript files on other domains, although, of course, there is HTML when loading.

I'm not sure if this will exactly solve the problem you are facing, but it seems like it is worth a try. You can try to make sure that the markup is loaded before the scripts are executed:

 $(function(){ $("#socialmedia").live('click',function(){ $("#loadhere").load('html-part.html', function() { // this waits until the "html-part.html" has finished loading... $.getScript('js-part.js'); }); }); });

Now we also need to ask how you create the js-part.js file. (You only showed what you wanted, not what you created.) If this is really a JS file, you cannot just use HTML <script> tags to load other JS files. (Instead, you will want to continue the getScript call in this file or use one of several other methods to load other loaded JS files, for example, manually adding script elements to the document head or using another library, etc ...)

Good luck

0
source

More articles:


All Articles