Twitter embedded timeline

Looking for WET v3.1?

As of September 23, 2014, version 3.1 of the Web Experience Toolkit is no longer supported. The source code and documentation have been moved to the wet-boew-legacy repository.

Questions or comments?

Purpose

Helps with implementing Twitter embedded timelines.

Working example

How to implement

  1. Create an embedded timeline on Twitter.com according to Twitter's Creating an Embeddable Timeline documentation.
  2. For each area that will display a Twitter embedded timeline, create a div element with class="wb-twitter". 
    <div class="wb-twitter"></div>
  3. Inside the div element add a link with:
    1. class="twitter-timeline"
    2. href attribute with the URL for the equivalent query on Twitter.com (e.g., https://twitter.com/search?q=%23WxT)
    3. widget-id attribute with the id of the embedded timeline (e.g., "329066756620566528")
    4. link text that describes timeline (e.g., Tweets about "#WxT")
    <div class="wb-twitter">
	<a class="twitter-timeline" href="https://twitter.com/search?q=%23WxT" data-widget-id="329066756620566528">Tweets about "#WxT"</a>
</div>
  4. Configure the timeline according to Twitter's Customization Options documentation.

Configuration options

All configuration options are detailed in Twitter's Customization Options documentation.

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: