Embedded twitter timeline widget breaks with back button

lsimoneau commented 10 years ago

The provided JavaScript code allows Twitter share buttons to work with turbolinks, but the embedded timeline widget doesn't reload when navigating with the back button.

reed commented 10 years ago

Hey, sorry it took me so long to respond to you. Here's a solution that I think works:

Like solution 2 on the site, include the twitter script inside the head:

<head>
  <script src="//platform.twitter.com/widgets.js"></script>
</head>

Then, in your views, replace all of your timeline <a> tags like this:

<!-- before: -->
<a class="twitter-timeline" 
  href="https://twitter.com/twitterapi" 
  data-widget-id="YOUR-WIDGET-ID">Tweets by @twitterapi</a>

<!-- after: -->
<div class="twiiter-timeline-container" 
  data-widget-id="YOUR-WIDGET-ID" 
  data-widget-options="<%= { borderColor: '#abcdef' }.to_json %>">
</div>

Then use this javascript:

$ ->
  twttr.ready ->
    renderTimelines()
    $(document).on 'page:change', renderTimelines

renderTimelines = ->
  $('.twitter-timeline-container').each ->
    $container = $(this)
    widgetId = $container.data 'widget-id'
    widgetOptions = $container.data 'widget-options'

    $container.empty()
    twttr?.widgets.createTimeline widgetId, $container[0], null, widgetOptions

The data-widget-options attribute is optional. Use it for customizing the widget.

And that's it. Try it out and let me know how it goes.

asukiaaa commented 9 years ago

Thank you! This is a way that I'm looking for!

asukiaaa commented 9 years ago

I could not get initial loading with above codes. Following codes works well.

app/assets/javascripts/twitter.js.coffee

$ ->
  loadTwitterSDK()
  $(document).on 'page:change', renderTimelines

loadTwitterSDK = ->
  $.getScript "//platform.twitter.com/widgets.js", ->
    renderTimelines()

renderTimelines = ->
  $('.twitter-timeline-container').each ->
    $container = $(this)
    widgetId = $container.data 'widget-id'
    widgetOptions = $container.data 'widget-options'
    $container.empty()
    twttr?.widgets.createTimeline widgetId, $container[0], null, widgetOptions

kirqe commented 9 years ago

Can I somehow add data-chrome="nofooter noscrollbar transparent" to the widget

benbarber commented 9 years ago

@railsr You can pass chrome options through with your data-widget-options like in the example below:

<!-- after: -->
<div class="twiiter-timeline-container" 
  data-widget-id="YOUR-WIDGET-ID" 
  data-widget-options="<%= { borderColor: '#abcdef', 
                             chrome: 'nofooter noscrollbar transparent' }.to_json %>">
</div>

Hope that helps.

kirqe commented 9 years ago

@BenBarber Thanks. I was trying to add data-chrome: '...' This is why it didn't work. Works great now.

mcade commented 9 years ago

I'm trying to use the code snippet @asukiaaa suggested along with jquery-turbolinks but whenever i hit the back button my widget duplicates itself. it has to do with https://github.com/kossnocorp/jquery.turbolinks#events-firing-twice-or-more but how do i alter this code to make it so that it won't duplicate when used with jquery-turbolinks?

kirqe commented 9 years ago

@mcadenhe As I remember I got the same problem. Place require_tree above jquery turbolinks.

//= require jquery
//= require jquery_ujs
//= require_tree .
//= require jquery.turbolinks    
//= require foundation  
//= require turbolinks

mcade commented 9 years ago

@railsr that works, thanks! it is a bit off-putting though since the jquery-turbolinks documentation explicitly states:

require it immediately after jquery.js. Your other scripts should be loaded after jquery.turbolinks.js, and turbolinks.js should be after your other scripts.

reed / turbolinks-compatibility

Embedded twitter timeline widget breaks with back button #22