Home
Work
Blog
Resources
Contact
About
Blog

jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support

By tb, 11:44 pm in Javascript  |  Tagged , , , ,  |  18 Comments

Intro

jTweetsAnywhere is a jQuery Twitter Widget with @Anywhere support that simplifies the integration of Twitter services into any website.

With just a few lines of Javascript you can display tweets from users’ feeds and users’ lists, show results from a Twitter search, integrate a customizable TweetBox, let your visitors follow you directly from your site and handle secure authentication with Twitter.

More features

  • Displays tweets from one or more user’s feeds
  • Displays tweets from a user’s list
  • Displays the results of a Twitter search
  • Supports all Twitter search params
  • Supports Twitter’s @Anywhere features
  • Optionally displays profile images in TweetFeeds
  • Automatically detects and marks up links in tweets
  • Automatically links #hashtags to Twitter search requests
  • Automatically links @username to Twitter profiles
  • Automatically shows Hovercards when hovering @username or profile images
  • Integrates a customizable TweetBox, so your visitors can update their status on the fly
  • Adds a Twitter “Follow Button” to your site
  • Adds a “Connect with Twitter” button to your site
  • Provides secure user authentication
  • Handles low level user login and signup procedures
  • Customize the style and layout of the widget with your own stylesheets
  • Overwrite the generated HTML markup by providing your own Decorators
  • Small code size for fast download
  • Does not interrupt the loading of your page

Sample

Let’s start with a simple example on how to embed the widget into your site. We want to show 20 recent tweets from around Paris, France.

First, we have to include the necessary Javascripts. In our head section we add jQuery 1.4.2 and the jTweetsAnywhere plugin.

<head>
	<link rel="stylesheet" type="text/css" media="screen" href="jquery.jtweetsanywhere-1.0.0.css" />

	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.jtweetsanywhere-1.0.0.min.js"></script>
</head>

Next, we add a placeholder (in this case the <div> element with the id ‘tweetsFromParis’) in the HTML page. The placeholder will then be populated by jTweetsAnywhere.

<body>
	<p>Some tweets from around Paris, France ...</p>

	<div id="tweetsFromParis">
	</div>
	...
</body>

Finally, we integrate the plugin’s Javascript.

$(document).ready(function(){
  $('#tweetsFromParis').jTweetsAnywhere({
    searchParams: ['geocode=48.856667,2.350833,30km'],
    count: 20
  });
});

The result will look like this.

20 recent tweets from around Paris, France

Demo

Addional samples that show Twitter’s @Anywhere support und the usage of your own decorators can be found on the jTweetsAnywhere Demo Page.

Download

You can download jTweetsAnywhere from the widget’s home page.

Documentation

You can find the complete documentation of all configuration options on the widget’s home page.

Outro

Any feedback would be appreciated, so give it a try and let me know. Thanks.

Share this post

 

18 Comments

  1. Trackback by designfloat.com — May 28, 2010   12:29 am

    jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support « Thomas Billenstein | Blog…

    jTweetsAnywhere is a jQuery Twitter Widget with @Anywhere support that simplifies the integration of Twitter services into any website.

    With just a few lines of Javascript you can display tweets from users’ feeds and users’ lists, show results from a…

  2. Pingback by Tweets that mention jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support « Thomas Billenstein | Blog -- Topsy.com — May 28, 2010   5:28 am

    [...] This post was mentioned on Twitter by Josh Hemsley, Thomas Billenstein. Thomas Billenstein said: New Blog Post – jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support – http://bit.ly/bXDtKV [...]

  3. Pingback by [User Link:jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support] | Tips for Designers and Developers | tripwire magazine — May 28, 2010   5:48 am

    [...] jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support [...]

  4. Pingback by jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support … » KHMER855.COM — May 28, 2010   6:44 am

    [...] Go here to see the original: jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support … [...]

  5. Trackback by CSS Brigit | jTweetsAnywhere - jQuery Twitter Widget with @Anywhere support — May 28, 2010   12:02 pm

    jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support…

    jTweetsAnywhere is a jQuery Twitter Widget with @Anywhere support that simplifies the integration of Twitter services into any website….

  6. Pingback by jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support … » WB Tips — May 28, 2010   11:32 pm

    [...] Follow this link: jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support … [...]

  7. Pingback by What’s a good audio player widget to upload and play mp3s? | Audio Car System — May 29, 2010   5:28 pm

    [...] jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support « Thomas Billenstein | Bl… [...]

  8. Pingback by 200 Fresh Articles for Designers, Developers and Freelancers | tripwire magazine — May 29, 2010   7:12 pm

    [...] jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support [...]

  9. Pingback by 200 Fresh Articles for Designers, Developers and Freelancers … | Wordpress Themes Stream — May 29, 2010   11:16 pm

    [...] jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support [...]

  10. Comment by Andrew — June 3, 2010   2:22 am

    I would like to try this out, but is there an option to display only my non-reply tweets? I don’t want @-replies to show up. Thanks.

  11. Pingback by wp-popular.com » Blog Archive » jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support « Thomas Billenstein | Blog — June 3, 2010   10:52 am

    [...] post: jTweetsAnywhere – jQuery Twitter Widget with @Anywhere support « Thomas Billenstein | Blog Tags: api, developer, jquery, plugin, [...]

  12. Trackback by George Freeney Jones — June 3, 2010   8:53 pm

    @Anywhere jQuery Twitter Widget…

    jTweetsAnywhere is a jQuery Twitter Widget with @Anywhere support that simplifies the integration of Twitter services into any website. With just a few lines of Javascript you can display tweets from users’ feeds and users’ lists, show results from……

  13. Comment by tb — June 4, 2010   8:18 am

    @Andrew. Currently there is no such option available, but maybe it’s possible to filter them out by adequate search params (using the searchParam option instead of the username option).

    Another alternative is to write your own decorator as atl (http://twitter.com/atl) did here http://gist.github.com/423773

  14. Comment by Quy Le — June 6, 2010   5:52 am

    Thomas, can we configure so that it doesn’t use the “thomasbillenstein.com” application but our own Twitter application. I don’t want my users to see “Connect with thomasbillenstein.com to your twitter account” in the pop-up dialog.

  15. Comment by tb — June 6, 2010   7:49 am

    @Quy Le. If you want to use jTweetsAnywhere’s @Anywhere features on your website you have to register your domain/application with twitter as described in the Usage section on the home page (http://thomasbillenstein.com/jTweetsAnywhere/). After registration you will get an APIKey (Consumer Key) from Twitter that you must use when including the anywhere.js script in your page. When Twitter shows the popup dialog you will see your domain/application name.

  16. Comment by Neil — June 11, 2010   10:27 am

    I love this. Great work.
    Is there a way to show Twitter favorites for a user?
    many thanks

  17. Comment by tb — June 13, 2010   9:10 am

    @Neil. Sorry, unfortunately there is no support for favorites at the moment, but will definitely be in the near future.

  18. Comment by Rahul Vohra — July 29, 2010   3:08 am

    @tb, ++1 for favorites; the official widget uses document.write and other evils.

Sorry, the comment form is closed at this time.