ShareThis not working after installing Turbolinks and Jquery-Turbolinks

[rooshdi]

I've recently installed the turbolinks and jquery-turbolinks gems and now the ShareThis button doesn't popup like it used to when clicking.

I currently have these ShareThis scripts in my application.html.erb head:

<script type="text/javascript">var switchTo5x=false;</script>
<script type="text/javascript" src="https://ws.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "redacted-redacted-redacted"});</script>

Here is the code on my show.html.erb page:

<span class='st_sharethis_custom'></span>

Any help is appreciated. Thanks!

[reed]

I was able to get it working (as far as I know) by doing this:

1. Remove the script tags you listed from the html

2. Add the following coffeescript to your application's javascript:

   $ ->
    ShareThisTurbolinks.reload()
   
   $(document).on 'page:restore', ->
    ShareThisTurbolinks.restore()
   
   ShareThisTurbolinks =
    load: ->
       window.switchTo5x = false
       $.getScript 'http://w.sharethis.com/button/buttons.js', ->
          window.stLight.options
             publisher: 'publisher id'
   
    reload: ->
       stlib?.cookie.deleteAllSTCookie()
       $('[src*="sharethis.com"], [href*="sharethis.com"]').remove()
       window.stLight = undefined
       @load()
   
    restore: ->
       $('.stwrapper, #stOverlay').remove()
       @reload()

Does that work for your application?

[rooshdi]

Alright, seems to be working after replacing with https://ws.sharethis.com/button/buttons.js. Thanks!

[reed]

No problem. Glad I could help.

[krnjn]

@reed could you fix the $.getScript 'http://w.sharethis.com/button/buttons.js', -> with the right URL (https://ws.sharethis.com/button/buttons.js) on the main site page: http://reed.github.io/turbolinks-compatibility/sharethis.html

It doesn't work otherwise and I had thought it was an incorrect solution-- turned out to just be the typo!

[reed]

Sorry about that. It's fixed now.

[nickjj]

Thanks this seems to work as it displays properly on both a full page reload and a turbolink click through.

@reed do you have any ideas on how to get the hash in the url to work? I tried adding in the hashAddressBar property and it does work on a full page load but since we set stLight to null for the reload then we can't set the hasAddressBar that way for when someone clicks through with turbolinks.

[reed]

So this doesn't work?

ShareThisTurbolinks =
  load: ->
     window.switchTo5x = false
     $.getScript 'https://w.sharethis.com/button/buttons.js', ->
        window.stLight.options
           publisher: 'publisher id'
           hashAddressBar: true

[nickjj]

Correct. When you do that it works for a full page reload but it won't update the address bar when you follow through from an existing page.

[reed]

I don't use ShareThis, so could you help me out and explain what the hashAddressBar setting is supposed to do?

[nickjj]

@reed This is my first time setting it up too. It adds #dsf7sdf6sf3h (a random unique hash) to the end of the url when the page loads. I suppose the reasoning behind it is you can track direct shares now that the url is different.

[reed]

Are you using the solution I posted on this thread, or the one I published? The one on this thread assumes you're using jquery.turbolinks, so if you're using this solution without it, that could be your problem.

[nickjj]

I'm using the version from http://reed.github.io/turbolinks-compatibility/sharethis.html but with the correct URL to the js file. I'm not using jquery.turbolinks since usually all it takes is binding a function to both dom:ready and the page:load event to get most JS to work.

[reed]

Looking through the ShareThis script, I think you might have to set doNotHash to false as well.

ShareThisTurbolinks =
  load: ->
     window.switchTo5x = false
     $.getScript 'https://w.sharethis.com/button/buttons.js', ->
        window.stLight.options
           publisher: 'publisher id'
           hashAddressBar: true
           doNotHash: false

That said, I'm not sure I would use this feature. It uses history.replaceState, thus overwriting the Turbolinks state object. Meaning if you ever hit the back/forward button to go back to this page, Turbolinks wouldn't find it in the cache and have to re-fetch it.

[nickjj]

Hmm I wasn't aware of that, that does seem like undesirable behavior. Maybe it's for the best that I couldn't get it working.