Overview:

This snippet generates a timeline of the most recent tweets from a particular Twitter user utilizing HiFi's retrieve tag. It generates a url calls a JSON Object of a user timeline from the Twitter REST API. Then it parses the data in a format that mimics the format on the Twitter website including links and twitter handles. Because Twitter limits the number of requests per hour, the snippet is setup to cache the timeline every 15 minutes.

Components:

Template:

{% import "/snippets/twitter/twitter.html" as twitter %}
{{ twitter.draw({ handle:'gethifi' }) }}

Here is sample output including a standard tweet and a retweet:

<section class="tweets">
  <article class="profile">
    <img src="[ Image URL ]" alt="[ Display Name ]" width="73" height="73" />
    <h2>[ Display Name ] w</h2>
    <h3>@[ Screen Name / Handle ]</h3>
    <p>[ Profile Description ]<br/><a href="[ Profile URL ]" target="_blank">[ Profile URL ]</a></p>
  </article>
  <article class="tweet">
    <p>[ Tweet Text ]</p>
    <div class="row">
      <time datetime="[ Tweeted Created_At Time ]" pubdate>
       <a href="[ Tweet URL ]" target="_blank">[ Parsed Timestamp ]</a>
      </time>
      <div class="actions">
 	<a class="retweet" href="[ Retweet Intent URL ]" target="_blank"><span><i></i> retweet</span></a>
	<a class="reply" href="[ Reply Intent URL ]" target="_blank"><span><i></i> reply</span></a>
      </div>
    </div>
  </article>
  <article class="tweet retweet">
    <div class="retweeted">
      <div></div>retweeted
      <time datetime="[ Tweet Timestamp ]" pubdate>
        <a href="[ Retweet URL ]" target="_blank">[ Parsed Timestamp ]</a>
      </time>
    </div>
    <img src="[ Original Tweeter Profile Image ]" width="48" height="48" alt="[ Original Tweeter User ]" />
    <p>[ Retweet Text ]</p>
    <div class="row">
      <time>
	<a href="[ Retweet URL ]" target="_blank">[ Original tweet timestamp ]</a>
      </time>
      <div class="actions">
        <a class="retweet" href="[ Retweet Widget URL ]" target="_blank"><span><i></i> retweet</span></a>
	<a class="reply" href="[ Reply Widget URL ]" target="_blank"><span><i></i> reply</span></a>
      </div>
    </div>
  </article>
  <div class="follow">
    <a href="https://twitter.com/[ Twitter Handle]" class="twitter-follow-button" data-show-count="false">Follow @[ Twitter Handle ]</a>
  </div>
  <script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>  
</section>

Options:

handle:
Twitter handle without the '@' symbol. This is the only required option that needs to be passed when calling this macro. ex: {handle:'nmcteam'}, {handle:'gethifi'}.

count:
The number of items from the timeline to be displayed. You can have a maximum of 200.
Default:3 

profile:
If true this will display the twitter profile, similar to the one you see on a individual profile page.
Default: true

includeRetweets:
If true the user's retweets will be included in the retrieved timeline.
Default:true

includeReplies:
If true, the user's @replies will be included in the the retrieved timeline. 
Default:true 

includeTwitterPlatform:
If true the template will include Twitter's JS platform that allows the user pop-ups and the follow button to function.
Default:true 

containerElement:
HTML element that contains the widget.
Default: section

tweetElement:
HTML element that contains individuals tweets.
Default: article

profileTemplate:
Path to template used to display the profile.
Default:'/snippets/twitter/profile.html' 

tweetTemplate:
Path to template used to display individual tweets from the timeline.
Default:'/snippets/twitter/tweet.html' 

timeTemplate:
Path to template used to generate timestamps.
Default:'/snippets/twitter/timestamp.html'