Twitter Feeds

Pull in the latest tweets from any Twitter account and display them in your page, and optionally in a slider.


About the Plugin

Twitter Fetcher pulls in a feed of tweets and parses them for ease of use. Our wrapper function makes it easy to populate an element with tweets using data attributes.

Initializing

The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.

  1. Include the library in your page
    • Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.js and before theme.js.

      Optionally, include the Flickity or Isotope plugin if you are displaying tweets in a slider or masonry layout, these are not required otherwise.

      <!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
      <script type="text/javascript" src="assets/js/twitterFetcher_min.js"></script>
      
      <!-- OPTIONAL Isotope if arranging tweets in masonry layout -->
      <script type="text/javascript" src="assets/js/isotope.pkgd.min.js"></script>
      
      <!-- OPTIONAL Flickity if arranging tweets in a slider -->
      <script type="text/javascript" src="assets/js/flickity.pkgd.js"></script>

      Alternatively you may wish to load these resources from a CDN to potentially improve page load times.

      <!-- TwitterFetcher (displays a feed of tweets from a specified account)-->
      <script type="text/javascript" src="https://unpkg.com/twitter-fetcher@~18.0.2"></script>
      
      <!-- OPTIONAL Isotope (masonry layouts and filtering) -->
      <script type="text/javascript" src="https://unpkg.com/isotope-layout@~3.0.6"></script>
      
      <!-- OPTIONAL Flickity if arranging tweets in a slider -->
      <script type="text/javascript" src="https://unpkg.com/flickity@~2.2.0"></script>
      
  2. Load the initializer code in index.js
    • Declare the following import statement in js/mrare/index.js. This ensures that the initializer code is included in the theme.js bundle.
      import mrTwitterFetcher from './twitter-fetcher';
      

    // OPTIONAL (if using slider or masonry layout for twitter feed) import './flickity'; import mrIsotope from './isotope';

    
    * Ensure the following line appears in the `export` object:
    ```javascript
    export {
     mrTwitterFetcher,
    };

Basic Usage

Create an empty <div> to house the tweets. Add data-twitter-fetcher and data-username attributes. This will be populated on page load.

The first child of the [data-twitter-fetcher] element is used as the tweet template.

Create a child element which will serve as the tweet template. Each tweet will be structured using the format of this template.

<div data-twitter-fetcher data-username="mrareweb">
  <div>
    <p class="tweet"></p>
  </div>  
</div>

Options

The following options are permissible on the [data-twitter-fetcher] element.

Options
Data attribute Default Type Description
data-username twitter string Username of the account you want to show tweets from.
data-max-tweets 6 number Limit the number of tweets displayed. Always uses latest tweets.
data-twitter-flickity null JSON Provide a JSON formatted Flickity options object to initialise the tweets in a slider. See below for details.
data-twitter-isotope false boolean Set "true" for tweets to be initialized in Isotope masonry layout. See below for details. Requires parent to be class row and tweet template to have a column class and data-isotope-item attribute.

Tweet Template

The first child of the data-twitter-fetcher element is treated as the template for each tweet. Only write the template once, and Twitter Fetcher will replace the template with a populated copy for each tweet.

The following parts can be shown in each tweet:

  • Tweet. To display the tweet text including links, provide an element with class tweet in the tweet template.
  • User Avatar. To display the user avatar as a link, provide an element with class user in the tweet template.
  • Time Posted. To display the time posted, provide an element with class timePosted in the tweet template.
  • Interact links. (Reply, Retweet, Favourite). To display links for user interaction, provide an element with class interact.

A basic example twitter feed limited to 1 tweet:

  • HTML

    <div data-twitter-fetcher data-username="mrareweb" data-max-tweets="1">
      <!-- The following <div> is the "tweet template".  Write it once only. and it will be repeated for each tweet shown in the feed. -->
      <div>
        <h5 class="tweet"></h5>
        <p class="interact"></p>
        <p class="user"></p>
        <p class="timePosted"></p>
      </div>
    </div>
  • Result

    Here is a tweet from Medium Rare!

    Reply Retweet Favorite

    Avatar

    Posted on Dec 12, 2018

Flickity Slider Integration

A twitter feed can be turned into a Flickity slider by adding data-twitter-flickity to the data-twitter-fetcher element.

By structuring the Tweet template as a carousel-cell, Flickity can interpret the tweets properly and construct the slider.

Use the value of data-twitter-flickity to pass options to Flickity in JSON format.

Note the single quotes around the JSON provided in data-twitter-flickity. Do not use quotes on boolean values within the JSON.

<div data-twitter-fetcher data-username="mrareweb" data-twitter-flickity='{"wrapAround": true, "autoPlay":true}'>
<div class="carousel-cell">
    <div class="user mb-3"></div>
    <span class="h3 tweet d-block"></span>
    <span class="text-small timePosted"></span>
</div>

This will copy the .carousel-cell <div> for each tweet then initialise the parent <div> as a Flickity Slider.

Isotope Integration

A twitter feed can be turned into a Masonry Layout by adding data-twitter-isotope to the data-twitter-fetcher element.

<div class="row" data-twitter-fetcher data-username="mrareweb" data-twitter-isotope="true" data-sort-ascending="true">
  <!-- This is the tweet template -->
  <div class="col-md-4" data-isotope-item>
    <div>
      <p class="tweet w-100"></p>
      <span class="timePosted"></span>
    </div>
  </div>
</div>

This will copy the [data-isotope-item] <div> for each tweet then initialise the parent <div> as an Isotope masonry layout.