ngTweet
Easily embed Twitter widgets into your Angular application! No more having to kludge together a Twitter script loader, or manage embed state on visibility change.
Installation
Node
npm install --save ngtweet
Bower
$ bower install ngtweet
Then include ngtweet.js
or ngtweet.min.js
in your markup and add ngtweet
to your application's dependencies. Your markup should look like this at the end:
... ...
Usage
There are two ways to embed a Twitter widget - with the source from Twitter (embedded), or via Tweet ID (linked).
Embedded Tweet
Given the source for an embedded Tweet
"No one likes Bit O' Honey." ~@griffinmcelroy #truth— Aru (@IAmAru) June 10, 2015
First, remove the <script>
element from the markup. Then, simply wrap it in a <twitter-widget>
tag:
"No one likes Bit O' Honey." ~@griffinmcelroy #truth— Aru (@IAmAru) June 10, 2015
Load your app, and you get:
Linked Tweet
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.
This, combined with ngRepeat
, can display collections of individual Tweets:
<!-- Note: Tweet IDs should be represented as strings in order to maintain precision -->
Embedded Timeline
Given the source for an embedded timeline.
Tweets from https://twitter.com/IAmAru/lists/food-trucks
Remove the <script>
element from the markup. Then wrap it in a <twitter-timeline>
tag:
Tweets from https://twitter.com/IAmAru/lists/food-trucks
Load your app, and you get:
Linked Timeline
Given a timeline with ID '673710543212052480', simply add a <twitter-timeline>
tag to your markup with an attribute named twitter-timeline-id
specifying the Timeline ID.
New-style Timelines
Recently, Twitter updated how one goes about embedding a timeline - instead of generating an ID and linking to it, the parameters and type of timeline must be defined. To get the food truck timeline from above...
Additional features
Eagerly load the Twitter widget script
The first time the twitterWidget
directive is encountered, ngTweet downloads Twitter's Widget script. If you would rather the script be downloaded at app startup, simply add the twitter-widget-initialize
attribute to an element. For example,
Configuration
You can change the path to the widget.js
file in case you want to host your own version:
angular value'twitterWidgetURL' '/PATH/TO/widgets.js'; //default https://platform.twitter.com/widgets.js
Since the widgets.js
file is served over SSL by default, the twitterWidgetURL
value can be modified to use the plain 'ol HTTP version.
Contributing
Pull requests are welcomed! The existing code follows John Papa's wonderful Angular Style Guide. Run gulp build
to generate the debug and minified JavaScript files, and then gulp serve
to run the demo site to verify embeds work. Please include the compiled code within the dist/
directory with your PR.
The Future (tm)
This is very much a young library, so I'm open to suggestions as to what direction it should go. Currently eventing features and batch queries are slated for future development.