Tweet limits, scrollbar options, multi-element load() now available in timelines and widgets-js


#1

Hi everyone.

We put some small updates out this afternoon to embedded timelines, and widgets-js in general.

Tweet Limit feature for embedded Timelines

You can now add an attribute to your embedded timeline code, data-tweet-limit=“5” (between 1 and 20) that will render your timeline as a fixed, static set of Tweets, autosized to the content, with no scrollbars.

Added noscrollbar option to timeline chrome settings for regular scrolling timelines

You can now add noscrollbar as a value to the data-chrome settings of your widget which will hide the scrollbar in all browsers, where a scrollbar would ordinarily be visible. A lot of you have been asking for this feature, so we’ve added the option. I do urge you to consider the accessibility implications of hiding standard UI from users though, and where it’s appropriate in the context of your site or application.

twttr.widgets.load() can now be called with an array of target elements

Previously, the twttr.widgets.load() function would either search the entire page body, or just a single root node when initializing lazy-loaded widgets in your page. You can now pass an array of HTMLElement objects to the function, which should enable developers to pursue even more efficient and performant content loading (for example, all Tweet Embeds found within a provided array of root elements will be fetched in a single HTTP request.)

The following documentation pages have been updated with more detail about the new features:

[node:10248]
[node:184]


#2

Awesome! thank you for this!


#3

dank je wel


#4

Amazing!


#5

So cool ! Everybody expected that.

EDIT: It seems that noscrollbar kill noheader. Did someone get the same bug ?


#6

Hi Julian.

The two options should be completely independent, seems to work for me. Perhaps make sure you’re separating the options with spaces and not commas or anything like that? Paste a copy of your embed code if you like and I’ll take a look.

Ben


#7

Hi Ben,
Basically it was due to a double spaces between parameters, everything is fine now :slight_smile: Love that feature. I really think it’s the way to make people use widgets : streams so bettter rate limits, no complexe coding and now better looking. Perfect if you just want to show some tweets.


#8

Hi. What I really what is to (like you used to be able to have it) a) to remove pictures, b) be able to set the height smaller, c) to be able to set the font size. I’ve had to set the data-tweet-limit=“1” to get the height right (where I used to be able fit 2 or 3 in).

Can I change the background colour to what I want as well please? I basically want my twitter feed to blend into my website, rather than having to change my website to blend into your design decisions.


#9

Ah! Thanks for the diagnosis Julien. We should definitely be more tolerant of minor variances like that. I’m glad you got it fixed, I’ll fix up the option parsing in our code in a future release to make it not fail in that case.


#10

Hi,

Rather than provide a parameter for an explicit background colour we instead add the data-chrome=“transparent” option; this allows you to set a background colour, image, or CSS gradient on the container and have it show through, rather than needing to provide every permutation to the widget. So, add that and you should be able to get what you want there.

As for removing user avatars: User identity and attribution is something we regard as really very important, and as such, our Tweet layout and anatomy regards the name and icon for a user as essential. Therefore, we’re not considering adding that option to our timeline tool at this time.

Now, I hear the argument that it may be repetitive when displaying a single user’s timeline, but in that situation it’s especially important to us that Retweets are well attributed in amongst the others; that’s how we do it on the website, too.

Ben


#11

I’m losing the expand functionality when I utilize “data-tweet-limit”.

The expand for photos and tweets work fine until I add this to the tag. Removing data-tweet-limit brings back the expand functionality. Been messing with noheader, nofooter as a trial to see if a combination brings it back but so far…no

http://www.fxguide.com


#12

Hi.

That’s by design for now.

When you use data-tweet-limit the widget will auto-size to display all Tweets in that range, and not scroll. We don’t enable Tweet expansion as that would alter the size of the content and either reintroduce scrolling, or we’d have to resize the frame again; either pushing other elements in your page around while the expansion animated, or requiring a horrible number of reflows and repaints of the parent page if we tried to expand the Tweet and the iframe sandbox in tandem.

As such, for the time being at least, we kept the mode simpler and viewing expanded content simply redirects to the Tweet permalink.

It’s not infeasible that we could revisit it in future, but for now the scope is kept simple.

Ben


#13

Fair enough – that makes total design sense. I can somewhat do same thing with a fixed height and no scrollbars.

Not repainting the page is a good idea, as that can significantly impact performance. I was thinking it could be an overflow:hidden; but totally get your point.

Thank you for the very fast response!


#14

I regard User identity as important as well, but when pushed for space, name will do. But I just wish companies didn’t rip everything up and start again, without giving us the option to keep the same (or similar) design. We software developers seem very good at demanding everyone change because we have decided it is ‘for the best.’

The new widget just isn’t useful to me, I can’t use it on my website without a major redesign (or making twitter an overbearing part of the design), therefore I there is no longer a use for Twitter for me. You’ve made your choices and I’m fine with that.

Thanks for taking the time to respond though.


#15

Hey, its saying something about a “noscrollbar” option. Actually I cant see it in my Twitter Timeline Widget as part of Jetpack for Wordpress … its not there :frowning: Everything else seems to work! I am using the latest version! So dont know if its a bug or whatever!?
Another question would be where I can find these “data-chrome settings” to put in “noscrollbar” and limit the tweets to 3 or so … is it part of a PHP?
Thanks for your help


#16

Hi,

I can’t speak directly to the functionality of the WordPress plugin itself, I’m afraid. These settings are modifications of the embed code itself. So, for example, a standard widget embed code looks something like this (your WordPress plugin may be generating it for you):

@BenWard

To hide the scrollbar:

@BenWard

It’s likely that in the future we’ll add at least some of these new configuration options to the widget settings page itself which will make configuration easier.

Ben


#17

Thanks Ben,

any idea where I can put this code:

@BenWard

do I have to find something like this within my widget .php file? Sorry, but I am pretty new to coding.

Thanks


#18

I agree. It’s not a workable tool if we can’t redesign it to fit our layout design.


#19

Can we please get an option to hide avatar? They look like butt on my footer (because I have a dark background) http://fairstate.coop/index2.html

Also the show photo icon has a weird background color
Can we disable the following on “data-chrome= transparent”?:

.thm-dark i.ic-pho {
background-position: -60px -59px;
}


#20

this code doesnt display in FF21 and IE9 when I add data-tweet-limit=“1” into it

Tweets by @hunting_party