Twitter embedded timeline

Unstable feature

The Twitter embedded timeline component is currently not functional due to changes on Twitter's end. Please note that this component is in a deprecated state and may not be supported in the future. We recommend using alternative methods for sharing Twitter content.

A fallback mechanism has been implemented to verify whether the issue still persists. The plugin will attempt to load the Twitter timeline; if unsuccessful, it will default to displaying a link to the Twitter page. If successful, the timeline will be rendered as expected.

Purpose

Helps with implementing Twitter embedded timelines.

Working examples

How to implement

Determine the type of timeline at Twitter for Websites

Create you html embedded timeline link using Twitter Publish tool or learn more about query generation at Embedded Search Timeline.
```
<a class="twitter-timeline" href="https://twitter.com/WebExpToolkit" data-tweet-limit="3" >Tweets by @WebExpToolkit</a>
```
Wrap the html embedded timeline link with a div element with class="wb-twitter".
```
<div class="wb-twitter"></div>
```

With this example your final code should be:

<div class="wb-twitter"> <a class="twitter-timeline" href="https://twitter.com/WebExpToolkit" data-tweet-limit="3" >Tweets by @WebExpToolkit</a> </div>

Configuration options

All configuration options are detailed in Twitter for Websites documentation:

Note: Twitter has removed the ability to embed timelines with searches which includes hashtags. Instead you can use the collections or list which are created using Tweet Deck. Please see Twitter for Websites for more information.

Notable configuration options are outlined in the following table. WET may preset their values or leverage them in other ways.

Type	Option	Description	How to configure	Values
HTML attribute	`data-dnt`	Do not track parameter. Controls whether to allow Twitter to use the widget to personalize content, suggestions and ads.	Add a `data-dnt` attribute to the `<a class="twitter-timeline">` element.	None (default): WET automatically sets "true". "true": Disallows personalization. "false": Permits personalization.
HTML attribute	`data-height`	Widget's maximum height. A vertical scrollbar appears if the widget's content exceeds it.	Add a `data-height` attribute to the `<a class="twitter-timeline">` element.	None (default): Uses as much height as possible. None (if `data-tweet-limit` is used): WET automatically uses the same height as "fb-page" (500 CSS pixels). Intended for backwards-compatibility. "fb-page": WET uses the same height as the Facebook page plugin (500 CSS pixels). Integer: Number of CSS pixels.
HTML attribute	`data-lang`	Widget's default language code. Used by the widget's user interface. Unsupported languages revert to English ("en").	Add a `data-lang` attribute to the `<a class="twitter-timeline">` element.	None (default): Uses the link or closest parent element's `lang` attribute. None (if link or closest parent element contains `lang="zh-Hans"`): WET automatically sets "zh-cn". WET uses "zh-Hans" for Chinese (Simplified), but Twitter is unable to map it on its own. Language code: Any of Twitter's supported languages.
HTML attribute	`data-tweet-limit`	Specify the number of tweets to be displayed. Stopped working on July 21, 2023.	Add a `data-tweet-limit` attribute to the `<a class="twitter-timeline">` element.	None (default): Displays the top 100 most-liked tweets. Integer: Previously represented a specific number of tweets to display. WET now uses it as a flag to set a reduced height via `data-height`.

Events

Event Trigger What it does

wb-init.wb-twitter Triggered manually (e.g., $( ".wb-twitter" ).trigger( "wb-init.wb-twitter" );). Used to manually initialize the Twitter embedded timeline. Note: The Twitter embedded timeline will be initialized automatically unless the required markup is added after the page has already loaded.

Event	Trigger	What it does
`wb-init.wb-twitter`	Triggered manually (e.g., `$( ".wb-twitter" ).trigger( "wb-init.wb-twitter" );`).	Used to manually initialize the Twitter embedded timeline. Note: The Twitter embedded timeline will be initialized automatically unless the required markup is added after the page has already loaded.
`wb-ready.wb-twitter` (v4.0.5+)	Triggered automatically after the Twitter embedded timeline initializes.	Used to identify where the Twitter embedded timeline was initialized (target of the event). `$( document ).on( "wb-ready.wb-twitter", ".wb-twitter", function( event ) { });` `$( ".wb-twitter" ).on( "wb-ready.wb-twitter", function( event ) { });`
`wb-ready.wb` (v4.0.5+)	Triggered automatically when WET has finished loading and executing.	Used to identify when all WET plugins and polyfills have finished loading and executing. `$( document ).on( "wb-ready.wb", function( event ) { });`

wb-ready.wb-twitter (v4.0.5+)

Triggered automatically after the Twitter embedded timeline initializes.

Used to identify where the Twitter embedded timeline was initialized (target of the event).

$( document ).on( "wb-ready.wb-twitter", ".wb-twitter", function( event ) { });

$( ".wb-twitter" ).on( "wb-ready.wb-twitter", function( event ) { });

wb-ready.wb (v4.0.5+)

Triggered automatically when WET has finished loading and executing.

Used to identify when all WET plugins and polyfills have finished loading and executing.

$( document ).on( "wb-ready.wb", function( event ) { });

Source code

Twitter embedded timeline plugin source code on GitHub

Date modified:: 2025-10-07

Language selection

Search and menus

Search