New feature: Dynamic timeline selection for embedded timelines


#1

Hello everyone,

As we’ve hinted in a few threads lately, as part of ongoing improvements to Twitter for Websites tools, we’ve enabled a new feature to make embedded Timelines easier to implement for directories, social networks, publications with multiple authors, and many other use cases.

From now, you can use a single widget configuration to render multiple timelines on your site, and specify different timeline sources (user, favourites, or lists) with attributes added to the embed code itself. The core configuration of size, theme, and colours remains shared, but you can reuse that widget when adding a different author’s profile to your site, or to use a different Twitter List alongside an article. Publishing systems and applications will not require managing duplicate widget configurations for every source on a site.

The documentation has been updated here: https://dev.twitter.com/docs/embedded-timelines#timeline-selection

For example, our team at Twitter can now use a single widget ID to embed timelines for each of us:

With this update, you can reconfigure user, favourites, and list timelines from a single widget ID. Please note that at present, search queries cannot be reconfigured. We’re aware there are uses for doing so, and will continue to build new timeline features in the future.

We hope you find the enhancements useful, and look forward to seeing the things you build.

Ben


#2

awesome, thanks for optimizing


#3

great! any future considerations to allowing multiple sources for an embedded timeline? i.e.: a user, list & hastag all displaying in one timeline.


#4

+1. This would be tremendous.


#5

So, we don’t have plans for anything specifically like that, but there’s some sort-of related stuff for the future and I’ll pass this suggestion into the mix.

In the interim, you can can create mixtures of sources with advanced search queries: Combinations of from:tif_nee OR #hashtag can be used to create more complex combinations.

You can use https://twitter.com/search-advanced to build the timeline, and then click ‘Embed this Timeline’ from the cog menu on the results page.

Ben


#6

Is it in any way possible to add multiple dynamic timelines with the same widget-id to the same page?


#7

Hi Jeroen,

That is something that should work, but I can see it might be buggy right now due to the way our callback names are constructed. Your experience with doing so might be unpredictable, and I’ll investigate a fix for it soon.

Thanks,

Ben


#8

@Benward . How can i get latest tweets Using the new API version 1.1. I created widget and i get the Widget code, later on i put that code in my template page? Worked Fine? Is there be any way to control widget stream. instead of getting different timelines , i only need one timeline tweets.


#9

Hello BenWard as you mentioned before: “search queries cannot be reconfigured”.
So I have a question should i rework the way I display it on my sites or it ll be implemented soon?
I would like to hear your opinion.
Thanks in advance.


#10

fantastic, thank you very much!


#11

Hi Pechorin,

It’s not something we’re working on right now, and unfortunately there are some slightly tricky implementation details we need to figure out if we’re to make it happen. I can tell you I’d like to have the feature, but I can’t offer a timescale I’m afraid. As such, I’d advise you go ahead and rework using the API directly.

B


#12

SOLVED: Use twttr.widgets.load();

How can I reload the javascript widget if I dynamically re-render the widget link using jquery

$(’.twitter-timeline’).replaceWith(‘Tweets by ’ + twitter_username +’’);
All I get is “tweets by gt565k” without the actual widget reloading

Is there a function I can call to refresh/reload the widget?


#13

Hi Mladen,

To dynamically load a widget, use the twttr.widgets.createTimeline() function. Check out [node:184, title=“TFW JavaScript interfaces documentation”] for full detail, but for the code you’ve used there, something like this might work:

twttr.widgets.createTimeline(
‘your-timeline-id’,
// your ID
$(’.twitter-timeline’)[0].parentNode,
// the container element to inject the timeline into
false,
// a callback function, if you want to execute something
// after it renders. Or not.
{ screenName: twitter_username }
// configuration options, in this case the username
// to render
);

Hope that helps.

Ben


#14

My apologies if I’m off topic. Can you let me know if there is still a chance to show the followers box with a widget in my website ? I don’t see such a widget among those that I can select in my twitter profile account (menu “settings”–>“widget”–>“create new”). Thanks.


#15

Hi Ben,

I’m trying to use an advanced search result as an embedded timeline widget… The widget is created alright, but the preview pane keeps telling me: Hmm, an empty timeline. That’s weird.
However if I ‘Check for tweets’ I do get a list of tweets (mostly rather old…)
Do I need to tweet something, which matches my advanced search, in order for the widget result to be created/cached first?


#16

Can you add custom borders as images?


#17

Hello BenWard. I’m right that there is no way to add a search query widget to the account (via REST etc.)?
Thanks in advance.


#18

Hi Ruud,

Check whether you have the “Only show Top Tweets” or “Safe Search Mode” checkboxes within the widget interface checked; these will result in results being filtered. If that doesn’t work, please follow up with an example query and we’ll look into it.

Thanks,

Ben


#19

Correct. We have the override parameters available for other widget types, but at present there’s no way to dynamically generate a widget ID for a search term. You can link to the widget configurator with a query=foo parameter to pre-fill a configuration though, if you’re trying to have it be part of an assisted user flow.

Ben


#20

Not through the widget itself. However, you can use the data-chrome=“noborder” on the embed code, and then render any custom border design you like in your page surrounding the widget.