🐤 Twitter widget done with JS!
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
lib
tests
.gitignore
.travis.yml
LICENSE
README.md
bower.json
gulpfile.js
package.json

README.md

Tweetsie Build Status

Since Twitter removed access to their API through JS it became harder to get Twitter widgets on your website styled up to how you want. It required backend work which sometimes wasn't possible for several reasons.

Twitter offers a widget, which is great and works nicely. However, the styling isn't great and will more than likely stick out like a sore thumb on your website!

However! The Twitter widget simply request a JSON file which contains the body of the widget in. This plugin uses that JSON URL to then allow you to style up how you want!

Download!

Download now and be awesome! ✌️

Tweetsie.js

Tweetsie.min.js

Usage

Before starting, create a new widget on Twitter. After creating a new widget, in the URL there should be a ID in the URL after saving the widget. Copy this. This becomes the ID Tweetsie needs!

Include the plugin on the page

<script src="dist/Tweetsie.js"></script>

Then simply create a new instance of Tweetsie!

new Tweetsie({
  container: '#container',
  widgetid: '570149068425674752',
  count: 5,
  template: ' \
  <div class="author"> \
    <a href="{{author.profile_url}}" target="_blank"> \
      <img src="{{ author.avatar }}" /> \
    </a> \
  </div> \
  <div class="body"> \
    <p>{{body}}</p> \
  </div> \
  '
}).then(function (tweets) {

}).catch(function (error) {

});

The above creates a new instance of Tweetsie with all available options being used. However the only required one is widgetid which is the ID you got from creating a new widget.

Options

Option Description
container ID or HTML object to render template to
widgetid ID of the widget created on Twitter
count Number of Tweets to parse. Defaults to all which is 20
template String template used to display on the page

Tweetsie uses ES6 Promises to be super awesome and hip! For older browsers, you will need to use a Polyfill.

Styling

There are two ways to style the widget:

Callback

Use the callback function which returns an array of all the tweet objects (Data in the object is listed below). You can then do whatever you wish with this array.

Template

Pass in a string as an option to Tweetsie (See example above).

Tweetsie uses Handlebar style syntax. However, if statements etc. are not supported. It is only used to show where data should be placed.

Template filters

Tweetsie makes available a few different filters to make your life easier when working with the template engine. These are:

Filter Name Description
formatedate Use this with the date value to format the date to a relative time
autodate Use this with the date value to automatically update the date every 1000ms

Filers are used in the template engine by doing the following:

{{ value | filter }}

Multiple filters can be used together. The originally value is then passed to the filter, not the previously filtered value.

{{ value | filterone | filtertwo }}
Custom filters

You can pass your own custom filters by adding an extra value into the object you pass to Tweetsie. The value should be an object with functions inside of it. The key for the function will be what is used inside the template as your filter name. Case sensitive remember!

filters: {
  testfilter: function (value) {
    return value.toUpperCase();
  }
}

Tweet data

These are the keys used for each tweet object.

  • id Tweet ID
  • tweet_url Permalink URL to tweet
  • date JS date object
  • author.avatar URL for author profile image
  • author.profile_url URL to author Twitter page
  • author.name Full name of the author
  • author.username Username of the author
  • body HTML string of the Tweet content
  • actions.reply URL to reply to Tweet
  • actions.favorite URL to favorite Tweet
  • actons.retweet URL to retweet Tweet

Browser Support

I've run the test on all modern browsers & on IE9.

They all pass 👍!

Disclaimer

Whilst I will do my best to keep the plugin updated for any updates Twitter do. This is reliant on Twitter not removing access to Tweet data through the URL used.