How To Implement a Twitter Reactions Badge with Juitter and jQuery

5
October 13, 2009
Tweet

Woork Up Editor in Chief

Become a Contributor

We are looking for enthusiastic people, lovers of technology and internet for our editorial staff.
Read more...

In spotlight

Juitter is an interesting jQuery plugin to put Twitter live on your website. Juitter is lightweight, fast, in real-time, fully customizable and doesn’t slow down your page while tweets are loading. In this article I want to illustrate how you can use Juitter to implement a powerfull Twitter reactions badge that displays in real time the reactions of Twitter users to your posts. The only thing you have to do is to download Juitter Beta (the package includes two JavaScript files: jquery.juitter.js and system.js) and include them in the tag of your page after the link to jQuery:

<script type="text/javascript" src="jquery.juitter.js">&lt/script>

<script type="text/javascript" src="system.js">&lt/script>

Then you have to add the following layer where you want reactions appear.

<div id="juitterContainer"></div>

Customizing search results is very simple. First of all you have to define a search key. I used the title of posts for that, making some changes to the system.js original source code. Open system.js and modify the firs,t lines of the code:

$(document).ready(function() {

$.Juitter.start({

whit the following ones:

$(document).ready(function() {

var mysearch = $(".post h1").html();

$.Juitter.start({

and set searchObject with the value of mysearch in this way:

searchObject:mysearch,

In the previous code I simply added a new var mysearch that gets the title of the post using a jQuery selector. Important: I'm assuming that the title of posts is wrapped by the h1 tag and the container, within which the title is, has the class property set to .post. You have to change the selector $(".post h1")coherently with the structure of your pages.
Change the parameter total: with the number of tweet to be show and change the number after live:live- with a number that indicates the time in seconds to wait before request the Twitter API for real time updates. You can also customize a lot of other parameters following the instructions on the system.js file.

Each tweet is contained within a li tag with the class property set to .twittLI. So, if you want to customize the look of the badge that display search results the only thing you have to do is to add a simple class .twittLI to your CSS file. Here is an example:

.twittLI{

border-bottom:solid 1px #DFDFDF;

clear:both;

padding:4px;

}

Comments

October 13, 2009 at 9:07 am

Chema Reply

Hi, I know is not the same but I developed a simple twitter badge generator, feel free to try it here: http://lab.neo22s.com/twitterBadge/

Also I will take a close look to your proposal.

Regards
October 13, 2009 at 12:28 pm

Mohaned Amine Reply

Thanks Antonio for this illustration. Now i am really thinking to implement this plugin in my blog.
October 16, 2009 at 3:04 am

Peter Reply

It´s looking great with Recent Twitter Reactions after your post.

Is it possible to integrate Juitter in a WordPress blog, in a kind of easy way?

Any tutorial for WordPress?

Great tips by the way..
- October 31, 2009 at 9:27 am
  
  Antonio Lupetti
  
  Peter you can make exactly the same steps I illustrated on this post!
February 6, 2010 at 7:24 am

Amey Gokarn Reply

I was wondering if I can have multiple twitter feeds on 1 page using juitter?