Member Avatar for josverhoeff

Some years ago, I built in my CMS a customisable twitter widget, for embedded use in web pages. This stopped working since twitter yanked out support last week.

The new timeline widget misses the autoscroll option, but I can live with that.

But it sadly creates several cascading iframes (iframe><iframe></iframe></iframe>), so I need a method to tweak font sizes, colors etcetera in the iframes created by twitter.
so far I have come up with this:

function tweakstyle() {
    var iframe = top.frames[0].frames[0].document; // this is the line that generates the cross domain error
    var otherhead = iframe.getElementsByTagName("head")[0];
    var ilink = iframe.createElement("link");
    ilink.setAttribute("rel", "stylesheet");
    ilink.setAttribute("type", "text/css");
    ilink.setAttribute("href", "style.css");
    var styles = otherhead.appendChild(ilink);
    var css = '' +
              '.timeline {  font-size:11px !important; color:red;}' +
              '';
    styles.innerHTML = css;     
}
setTimeout('tweakstyle()',1000); // to make sure the twitter code has generated it's stuff

But that gave me an invalid cross domain error on the first line.
Does anybody have a suggestion? I googled and none of the solutions that came up work for me.

  • 2 Contributors
  • 3 Replies
  • 301 Views
  • 11 Months Discussion Span
  • Latest Post Latest Post by Coloradojaguar

Dani AI

Generated

A practical note for and anyone hitting the same wall years later: the browser prevents you from poking around the DOM of Twitter’s embedded timeline because the widget runs inside cross-origin iframes. That restriction is enforced by the same-origin policy, so attempts like reaching into frames[...] will always throw in modern browsers unless the iframe content explicitly cooperates.

Two reliable paths to restore control:

  • Use the official embed options the timeline script exposes (link colors, theme, chrome/visibility flags, width/height, tweet limit). Those are limited but safe and keep the widget-managed behaviour intact.
  • If you need full control (fonts, autoscroll, custom filters/search, markup), render the feed yourself. Server-side fetch + cache gives complete styling and UX control, and avoids cross-origin issues entirely.

A minimal workflow and example (pseudo-code) you can adapt:

/* server-side: fetch tweets once, cache for N seconds */
app.get('/api/tweets', async (req,res)=>{
  const cached = cache.get('tweets');
  if(cached) return res.json(cached);
  const tweets = await fetchTwitterAPIwithAuth(); // do this on server
  cache.set('tweets', tweets, 300);
  res.json(tweets);
});

/* client-side: render and optionally auto-scroll */
fetch('/api/tweets').then(r=>r.json()).then(list=>{
  const html = list.map(t=>`<article class="tweet">${escapeHtml(t.text)}</article>`).join('');
  document.getElementById('feed').innerHTML = html;
  // implement auto-scroll by animating the container's scrollTop if desired
});

Notes and cautions: always sanitize tweet text to prevent XSS, respect rate limits and cache aggressively, and implement graceful fallbacks for rate-limit or auth failures. For : Twitter Cards are about link previews, not timeline styling. If you must keep the embedded timeline for convenience, accept the styling limits or host your own rendering for full control.

Recommended Answers

All 3 Replies

Member Avatar for josverhoeff

@alex, thanks for the reply.
I used the new timeline widget as a followup of the old twitter widget, where you could override style settings easily.
I guess I have to look for another followup: I cannot believe that I'm the only one that has a serious problem with a widget that stopped working suddenly, to be replaced by a widget that is infinitely worse (no search parameter you can pass, no auto scroll, not customisable except for a very few lame options)

Member Avatar for Coloradojaguar

I know this is an older post but I was wondering if the twitter cards now resolve these types of issues or have they induced more problems?

Member Avatar for Coloradojaguar

Thinking about this for a few minutes I have obviously misposted. You are talking about the timeline widget not the actual tweets, much less the cards.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.