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

admin管理员组

文章数量:1324843

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  to customize -->
<script type="text/javascript" src="//s7.addthis/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  to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis/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/js/300/addthis_widget.js#pubid=ra-xxx");
    });
</script>

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./get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis./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./get/smart-layers to customize -->
<script type="text/javascript">$(document).ready(function() {

    var script="//s7.addthis./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./js/300/addthis_widget.js#pubid=ra-xxx");
    });
</script>

• javascript
• ruby-on-rails
• addthis
• turbolinks

Share Improve this question Follow edited May 23, 2017 at 12:16 CommunityBot 111 silver badge asked Feb 13, 2014 at 20:39 user3304086user3304086 91111 gold badge99 silver badges2020 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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./js/300/addthis_widget.js#pubid=ra-xxx");
}

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

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./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.

This is the only thing that worked for me:

When calling addthis do this:

<script type="text/javascript" src="//s7.addthis./js/300/addthis_widget.js#pubid=<YOUR PUB ID HERE>"></script>
        <!-- Go to www.addthis./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./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);

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.

本文标签： javascriptHow to make AddThis to work with Rails 4 turbolinksStack Overflow