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

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 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

Go to this site and download this plugin, then you can style in anyway you chose Jason Mayes

Answer 4

If you take a look at widgets.js and look for this line:

e.appendStyleSheet(twttr.widgets.config.assetUrl() + "/" + r("embed/timeline.css"))).then(p.bind(function() {

You can copy timeline.css and modify both files however you like.

Answer 5

I can at least help with limiting the tweets and removing the scroll bar.

From the 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.

And

Chrome: Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code. Use a space-separated set of the following options: noheader, nofooter, noscrollbar, transparent.

Still looking at the styling.

Answer 6

See "client side options" here. But basically, you can slap the whole thing in a styled div, remove the header & footer & make the background transparent. I'm personally still searching for a way to limit the number of tweets & get rid of the user icon.

Here's our code (Drupal block): ok, I can't get the code to show nicely.