Twitter Feeds

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.

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.4"></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.1"></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,
   };

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>

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

Options

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

  

  Posted on Dec 12, 2018

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.

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.