twitterFetch

Show your latest tweets on your website

twitterFetch: show your tweets the way you want

A nice way to let visitors of your website know about your twitter feed, is to show your latest tweet.

Twitter already offers two options to show your tweets on your website:

1. Using a Twitter widget
2. Using the Twitter REST API

They are fully supported by Twitter and might be the best solution for you.

Disadvantages are:

1. Limited layout possibilities (widget).
2. Cookies are send to Twitter, which, without warning, might be illegal in your jurisdiction (widget).
3. Page load (widget).
4. Needs server side scripting (api).

TwitterFetch is a JavaScript that can be included on your webpage. It will fetch the HTML that’s meant for the widget, extracts all tweets and makes them available in JavaScript, ready to do what you want.

The script provides some options: you can prevent loading images that you won’t show, prevent making the text HTML-save and making links and usernames into hyperlinks, so you can click them.

Since this script is using the Twitter Widget in a way that’s not supported by Twitter, there’s no guarantee that the script will still work tomorrow.

Example code

Here’s some example code:

twitterFetch.fetch('345615146724495360', {}, function (tweets) {
	if (!tweets || tweets.length == 0) {
		return;
	}
	document.getElementById('tweets').innerHTML = tweets[0];
});

But don’t use the widget id 345615146724495360, that belongs to my own @edwinmdev Twitter account.

How to get your widget id?

To get your own widget id, create a Twitter widget and look at the generated code. You’ll find data-widget-id=”…” with the number you can use.

API

The twitterFetch fetch function takes three parameters:

twitterFetch.fetch(widgetId, options, callbackFunction);

widgetId

The widget id you get when creating a widget, see above.

options

An object literal with several options:

images (boolean): when false, prevents loading images that are not needed (default: false).

plaintext (boolean): when false, encodes some entities to make the text safe for HTML (default: false).

hyperlinks (boolean): when true, turns urls and Twitter @usernames into hyperlinks (default: true).

Example:

{
	images: false,
	plaintext: true
}

callbackFunction

The function that is called back with one argument containing an array with tweets.

How to get twitterFetch?

You can fetch twitterFetch from GitHub, or you can install twitterfetch from npm:

npm install twitterfetch

Copyright

twitterFetch is copyright 2016 Edwin Martin and released under the MIT license.