Twitter Fetcher
Get Tweets from Twitter without using the API.
Usage
Here's an example using the following HTML:
<ul class="f-list f-list-space" id="example1">
<li>Loading Tweets</li>
</ul>
In our JavaScript file (for example, yoursite.js) start by getting the script file from our CDN:
LoadTwitter : function()
{
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.defer = 'defer';
script.src = '//fatkit.fmdev02.fatoffice.co.uk/js/tf.min.js';
head.appendChild(script);
script.onload = function()
{
// The next bit goes in here
}
}
This will load the JavaScript file that pulls Twitter data from a Twitter widget. The easiest way to use this is to create an HTML template to populate with the tweet data that will be returned.
This would be my JavaScript that goes inside the onload event of the previous script injection:
var strTemplate = '<li>'+
' <div class="f-panel f-panel-box tweet">'+
' <p>{{tweet}}</p>'+
' <p><strong><a href="{{permalinkURL}}" onclick="window.open(this.href);return false;">{{screen_name}}</a></strong> {{time_from}}</p>'+
' </div>'+
'</li>';
// Our config
var configList = {
profile: {'screenName': 'jason_mayes'},
domId:'example1',
maxTweets: 2,
enableLinks: true,
template: strTemplate,
showPermalinks: false
};
// Fetch the widget and parse the data
twitterFetcher.fetch(configList);
Example
- Loading Tweets
For config options and extras see the original GitHub repo.
Format options
You can either get the tweet data:
- in HTML as it is in the widget by not passing a callback function or template string. I don't recommend this because it will be tricky to style
- as an object by passing in a custom callback function and setting
dataOnly
to true in your options - or, by passing in a template string with double curly bracing marking where you would like the data to be placed.
If you opt for number 3 you can use any of the following data points:
Property | Description |
---|---|
tweet | The actual tweet (including links if enableLinks is passed) |
author | The name of the tweet author or 'Unknown Author' if not given |
author_name | Just the name of the author, not the HTML from the tweet |
author_avatar | The avatar of the tweet author |
screen_name | The Twitter username of the tweet author |
time | The date the tweet was posted |
time_from | How long ago the tweet was posted (based on how Twitter shows it) |
timestamp | The ISO-formatted timestamp the tweet was posted |
image | The URL of any image attached to the tweet |
rt | true if this is a retweet |
tid | The unique ID for the tweet |
permalinkURL | The full URL of the tweet |
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
maxTweets | Integer | 20 | Maximum tweets to return |
enableLinks | Boolean | true | Formats the tweet to include links to URLs |
showTime | Boolean | true | Return the tweet time |
showRetweet | Boolean | true | Includes retweets in the returned tweets |
customCallback | Function | null | If required returns the tweet raw data to this function |
showInteraction | Boolean | true | If original tweet is return shows reply and retweet options |
showImages | Boolean | true | Returns images in tweets |
linksInNewWindow | Boolean | true | Open links in a new window |
showPermalinks | Boolean | true | Shows the tweet URL |
dataOnly | Boolean | false | Require customCallback and return raw data |
template | String | HTML template to parse tweet data into |