Recently when I was building a website for our Finelight Interactive Team, I realized that there are numerous twitter pluggins which typically only allow to display tweets from a single user but none allow to aggregate multiple user tweets onto one display. Continuing my quest to display the tweets of our joyous team in a single place, I searched through all possible options: Google, Delicious, Mashable among other web 2.0 websites. And finally, I came across a very useful plug-in called Juitter which I added it to our team blog (you can find it on the right hand side bar of the page). Working with the plugin, I scanned through various juitter files and want to share with you all so we have some documented reference about adding Juitter twitter feeds. In this post I will be explaining how to add Juitter to a website and receive the latest tweets from a group of people.
Step 1: Firstly, Download the plugin from Juitter.
Step 2: Add the juitter js files to the js folder.
Step 3: Insert the following code to <head> section of the webpage where you would like to display the latest tweets.
<script type=”text/javascript” src=”js/system.js”></script>
<script type=”text/javascript” src=”js/ jquery.juitter.js”></script>
Step 4: Open the system.js file in your favorite editor and edit the following terms.
searchType:“fromUser”, // needed, you can use “searchWord”, “fromUser”, “toUser”
searchObject:“tweetmeme”, // needed, you can insert a username here or a word to be searched for, if you wish multiple search, separate the words by comma.
// The values below will overwrite the ones on the Juitter default configuration.
// They are optional here.
// I’m changing here as a example only
lang:“en”, // restricts the search by the given language
live:“live-15″, // the number after “live-” indicates the time in seconds to wait before request the Twitter API for updates.
placeHolder:“juitterContainer”, // Set a place holder DIV which will receive the list of tweets example
loadMSG: “Loading messages…”, // Loading message, if you want to show an image, fill it with “image/gif” and go to the next variable to set which image you want to use on
imgName: “loader.gif”, // Loading image, to enable it, go to the loadMSG var above and change it to “image/gif”
total: 2, // number of tweets to be show - max 100
readMore: “Read it on Twitter”, // read more message to be show after the tweet content
nameUser:“image” // insert “image” to show avatar of “text” to show the name of the user that sent the tweet
Step 5: Place the following code in the <body> section of the web page where you want to display the tweets.
Step 6: Edit the css accordingly to style the tweets as you desire.
#juitterContainer{
width:190px;
padding-top:5px;
}
#juitterContainer ul {
margin:0px;
padding:0px;
}
#juitterContainer ul li {
background:url(../images/blog_twitterbird.jpg) no-repeat left top;
list-style-image:none;
list-style-position:outside;
padding-left:25px;
}
.twittLI {
display:list-item !important;
margin:0px 0px 20px;
}
.twittList li.twittLI {
opacity:1 !important;
width:180px !important;
height:100% !important;
}
Thats it!! sit back, relax and watch the tweets from your interested on your website/blog.
I think this is a cool blog so I finally decided to make a post.I thought about starting my own board but I‘m glad I found this one instead. Great Info!
Hello, where exactly is the section in wordpress. I can’t find it. Thanks for the help.
I have rolled my own Php script for displaying multiple tweets from multiple userids - input multiple userid separated by comma and it displays formatted tweets as html rather than javascript
http://coderidge.com/Twitter.php
Thanks for the suggestions and information’s.
Any pointers on how to load avatar along with the tweets ?
We are trying to create a script to float alongside maps that represent multiple Twitter users and provide a sort of “ticker” feel as to what is happening in that region.
I tried the coderidge script and it couldn’t fetch a number of feeds but did aggregate about 60% of what I fed into the fields.
Has anyone looked at Afterglide? afterglide.googlepages.com
It seems that this is what everyone is after and it just needs some design elements and formatting (really like the TWTR widget’s look and feel). They call this “striping” together Tweets…
Good conversation!
Hi Ella, Please see the twitter section on the rightside bar under the headline “Twitter”. Attached is the screenshot for reference — screenshot
@Honey Singh To display the avatar use please Juitter plugin as it is. On our site we have modified the code to display custom avatar. I hope it helps.
What about the new twitter lists? They should have an API by now.
I have tried to integrate this script into wordpress with no luck. Everything is set up perfectly, as instructed, but to no avail.
Is it possible that there is a conflict with a jquery effect built into the theme I am using? Has anyone else had trouble that they were able to overcome?
JSteb, Just try to put the script in a clean html page and see if it works. Then try to debug by adding your required javascript elements as required and see what conflicts. That is what i would do.
Hi there!
Excellent ‘thing’ I’ve found :).
But… ( there’s always a but ): juitter is working properly if I add my old Twitter username ( which is about 1 and a half years old ), but when I add my newly created username it stops displaying the tweets.
Is this a known issue, or I’m the first that encounters this problem.
@Sebah Hi Sebah, are your tweets protected with new username? Juitter cann’t display protected tweets.
Hey Srilatha,
Thanks for the fast response.
Nope, my tweets are not protected.
I tried to change the username to an old username ( about 1 year old ) that has only one tweet and it’s not working neither.
Just for the record the ‘problem’ twitter account is GreatNZFilmPoll.
@Sebah Juitter is based on Twitter Search api. The problem is related to how twitter search api works. I tried your user name on search.twitter.com and it didnt not yield any results. http://search.twitter.com/search?q=+from%3AGreatNZFilmPoll The problem is either related to twitter search api or your account.
Just my two cents!
Hi Srilatha —
Is there a way to change the time on the twitter feed? The way it displays right now dates the tweets 8-9 hours in the FUTURE (which is very confusing to users).
The twitter user is in Pacific Standard timezone (US) and I would like that to be the timezone in the feed as well.
Any help (and idiot-proof directions since I’m a complete neophyte to anything scripted) would be much appreciated.
Thanks!