Get the Best of Twitter, in your website, in realtime!

Installation Guide

Implementing TweetQuote on your website is easy. Once you've download the JavaScript file, all you need to is follow these steps:

1. 1Drop the JavaScript file into the root of the website directory.
2. 2Paste the code below into your web page, at the place you want TweetQuote to appear.

   <script src="js/tweetquote.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
tweetquote.load( “phrase you want to retrieve" );
//]]>
</script>

3. 3Change the load parameter to your desired phrase, or pass an options object (see advanced options) if you want to do something more complex.
4. 4That's it. All done! TweetQuote will now be iterating through all found, available Tweets.

Advanced Options

Several advanced features are available in TweetQuote. You can change refreshrates, query types, animation speeds and language requests. Most query based options are extensions of the Twitter search API options.

Options are set via an option object passed as a load parameter (see example below). Each option is a seperate property. Available options are listed further below.

Handlers

If you want to do something even more bespoke, I've exposed a TweetQuote handlers to aid such developments. Whilst these a fairly limited at the moment, if you find you need something else, and it might help other developers, just drop me a message.

load

(string/object) Initialization method to instatiate TweetQuote on the page.

stop

(void) Kills all active calls within TweetQuote.

onTextParse

(function) Called at the end of the text parsing phase, when a new Tweet is retrieved. Useful if you want to custom the text in any other way. Parameters passed to the proxy method are: tweetText and tweetObject.

onQuoteUpdate

(function) Called when a the quote display elements are updated. Parameters passed to the proxy method are: tweetObject (jQuery)

Options List

refreshrate

(integer) A value in milliseconds that dictates the quote refresh rate and requests against the Twitter API.

phrase

(string) Any keyword to retrieve Tweets against. Standard advanced search options apply.

username

(string) A valid Twitter username. This will only pull Tweets made by this user.

hashtag

(string) Search for any active tagged Tweets. Try #tweetquote for a starter.

geocode

(string) The geocode option is an additional value that will restrict the search values to within a pre-defined radius of the specified location.

advancedquery

(string) If you want to write a specific query that the standard options don't allow. User the advancedquery option to override all and pass your own parameters. View the Twitter search API documentation for more details.

includeauthor

(boolean) Include the author tag in output markup.

stripurls

(boolean) Removes all visible URLs from post (as URLs aren't natively rendered as links from the Twitter API).

classname

(string) Append class name onto #tweet_quote element.

lang

(string) Filter tweets by language. Only accepts ISO-639-1 codes.

animationtype

(string) Select from 3 animation types: slide, fade or no animation.

animationspeed

(string) Specify either presets slow/fast or pass a value in milliseconds.

defaultext

(string) The text shown at the initiation of TweetQuote.

Styling

TweetQuote doesn't come with pre-written styles, so you'll need to create your own CSS rules for the elements. To give you a helping hand, I've detailed each main element and they're relevant ID/classnames.

div#tweet_quote

Main container <div> for TweetQuote. In the example above, it's the large white box.

div#tweet_quote_wrapper

Containing <div> that wraps all new Tweets. This is overwritten each time a new post if retrieved.

span#tweet_quote_text

A <span> that wraps the individual Tweets. Semantically separating 'the Tweet' from other elements.

span#tweet_quote_author

Inline <span> wrapping the wraps the Tweet author details.

How does it work?

TweetQuote is a combination of Twitter's open Search API and jQuery, and basic AJAX calls. JSON objects are returned from the Twitter API, which are parsed into the quote area you see above. Using an intelligent framework system, TweetQuote will check if you already have jQuery on your website and download necessary the files, from Google's AJAX API. No extra coding needed!

Who created TweetQuote?

TweetQuote was written by me, Paul James Campbell. You can read my blog at campbellsdigitalsoup.co.uk, or follow me on Twitter at @pauljcampbell.

Having problems?

If you're having major (and I mean major) problems with TweetQuote. Either, drop me a comment via this article on my blog, or drop my a tweet on @pauljcampbell and I'll see what I can do for you.