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

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

I've found that you can use document ready without the settimeout, provided you wrap the widget in a container. This should trigger not only on page load, but on any dynamic content changes in the timeline itself after page load.

jQuery(document).ready( function() {
   jQuery('.twitter-block').on('DOMSubtreeModified propertychange',"#twitter-widget-0", function() {
     //your element changes here.
     //Hide media items
     jQuery(".twitter-timeline").contents().find(".timeline-Tweet-media").css("display", "none");
     //Resize iframe when new content is posted.
     jQuery(".twitter-block").css("height", "100%");
   });
});

Otherwise, I agree with a-gorsky regarding adding a stylesheet into the iframe rather than making the style changes to every element.

Answer 3

The only solution I found with Twitter's Enhanced Timeline is to use javascript to modify the css after the iframe has loaded.

Needed to use window.setTimeout for it. As jamesnotjim mentioned, make sure you put this in the script block below the body tag.

window.setTimeout(function(){
    $(".twitter-timeline").contents().find(".e-entry-title").css("font-family","sans-serif");
    $(".twitter-timeline").contents().find(".tweet").css("font-family","sans-serif");
  }, 1000);

Answer 4

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 5

You can import twitter-widget.js javascript in your own project, then modify some styling from within this .js file.

After, you invoke it instead of invoking the twitter's site library //your.ownsite.web/widgets.js. It is actually working, but no guaranties for the future.

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

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

In the .js, look for this block of code :

setupSandbox: function (a) {
                var b = a.doc,
                    c = b.createElement("base"),
                    d = b.createElement("style"),
                    f = b.getElementsByTagName("head")[0],
                    g = "body{display:none} .timeline{border:1px solid #CCCCCC} .timeline-header{background-color:#F3F3F3;padding:8px 14px;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;} .timeline-header h1.summary{background-color:#F3F3F3; border-bottom:1px solid #EBEBEB; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; font-size:14px; font-weight:400; line-height:18px; margin:0; padding:0;};",
                    h = this,
                    i;

Answer 6

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>