# 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

GitHub npm

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

  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.