Twitter embedded timeline

Questions or comments?

Purpose

Helps with implementing Twitter embedded timelines.

Working examples

How to implement

Determine the type of timeline at Twitter for Websites
  1. Create you html embedded timline 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>
  2. Wrap the html embedded timline link with a div element with class="wb-twitter". 
    <div class="wb-twitter"></div>
  3. 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 suppored languages.
HTML attribute data-tweet-limit Specify the number of tweets to be displayed. Stopped working on . 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.
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: