LiveTweets 2.1 - jQuery Twitter Plugin for Twitter API 1.1

Table of contents

  1. About LiveTwee
  2. Creating a LiveTweets tok
  3. Implementing LiveTwee
  4. Start LiveTwee
  5. Advanced Optio
  6. Conta

About LiveTweets

LiveTweets loads (pulls) the latest Tweets on a given twitter search operator. it is completely written in javascript using the jQuery framework. in other words, no database or serverside programming language is required. Its lightweight, 8kb and easy to integrate into your website.

LiveTweets is excellent for

  • Display Tweets in realtime.
  • Realtime user-comments on your website.
  • Display Tweets of multiple hashtags with one plugin.
  • Fully customizable style.
  • Official support for Reply, Retweet and Favorites.

A LiveTweets token

Due to the new Twitter API 1.1 all unauthorized requests to the API are forbidden. In order to authorize you must perform a oAuth authentication. A LiveTweets token bypasses that but must be setup first. It's easy and its safe, buy this plugin and create your own personal LiveTweets Token. Follow the steps and watch the video, to create a LiveTweets token you must own a Twitter account. When you have questions about LiveTweets token you can email me at: hello@johandorper.com

Create a LiveTweets Token

Please note:

The LiveTweets plugin is based on the idea that NO servercode or scripting is required. When Twitter API 1.1 introduced oAuth verification for search the LiveTweets Token became mandatory. A LiveTweets Token is a free service, we do not intend to change this. We will not supply any form of alternative serverside scripts to handle incoming tweets.

Implementing LiveTweets

First include the jQuery library to the <head> section of your webpage. Next, include LiveTweets, I'd recommend using the minified version (js/twitlive-min.js).

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/twitlive-min.js"></script>

Starting LiveTweets

After including the jQuery library and the LiveTweets plugin the inital setup is done. Next add the following lines after the above lines (again in your <head> section)

Example

<script>
$(document).ready(function() {
  $(".tweets").liveTweets({
     operator: "#google",
     liveTweetsToken: "Your Token Here (see howto generate a token)"
  });
});
</script>

And you are done, liveTweets will now look for an element with the class 'tweets' and load in Tweets that match the operator, in this case #google.

Advanced Options

Option Default value Possible values Description
operator #google Expects a Twitter Search Operator View all twitter search operators
startMessages 5 Ranging from 1 to 10 Number of tweets to show at startup
liveTweetsToken (empty) Expects a LiveTweet Token See chapter LiveTweets Token above.
timeBetweenTweets 5 Ranging from 1 to 60 seconds Number of seconds between tweets that popup
showThumbnails true true or false Show the avatar of user
convertTextlink true true or false Automaticly convert text links to real HTML links
linkHashtags true true or false Automaticly convert hashtags to URL
linkUsernames true true or false Automaticly convert usernames to URL
showReplyButton true true or false Show button to reply at tweets
showRetweetButton true true or false Show button to retweet tweets
showFavoriteButton true true or false Show button to favorite tweets

Styling LiveTweets elements

All elements are editable through CSS, Live Tweets uses these classes:
CSS Class Description
.tweet Wrapper of the complete tweet
.tweet.first The first tweet to enter te screen
.tweet_foto Avatar of the user
.tweet_text The tweet message
.tweet_text span The timecode
.tweet_text a Links in tweet messge
.intent.Reply Tweet reply link
.intent.Retweet Tweet retweet link
.intent.Favorite Tweet favorite link

Questions, contact me

Poke me on Twitter, @johandorper.

Buy LiveTweets