Styling the new twitter widget (embedded timeline)

Question

A few days/weeks ago, some of my sites\' twitter widgets stopped pulling through data properly. Turns out Version 2 twitter widget is deprecated, and the new embedded timeli

Answer 1

Applying styles to the Twitter feed

I would like to build on the answer provided by user2787001. I was finding that even with this approach (using waituntilexists.js on the iframe) the styles were not always being applied. Waiting for the iFrame to load is significant as twitter loads this on the fly. However the iframe then has to load its content; the webpage containing the Twitter feed and should this take longer than expected we will again be trying to apply styles to something that is not there. Ultimately we want to check that the styles have actually been applied on the page within the iframe, only then can we be satisfied that the job is done.

To apply the styling I have referenced a standalone stylesheet containing the appropriate styles, using . In order to make sure this has been successfully applied I have given it an id (#twitter-widget-styles) which can be checked to confirm the stylesheet has been placed.

Rather than using the waituntilexists.js plugin I have mimicked its behaviour by using window.setInterval. Do not use window.setTimeout with an arbitrary delay. It is quite possible the twitter iframe and its content will take longer to load than anticipated. If the delay is too short styles will fail to apply. If the delay is too long then your users are shown a flash of unstyled content (FOUC)

(note: #twitter-widget-0 is the id twitter uses on its iframe)

//Add twitter widget styling
var $iframeHead;

var twitterStylesTimer = window.setInterval(function(){

    $iframeHead = $("iframe#twitter-widget-0").contents().find('head');

    if( !$('#twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
        $iframeHead.append('');
    }else if( $('#twitter-widget-styles', $iframeHead).length ){    //If stylesheet exists then quit timer
        clearInterval(twitterStylesTimer);
    }

}, 200);

Limit number of checks

One small consideration, if the iframe fails to load or the stylesheet never gets applied the timers will run indefinitely. If this is a concern counters can be added to quit the process after a certain number of attempts:

//Add twitter widget styling
var quitStyleCount = 0;
var $iframeHead;

var twitterStylesTimer = window.setInterval(function(){

    $iframeHead = $("iframe#twitter-widget-0").contents().find('head');

    if( !$('#twitter-widget-styles', $iframeHead).length ){ //If our stylesheet does not exist tey to place it
        $iframeHead.append('');
    }else if( $('#twitter-widget-styles', $iframeHead).length || ++quitStyleCount > 40){    //If stylesheet exists or we've been trying for too long then quit
        clearInterval(twitterStylesTimer);
    }

}, 200);

Delay times (200ms in the example) and the break counters (40 cycles) can be altered as required.

Cross domain restrictions

As for concerns regarding inserting code into an iframe. If we look at the iframe rendered by twitter it has no src attribute that would pull content from another domain:

I've not investigated this fully but I expect the iframe content is generated on the fly from the twitter script running on the client machine. Therefore interacting with it does not breech any cross domain restrictions.

Limiting number of tweets

To limit the number of tweets use the data-tweet-limit="x" attribute on the anchor tag used on the embed code

Tweets by xxxxxxxxxx...

This is discussed in the twitter documentation:

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.

Remove vertical scroll bars

I'd need to see your code to give a definite answer. There is an attribute that may solve your problem, again discussed in the twitter documentation, under the section "Chrome":

data-chrome="noscrollbar"

noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.

CSS styling may also give control over scrollbars with options such as overflow: hidden.