jTweetsAnywhere is a jQuery Twitter Widget that simplifies the integration of Twitter services into your site.
With just a few lines of Javascript you can
$('#tweets').jTweetsAnywhere({
username: 'tbillenstein',
count: 5
});
$('#ticker').jTweetsAnywhere({
searchParams: 'q=nfl',
count: 10,
showTweetFeed: {
autorefresh: {
mode: 'trigger-insert',
interval: 60
},
paging: {
mode: 'more'
},
showTimestamp: {
refreshInterval: 15
}
}
});
The downloadable zip archive contains the Javascript source file in it's original version, a fastloading minified version and a basic CSS file that serves as a sample for tweaking the UI.
<head> section
Include the jTweetsAnywhere script (jquery.jtweetsanywhere-1.3.1.min.min.js or jquery.jtweetsanywhere-1.3.1.min.js) and the basic Stylesheet (jquery.jtweetsanywhere-1.3.1.css). The CSS contains all tweakable elements and can be used as a starter for your own customizing.
You will need the jQuery library. jQuery Version 1.7.1 (minified) is recommended.
You can also hotlink to one of the hosted versions, e.g.
http://code.jquery.com/jquery-1.7.1.min.js
Twitter's @Anywhere features (like Hovercards, Tweet Box, Follow Button, etc.) are optional. If you don't need them, just skip the next paragraphs and continue with the next section. Keep in mind that you can integrate any kind of tweet feed into your site without the need of @Anywhere.
If you want to use Twitter's @Anywhere features,
you must include Twitter's anywhere.js inside your
<head> section. In order to start using @Anywhere, you have to
register
your site (application) and obtain an APIKey (also called Consumer Key) from Twitter. When registering, be sure to select
"Read & Write" for the Default Access type.
<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=APIKey&v=1"></script>
Read this note for registration details and how to set up a local web server for testing purposes.
jTweetsAnywhere's I18N support is optional. If you want to use it, please include the adequate locale script, e.g.
<script type="text/javascript" src="jtweetsanywhere-de-1.3.1.min.js"></script>
<body>
...
<div id="tweetFeed">
</div>
...
</body>
$(document).ready(function(){
$('#tweetFeed').jTweetsAnywhere({
username: 'tbillenstein',
count: 5,
showTweetFeed: {
showProfileImages: true,
showUserScreenNames: true,
showUserFullNames: true,
showActionReply: true,
showActionRetweet: true,
showActionFavorite: true
},
showTweetBox: {
label: '<span style="color: #303030">Spread the word ...</span>'
}
});
});
The Demo page shows a lot more samples of what can be done with the widget and how it can be tweaked to display the results you expect.
This is the preferred place to submit and discuss feature requests, bugs and issues.
In the Blog you can find additional informations, like release notes, etc. Please have a look at those.
This section describes all configurable plugin options.
username
tbillenstein
'tbillenstein' or ['twitterapi', 'ChromiumDev']list
'favorites' can be used to display a user's favorited tweets.
null
'ajaxians'searchParams
null
'q=twitter' or ['q=twitter', 'geocode=48.856667,2.350833,30km']count
0
locale
'en'.
To use this option you have to inlude the adequate locale script,
jtweetsanywhere-{language}-{version}.js,
e.g. jtweetsanywhere-de-1.3.0.js
'en'
'de'
tweetFilter
defaultTweetFilter
showTweetFeed
true/false) that specifies whether to display a tweet feed
or an object literal representing the configuration options for the
tweet feed.
showTweetFeedshowTweetFeed equals false, no feed is displayedshowTweetFeed is an object literal the configuration options and their default values are:
{
autoConformToTwitterStyleguide: false,
// Boolean - as the name implies, sets all options to confirm to Twitter's
// styleguide regulations. Implies:
// showTweetFeed: {
// showUserFullNames: null, // null means: if usernames are shown, show
// // fullnames too
// showTwitterBird: true,
// showActionReply: true,
// showActionRetweet: true,
// showActionFavorite: true
// }
// Since 1.3.0
showTwitterBird: true, // Boolean - show Twitter bird icon beneath the timestamp of a tweet,
// linking to the tweeter's MiniProfile Web Intent
// Since 1.3.0
showTimestamp: true, // A flag (true/false) that specifies whether to display a tweet's timestamp
// or an object literal representing the configuration options for the
// timestamp.
// {
// refreshInterval: 0, // Time in seconds to be waited until the
// // timestamps of the displayed tweets get refreshed
// // 0 means no refreshing.
// }
// Since 1.2.0
showSource: false, // Boolean - Show info about the source of the tweet.
showGeoLocation: true, // Boolean - Show geolocation info and link to Google maps.
// Since 1.2.0
showInReplyTo: true, // Boolean - Show link to the "replied to" tweet (if available).
// Since 1.2.0
showActionReply: false, // Boolean - Show tweet's 'Reply' action (supplies a link to popup
// the tweet's Reply Web Intent)
// Since 1.3.0
showActionRetweet: false, // Boolean - Show tweet's 'Retweet' action (supplies a link to popup
// the tweet's Retweet Web Intent)
// Since 1.3.0
showActionFavorite: false, // Boolean - Show tweet's 'Favorite' action (supplies a link to popup
// the tweet's Favorite Web Intent)
// Since 1.3.0
showProfileImages: null, // A flag (true/false) that specifies whether to display a profile image in
// tweets. If the param is set to null (the default value), a profile image
// is displayed only if the feed represents a user's list or the result of a
// Twitter search.
// Since 1.2.0
showUserScreenNames: null, // A flag (true/false) that specifies whether to display a username in
// tweets. If the param is set to null (the default value), a username
// is displayed only if the feed represents a user's list or the result of a
// Twitter search.
// Since 1.2.0
showUserFullNames: false, // A flag (true/false) that specifies whether to display a user's full name
// in tweets. If the param is set to null, a user's full name
// is displayed only if the feed represents a user's list or the result of a
// Twitter search.
// Since 1.2.0
expandHovercards: false, // Boolean - Show Hovercards in expanded mode.
includeRetweets: true, // Boolean - Include native retweets in a user's tweet feed
// Since 1.2.0
paging: // An object literal representing the configuration options for the
{ // paging support, that specifies how more/earlier tweets can be loaded
// by using the supplied UI controls (more/next buttons, scrollbar).
// Since 1.2.0
mode: "none" // Accepted values for mode are: "none" | "more" | "prev-next" | "endless-scroll"
// if mode equals "endless-scroll" you have to set the height of the tweet feed
// element (.jta-tweet-list) in your CSS to get a scrollbar! You should also set
// the "overflow" attribute to "auto".
},
autorefresh: // An object literal representing the configuration options for the
{ // autorefresh behaviour.
// Since 1.2.0
// IMPORTANT: Please always keep in mind, that the use of the Twitter API is rate
// limited. Non-authenticated users are rated IP-based and you have only 150
// calls per hour available. Every retrieval of tweets counts and so does for
// example hovering over a profile image to show the hovercard. jTweetsAnywhere will
// always check the remaining count of free API calls before actually calling
// Twitter to avoid black listing your visitor's IP.
// However - choose your settings wisely to keep your visitors happy. A refresh
// interval of 30 seconds on a tweet feed that is updated averaged once per hour
// does not make sense and is a total waste of remaining API calls!
mode: "none", // Accepted values for mode are: "none" | "auto-insert" | "trigger-insert"
// "none" (the default value) - disables the autorefresh feature
// "auto-insert" - automatically insert the new tweets on top of the tweet feed
// "trigger-insert" - if new tweets arrived, show or update a button that displays
// the number of new tweets. These new tweets are inserted on top of the tweet
// feed, if the user clicks on the button.
interval: 60, // Time in seconds to be waited until the next request for new tweets. Minimum
// value is 30, the default value is 60.
duration: 3600 // Time in seconds for how long the autorefresh will be active. After
// this period of time, auto-refreshing will stop. A value of -1 means
// autorefresh for ever.
}
}
true
{ expandHovercards: true, showUserScreenNames: true }showTweetBox
true/false) that specifies whether to display a Twitter "Tweet Box" or an object
literal representing the configuration options for the "Tweet Box". The configuration options and their
default values are:
{
counter: true, // Boolean - Display a counter in the Tweet Box
// for counting characters
width: 515, // Number - The width of the Tweet Box in px
height: 65, // Number - The height of the Tweet Box in px
label: "What's happening", // String - The text above the Tweet Box
defaultContent: <none>, // String - Pre-populated text in the Tweet Box.
// Useful for an @mention, a #hashtag,
// a link, etc.
onTweet: <none> // Function - Specify a listener for when a tweet
// is sent from the Tweet Box. The
// listener receives two arguments:
// a plaintext tweet and an HTML tweet
}
false
{ counter: true, width: 380, height: 65 }showFollowButton
true/false) that specifies whether to display a Twitter "Follow Button".
false
showConnectButton
true/false) that specifies whether to display a Twitter "Connect Button" or an object
literal representing the configuration options for the "Connect Button". The configuration options and their
default values are:
{
size: "medium" // String - The size of the Connect Button.
// Valid values are: small, medium,
// large, xlarge
}
false
showLoginInfo
true/false) that specifies whether to display Login Infos.
false
mainDecorator
defaultMainDecorator
tweetFeedDecorator
defaultTweetFeedDecorator
tweetDecorator
defaultTweetDecorator
tweetProfileImageDecorator
defaultTweetProfileImageDecorator
tweetBodyDecorator
defaultTweetBodyDecorator
tweetTextDecorator
defaultTweetTextDecorator
tweetAttributesDecorator
defaultTweetAttributesDecorator
tweetTwitterBirdDecorator
defaultTweetTwitterBirdDecorator
tweetTimestampDecorator
defaultTweetTimestampDecorator
tweetSourceDecorator
defaultTweetSourceDecorator
tweetGeoLocationDecorator
defaultTweetGeoLocationDecorator
tweetInReplyToDecorator
defaultTweetInReplyToDecorator
tweetRetweeterDecorator
defaultTweetRetweeterDecorator
tweetActionsDecorator
tweetActionReplyDecorator,
tweetActionRetweetDecorator and tweetActionFavoriteDecorator.
defaultTweetActionsDecorator
tweetActionReplyDecorator
defaultTweetActionReplyDecorator
tweetActionRetweetDecorator
defaultTweetActionRetweetDecorator
tweetActionFavoriteDecorator
defaultTweetActionFavoriteDecorator
tweetFeedControlsDecorator
tweetFeedControlsPrevBtnDecorator) and a 'next-button' (via
tweetFeedControlsNextBtnDecorator) if paging mode equals 'prev-next'
or a 'more-button' (via tweetFeedControlsMoreBtnDecorator) if paging mode
equals 'more'.
defaultTweetFeedControlsDecorator
tweetFeedControlsPrevBtnDecorator
defaultTweetFeedControlsPrevBtnDecorator
tweetFeedControlsNextBtnDecorator
defaultTweetFeedControlsNextBtnDecorator
tweetFeedControlsMoreBtnDecorator
defaultTweetFeedControlsMoreBtnDecorator
tweetFeedAutorefreshTriggerDecorator
tweetFeedAutorefreshTriggerContentDecorator) inside a list item element.
defaultTweetFeedAutorefreshTriggerDecorator
tweetFeedAutorefreshTriggerContentDecorator
span element.
defaultTweetFeedAutorefreshTriggerContentDecorator
connectButtonDecorator
defaultConnectButtonDecorator
loginInfoDecorator
defaultLoginInfoDecorator
loginInfoContentDecorator
defaultLoginInfoContentDecorator
followButtonDecorator
defaultFollowButtonDecorator
tweetBoxDecorator
defaultTweetBoxDecorator
linkDecorator
defaultLinkDecorator
usernameDecorator
defaultUsernameDecorator
hashtagDecorator
defaultHashtagDecorator
loadingDecorator
defaultLoadingDecorator
errorDecorator
defaultErrorDecorator
noDataDecorator
defaultNoDataDecorator
tweetTimestampFormatter
defaultTweetTimestampFormatter
tweetTimestampTooltipFormatter
defaultTweetTimestampTooltipFormatter
tweetVisualizer
defaultTweetVisualizer
loadingIndicatorVisualizer
defaultLoadingIndicatorVisualizer
autorefreshTriggerVisualizer
defaultAutorefreshTriggerVisualizer
onDataRequestHandler
stats parameter contains statistical infos and
counters that you can examine to base your decision whether to return true or
false.
defaultOnDataRequestHandler
onRateLimitDataHandler
stats object.
The default onRateLimitData event handler does nothing.
defaultOnRateLimitDataHandler
Bugfix: Fixed an issue with tweets loaded in auto-refreshing mode might have wrong tweet-id. Thanks to Aaron Markie!
Feature: Added support for I18N ('en' and 'de' resources supplied).
Feature: Added support for Twitter's Web Intents (Reply, Retweet, Favorite tweets).
Feature: Added support for users' favorite tweets.
Feature: Added configuration option locale.
Feature: Added configuration option showTweetFeed.autoConformToTwitterStyleguide (Sets options to confirm to Twitter's styleguide regulations).
Feature: Added configuration option showTweetFeed.showTwitterBird (Show/hide Twitter bird icon beneath the timestamp of a tweet, linking to the tweeter's MiniProfile Web Intent).
Feature: Added configuration option showTweetFeed.showActionReply (Show tweet's 'Reply' action: supplies a link to popup the tweet's Reply Web Intent).
Feature: Added configuration option showTweetFeed.showActionRetweet (Show tweet's 'Retweet' action: supplies a link to popup the tweet's Retweet Web Intent).
Feature: Added configuration option showTweetFeed.showActionFavorite (Show tweet's 'Favorite' action (supplies a link to popup the tweet's Favorite Web Intent).
Feature: Added configuration option tweetDataProvider.
Feature: Added configuration option rateLimitDataProvider.
Feature: Added configuration option tweetTwitterBirdDecorator.
Feature: Added configuration option tweetActionsDecorator.
Feature: Added configuration option tweetActionReplyDecorator.
Feature: Added configuration option tweetActionRetweetDecorator.
Feature: Added configuration option tweetActionFavoriteDecorator.
Bugfix: Fixed an issue with showing duplicate tweets in the feed while using the autorefresh: { mode: 'trigger-insert' } feature. Thanks to Adam Southorn!
Bugfix: Fixed an issue to prevent interference with the standard widgets.js file for the Tweet button. Thanks to Brad Beebe!
Bugfix: Fixed an issue with handling auto linking of @username and email addresses. Thanks to Brad Beebe!
Bugfix: The retweeter's screen name was not displayed correctly.
Test: 100+ Unit tests added, based on QUnit (Javascript Unit Testing Framework).
Feature: Support for Twitter's change to string representations of tweet IDs (Snowflake). Twitter will switch to their new ID generator using 64bit unsigned integers on 26th November 2010.
You should update jTweetsAnywhere to V1.2.1 before this date.
Feature: Support for auto-refreshing tweet feeds to build realtime/live tickers.
Feature: Support for several paging modes to show more tweets (mode: 'more' | 'prev-next' | 'endless-scroll').
Feature: Native retweets support.
Feature: Tweet filter support.
Feature: Element visualizer support.
Feature: Event handler support.
Feature: Value formatter support.
Feature: Tweets cache support to minimize rate-limited Twitter API calls.
Feature: Taking care of Twitter's rate limit when loading data from Twitter.
Feature: Added configuration option showTweetFeed.showTimestamp (show/hide/auto-refresh a tweet's timestamp').
Feature: Added configuration option showTweetFeed.showProfileImages (show/hide a user's profile image').
Feature: Added configuration option showTweetFeed.showUserScreenNames (show/hide a user's screen name').
Feature: Added configuration option showTweetFeed.showUserFullNames (show/hide a user's full name.
Feature: Added configuration option showTweetFeed.showGeoLocation (show/hide a tweet's geolocation attribute).
Feature: Added configuration option showTweetFeed.showInReplyTo (show/hide a tweet's in-reply-to attribute).
Feature: Added configuration option tweetUsernameDecorator.
Feature: Added configuration option tweetGeoLocationDecorator.
Feature: Added configuration option tweetInReplyToDecorator.
Feature: Added configuration option tweetRetweeterDecorator.
Feature: Added configuration option tweetFeedControlsDecorator.
Feature: Added configuration option tweetFeedControlsMoreBtnDecorator.
Feature: Added configuration option tweetFeedControlsPrevBtnDecorator.
Feature: Added configuration option tweetFeedControlsNextBtnDecorator.
Feature: Added configuration option tweetFeedAutorefreshTriggerDecorator.
Feature: Added configuration option tweetFeedAutorefreshTriggerContentDecorator.
Feature: Added configuration option noDataDecorator.
Feature: Added configuration option tweetTimestampFormatter.
Feature: Added configuration option tweetTimestampTooltipFormatter.
Feature: Added configuration option tweetVisualizer.
Feature: Added configuration option loadingIndicatorVisualizer.
Feature: Added configuration option autorefreshTriggerVisualizer.
Feature: Added configuration option onDataRequestHandler.
Feature: Added configuration option onRateLimitDataHandler.
Cleanup: tweetProfileImagePresent is deprecated now. Use showTweetFeed.showProfileImages instead.
Feature: Added the tweet's permalink to it's timestamp.
Feature: Added configuration option showTweetFeed.showSource (show a tweet's source ("via") attribute).
Feature: Added configuration option showTweetFeed.expandHovercards (initially show hovercards expanded).
Feature: Added configuration option tweetAttributesDecorator.
Feature: Added configuration option tweetSourceDecorator.
Feature: Added configuration option errorDecorator.
Cleanup: Removed the generation of the <img> element attributes.
[width="48" height="48" border="0"].
in defaultTweetProfileImageDecorator and defaultLoginInfoContentDecorator. Width and height are
now controlled in the jTweetsAnywhere CSS.
Fixed an IE issue with parsing the tweet timestamp.
Initial release.
jTweetsAnywhere is licensed under the MIT license.
In case of questions, suggestions or problems you may have using jTweetsAnywhere, you can contact me.
There are several ways to get in touch.
If you are interested in helping to enhance the plugin's I18N support and can provide translations for additional languages, please let me know.