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

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 2

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 3

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.

Answer 4

In the Microsoft MVC world there are helpers in the Microsoft.Web.Helpers library, specifically using:

@Twitter.Profile(...

The above is just a wrapper around the V2 widget, but indicates there is a high usage of that particular widget.

I've looked into your question for a while now (in fact when the deprecation message started appearing) and I have come to the following conclusions:

1. The widget will not be deprecated due to its wide use
2. If it is deprecated a far richer timeline widget will be available
3. Failing this it will be the case of using the API and writing our own widgets, which will be a step back for Twitter

Answer 5

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.

Answer 6

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.