Embedded twitter timeline widget breaks with back button
Opened this issue · 9 comments
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.
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.
Thank you! This is a way that I'm looking for!
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
Can I somehow add data-chrome="nofooter noscrollbar transparent"
to the widget
@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.
@benbarber Thanks. I was trying to add data-chrome: '...'
This is why it didn't work. Works great now.
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?
@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