1

How can I setup the timeout before a refresh on Twitter embedded timelines?

I need change the timeout time to update the twitter timelines on my site. Currently each second the twitter API do a ajax request to update the timelines. But on browser with slow engines of JS (in other words: IE), causes the browser becomes slow or sometimes causes the browser to stop working.

To fix this I want setup the timeout before a refresh on Twitter timelines

I didn't found any reference on API about how I can do this.

I'm using the follow JS code to import the timeline:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p='https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p "://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

To show the timelines I'm using a HTML like code shown below:

<div class="box-twitter">
<p class="title-box"><span class="icon"></span>WHAT'S HAPPENING ON TWITTER </p>
<a class="twitter-timeline"  href="https://twitter.com/search?q=from:dev include:retweets"  data-widget-id="394816085830025216"><img src="preloader.gif" style="margin-left: 132px; margin-top: 20px;"/></a>

Someone know how can I solve this problem?

Thanks.

  • I wasn't aware that twitter api loaded timelines refreshed every second. This causes performance issues on IE10 and IE11? – Trevor Nov 7 '13 at 18:06
  • I've only found this performance issues only on IE7, IE8 and IE9. I didn't test on IE10 and IE11. – Samuel Freitas Nov 7 '13 at 18:14
  • I'll remove my answer for now if it looks like its not solving your problem.. But that makes me think that its not the updating or polling of the twitter timelines that is causing the problem because setting a data-tweet-limit should stop the polling for updates completely. – Trevor Nov 7 '13 at 18:49
2

After do a reverse engineering, on widget.js file, provided by Twitter. I've found a method called 'schedulePolling', with the code below:

schedulePolling: function(e) {
var t = this;
if (this.pollInterval === null) return;
e = twttr.widgets.poll || e || this.pollInterval || 1e4, e > -1 && window.setTimeout(function() {
    this.isUpdating || t.update(), t.schedulePolling()
}, e)

To increase the timeout I've added a fixed value on this code.

schedulePolling: function(e) {
var t = this;
if (this.pollInterval === null) return;
e = 60000 || e || this.pollInterval || 1e4, e > -1 && window.setTimeout(function() {
    this.isUpdating || t.update(), t.schedulePolling()
}, e)}

I've replaced the code twttr.widgets.poll for the time that I wanted '60000';

After do this a save the widget.js with my customized code.

So, after this customization I've modify the line where the Twitter API was imported, changing the default value //platform.twitter.com/widgets.js to the path of my customized file my-site/js/customized_widgets.js.

This is the result.

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p='https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"/my-site/js/customized_widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
2

I believe setting a Tweet limit could be an option.

Tweet limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

https://dev.twitter.com/docs/embedded-timelines

e.g.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter" data-tweet-limit="3">Tweets by @twitterapi</a>

And then if desired you could update your widgets manually, by removing them reinserting the html then calling.

twttr.widgets.load()

  • That wasn't enough. Into another page this performance issue still happens. The problem are caused because the multiples request made by twitter API makes a overhead the JS engine of browser. – Samuel Freitas Nov 7 '13 at 18:32
  • @SamuelFreitas That's odd according to twitter if you use that option the widget won't poll for updates. I'll have to test it on my end later and see what I find. – Trevor Nov 7 '13 at 18:34
  • That's right. But on my page has three timelines. So when I add this attribute value order still remained high. – Samuel Freitas Nov 7 '13 at 18:40
  • 1
    And i'm assuming you set the data-tweet-limit for all three of your timelines? What happens if you set the limit to something ridiculously low like 1? – Trevor Nov 7 '13 at 18:41
  • To reduce the overhead, instead of update the timeline each second, I want run the update once per minute. – Samuel Freitas Nov 7 '13 at 18:46

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.