How to make AddThis to work with Rails 4 turbo-links?

Question

I am trying to set AddThis plugin on my Rails site but currently have only partial success. The problem is it doesn't work as it should with turbo-links. AddThis share buttons appear only after page refreshes. If I click on some other part of site, AddThis toolbar disappears. If I would disable turbo-links, then it would work on each part of the site.

This is the code get when I generate smart layers:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx"></script>
<script type="text/javascript">
  addthis.layers({
    'theme' : 'transparent',
    'share' : {
      'position' : 'left',
      'numPreferredServices' : 5
    }   
  });
</script>
<!-- AddThis Smart Layers END -->

That code of course doesn't work with turbo-links. I found this solution' how to make add this work with turbilinks rails 4, where author confirmed it works but I still have problems when I click on some other part of the site.

I tried to insert this code inside head tag in my application.html.erb file:

<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis.com/js/300/addthis_widget.js#pubid=xxx";

    if (window.addthis){
        window.addthis = null;
        window._adr = null;
        window._atc = null;
        window._atd = null;
        window._ate = null;
        window._atr = null;
        window._atw = null;
    }
    $.getScript(script, function(){
        addthis.layers({
            'theme' : 'transparent',
            'share' : {
              'position' : 'left',
              'numPreferredServices' : 5
            }   
        });
    });
});
</script>
<!-- AddThis Smart Layers END -->

AddThis again normally loads after I open my site but as soon I switch to other part of site, AddThis disappears.

How can I make that script to work on every part of my site with turbo-links enabled?

EDIT 1:

Also tried this but without success:

<script type="text/javascript">

    $(document).on('page:change', function() {
      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
    });
</script>

Livestock

Answer 1

Have you tried this:

#app/assets/javascripts/application.js
addthis = function() {

      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Finally, load addthis
      $.getScript("//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-xxx");
}

$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);

Ingaingaberg

I did a little change adding a .done to getScript to load a addthis.layers call and configure the widget. – Jerrine

I get Uncaught ReferenceError: addthis is not defined on my staging server when I put that in my application.js file – Sibyls

this did not work for me, will post, getScript was not working, while putting script tag did – Crotchet

Answer 2

This solution does not need event handlers.

First, I created a partial on app/views/layouts/_add_this.html.erb:

<script type="text/javascript">
  if (window.addthis) {
    window.addthis = null;
    window._adr = null;
    window._atc = null;
    window._atd = null;
    window._ate = null;
    window._atr = null;
    window._atw = null;
  }
</script>
<script src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=XXXXXXXXX" type="text/javascript"></script> 

Then, whenever I need add this, I use:

<%= render 'layouts/add_this' %>

For some reason getScript did not work for me.

Crotchet

Answer 3

This is the only thing that worked for me:

When calling addthis do this:

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>"></script>
        <!-- Go to www.addthis.com/dashboard to customize your tools -->
        <div class="addthis_sharing_toolbox"></div>

make sure to include this file after turbolinks and jQuery in your application.js file:

addthis.js

//fixes social addthis links
var addthis;
addthis = function() {
    var script = 'http://s7.addthis.com/js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>#async=1';
      // Remove all global properties set by addthis, otherwise it won't reinitialize
      for (var i in window) {
        if (/^addthis/.test(i) || /^_at/.test(i)) {
          delete window[i];
        }
      }
      window.addthis_share = null;

      // Remove all global properties set by addthis, otherwise it won't reinitialize
      if(window.addthis) {
           window.addthis = null;
            window._adr = null;
            window._atc = null;
            window._atd = null;
            window._ate = null;
            window._atr = null;
            window._atw = null;
      }

      // Finally, load addthis
      $.getScript(script, function(){
        addthis.toolbox('.addthis_toolbox');
      });
}

$(document).ready(addthis);
$(document).on('page:load', addthis);
$(document).on('page:change', addthis);

Sibyls

why you delete and then set to null? – Crotchet

Answer 4

Remove the turbolinks effect for addthis js. You can use jquery-turbolinks gem. You just have to follow the guide and install the gem then put in application.js jquery-turbolinks like this:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

After this Turbolinks will work perfect for pages loading but allows our js and jquery to load before turbolinks gets into effect.

You can see the details on usage of this gem by going on this blog post.

Consequent