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:

  1. 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
  2. as an object by passing in a custom callback function and setting dataOnly to true in your options
  3. 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