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 timeline widget is the only way to go, apparently.

https://dev.twitter.com/blog/planning-for-api-v1-retirement

Except this new widget creates an iframe, which prevents any custom styling of the widget from within my own stylesheets - such as setting the font family, font size, colours, etc.

Is there a workaround? From what I'm reading, you can't apply / inject styles into an iframe, and I can't find any API-way of doing it.

I'd also like to limit the widget to just the 3 most recent tweets; not sure if that's possible anymore, and to remove the vertical scroll bar (probably related to limiting the tweets).

Answer 1

Instead of targeting individualy the elements with jQuery you can try to inject some inline css style into the head of the page loaded inside the iframe, so new content loaded by the "show more" button will also be changed :

for example to remove avatars pictures :

$("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');

I use the waituntilexists.js plugin to detect when the content is added to DOM instead of the setTimeout(): https://gist.github.com/buu700/4200601

so we have :

$("iframe#twitter-widget-0").waitUntilExists(function(){
    $("iframe#twitter-widget-0").contents().find('head').append('<style>img.u-photo.avatar{display:none !important;}.header.h-card.p-author{padding-left:0;}</style>');     
});

Answer 2

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 <link rel="stylesheet"... >. 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('<link rel="stylesheet" href="/stylesheets/twitter-widget.css" id="twitter-widget-styles">');
    }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('<link rel="stylesheet" href="/stylesheets/twitter-widget.css" id="twitter-widget-styles">');
    }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:

<iframe frameborder="0" height="200" id="twitter-widget-0" scrolling="no" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: medium none; max-width: 100%; min-width: 180px; width: 520px;" title="Twitter Timeline"></iframe>

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

<a class="twitter-timeline" data-tweet-limit="3" href="https://twitter.com/xxxxxxxxxxxx" data-widget-id="xxxxxxxxxxxxx">Tweets by xxxxxxxxxx</a>...

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.

Answer 3

This is working for me

function twitterfix() {

    if(typeof $("#twitter-widget-0").contents().find(".load-more").html() == 'undefined') {
        setTimeout(twitterfix, 500);
        }
    else {
        var head = $("#twitter-widget-0").contents().find("head");
        head.append('<link type="text/css" rel="stylesheet" href="wp-content/themes/mywordpresstheme/style.css">');
        head.append('<style>.h-entry.tweet.with-expansion.customisable-border {border-bottom: 1px solid #EFEEEE;}</style>');
        }
}

$(document).ready(function () {

    twitterfix();

});

wiki.workassis.com

Answer 4

This is what I did. If you limit the number of posts, it automatically removes the slider.

<a  class="twitter-timeline"  href="https://twitter.com/YOUR_ACCOUNT_NAME"  data-widget-id="YOUR_ID_HERE" data-tweet-limit="4">Tweets by @YOUR_ACCOUNT_NAME</a>

Answer 5

Simple enough to set the number of Tweets:

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.

Not sure how to remove the user icon though.

Answer 6

The timeline inserts an iframe into the page, so why not just get the contents of the iframe and do whatever with it?

Here is how its done with jquery for example:

$($('#IFRAME_ID').contents().find('body'))

You now have the complete twitter feed as a DOM tree, do whatever you want.