Multiple twitter timeline widgets in one webpage but multiple views (cross platform mobile app)

[GalAppelbaum]

Greetings,

I’m building a cross platform app… I am trying to have two different twitter timeline widgets in two different views… the views are defined by divs… they’re all technically in the same tag. While one view works perfectly fine, and two different iFrames are indeed created for the timeline widgets, the 2nd iframe is created empty… The first iframe was full of tweets and whatnot like it should be but the 2nd one has an empty body…

Any idea why that happens? I copied the HTML code from the settings page. I don’t have duplicate tags but rather one tag and two different twitter-timeline tags (with their own IDs and whatnot)… Anything?

Cheers!

[niall]

The Twitter-generated snippets do not include an id attribute. If you see an ID attribute on the element it’s likely you’ve customized the widget or a piece of software sitting between the code you copy-and-pasted and your website display caused an issue.
https://twitter.com/settings/widgets/new/user

Timeline widgets render by executing JavaScript inside of a web browser. If your “cross-platform” implementation includes a web view the widget should display.

If you continue to have issues providing actual snippet examples or a sample URL can help.

[GalAppelbaum]

Hi Niall,

I’m finding some weird things going on… Apparently it does work but not exactly… If I click on View1, it works but when I switch to View2 it doesn’t work… If I restart the app and click on View2 first it works but then View1 doesn’t…

It looks like once the feed is loaded in either views, the next view’s data disappears… If I switch between the two views BEFORE the feed loads (when you can only see the “Tweets by @USER”) then both load fine… If I don’t however, the “Tweets by @USER” of the view I wasn’t on disappear… Any idea why that happens? Or you think this is specific to the framework I’m using. I’m working with Kendo UI by the way.

Thanks for the response man!

PS: I can try to add code snippets, but I don’t know how much it can help since I just copy and pasted from twitter… the ID I am talking about is an iframe id (twitter-widget-0).

[benward]

Hi Gal,

I’m not familiar with the framework you’re using, but the fact that the timeline is empty when you switch view is suspicious. Do you know if the views are help in the DOM at the same time (e.g. just hidden with CSS), or moved in and out when navigating?

Unfortunately when browsers move iframe DOM nodes they refresh their content upon insertion. With regular, remote sourced iframes this causes the content to be reloaded from the network. With sourceless, dynamic content iframes (which is what we use to sandbox embedded Tweets and timelines) the document that we’ve constructed gets obliterated, leaving behind an empty frame. From your description it sounds like this is what’s happening.

The only way to work around this would be to re-render the timeline when your view changes. It’s not ideal since you’ll be waiting for it to render each time, but unfortunately it’s only way to work with the browser behaviour. You may find the [node:25878] useful for this, maybe you can bind to show/hide events in the view framework to trigger twttr.widgets.createTimeline() on demand.

Hope that helps,

Ben

[niall]