Why?

Embedding Tweets is easy... if your website is a static page. Just drop in a Twitter-supplied embed and you're off to the races. Once you start dynamically altering page content through AJAX or DOM manipulation, things become far less simple since Twitter's widget loader not only scans the entire DOM by default, but requires interactions that violate some of Angular's core principles. ngTweet aims to abstract away these hacks so your codebase can achieve maximum zen.

Getting started

Dependencies

• AngularJS 1.x

Installation

With Bower (preferred)

$ bower install --save ngtweet

Then include the script.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="bower_components/ngtweet/dist/ngtweet.min.js"></script>

Manually

Download the latest release (1.5kb minified, gzipped). Then include the script.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="./path/to/ngtweet.min.js"></script>

Add module dependency

var myApp = angular.module('myApp', ['ngtweet']);

Tweets

There are two ways to embed a Twitter widget - with the source from Twitter (embedded), or via Tweet ID (linked).

Embedded

Given the source for an embedded Tweet

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">"No one likes Bit O' Honey." ~<a href="https://twitter.com/griffinmcelroy">@griffinmcelroy</a> <a href="https://twitter.com/hashtag/truth?src=hash">#truth</a></p>— Aru (@IAmAru) <a href="https://twitter.com/IAmAru/status/608455483507245059">June 10, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

First, remove the <script> element from the markup. Then, simply wrap it in a <twitter-widget> tag:

<twitter-widget>
    <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">"No one likes Bit O' Honey." ~<a href="https://twitter.com/griffinmcelroy">@griffinmcelroy</a> <a href="https://twitter.com/hashtag/truth?src=hash">#truth</a></p>— Aru (@IAmAru) <a href="https://twitter.com/IAmAru/status/608455483507245059">June 10, 2015</a></blockquote>
</twitter-widget>

Linked

Given a Tweet with ID 617749885933232128, simply add a <twitter-widget> tag to your markup with an attribute named `twitter-widget-id` specifying the Tweet ID.

<twitter-widget twitter-widget-id="'617749885933232128'">
</twitter-widget>

Tweet appearance can be customized by adding a twitter-widget-options attribute with an object containing the configuration parameters (as defined in the Twitter Widget API docs).

<twitter-widget twitter-widget-id="'617749885933232128'"
                twitter-widget-options="{'cards': 'hidden', 'align': 'right'}">
</twitter-widget>

Timelines

As with tweets, there are two ways to embed Timeline widgets - with the source from Twitter (embedded), or via widget ID (linked).

Embedded

Given the source for an embedded Timeline

<a class="twitter-timeline"  href="https://twitter.com/IAmAru/lists/food-trucks" data-widget-id="673710543212052480">Tweets from https://twitter.com/IAmAru/lists/food-trucks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
        

First, remove the <script> element from the markup. Then wrap it in a <twitter-timeline> tag:

<twitter-timeline>
    <a class="twitter-timeline"
       href="https://twitter.com/IAmAru/lists/food-trucks"
       data-widget-id="673710543212052480">
       Tweets from https://twitter.com/IAmAru/lists/food-trucks
    </a>
<twitter-timeline>

Linked

Given a Timeline with ID 673710543212052480, simply add a <twitter-timeline> tag to your markup with an attribute named `twitter-timeline-id` specifying the Tweet ID.

<twitter-timeline twitter-timeline-id="'673710543212052480'">
</twitter-timeline>

Timeline appearance can be customized by adding a twitter-timeline-options attribute with an object containing the configuration parameters (as defined in the Twitter Timeline API docs). If you're directly passing in an object, it must be a parseable JSON object (i.e. all quotes must be double quotes, etc.).

<twitter-timeline twitter-timeline-id="'673710543212052480'"
                  twitter-timeline-options='{"chrome": "hidden"}'>
</twitter-timeline>

If you don't have an ID for the timeline, due to recent changes to the Twitter embedding API, fret not - there is an alternative for you! Simply specify the twitter-timeline-type and appropriate arguments. For example, for the above...

<twitter-timeline twitter-timeline-type="list"
                  twitter-timeline-owner-screen-name="'IAmAru'"
                  twitter-timeline-slug="'food-trucks'"
                  twitter-timeline-options='{"chrome": "noheader"}'>
</twitter-widget>

Additional Features

Script Loading Hint

ngTweet downloads Twitter's Widgets script the first time a widget directive is encountered. To download the script at app startup, add the twitter-widget-initialize attribute to an element. For example:

<html ng-app="myapp">
    <body twitter-widget-initialize>
    </body>
</html>