jump to navigation

Display Your Latest Tweets in Cycled Order into Your Website With JQuery November 25, 2011

Posted by Tournas Dimitrios in JQuery.

In order to grab your attention and have you follow them on Twitter , some web site owners choose to go beyond a simple “Follow Me” button and  display their latest tweets .Twitter also provides all users with a profile widget which can be added to most web sites by grabbing the code and pasting it somewhere in the webpage (sidebar , footer )  . You can even configure the size , colors and number of updates for your badge in the settings . I don’t know if one method is preferable over the other to actually pick up followers , but I thought it might be helpful to take a look at how you can display tweets in an cycled order . My example use the jquery.twitter.search.js  plugin , with 5-lines of code you are ready to go . Visit the demo – page to see this plugin full functional  .

Another demo , it implements the same plugin into a slide-out panel .  

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript" src="http://github.com/malsup/twitter/raw/master/jquery.twitter.search.js"></script> 

<script type="text/javascript">

$(function() {
term: 'tdimitrios',
title: 'My latest tweets',
titleLink: 'http://www.twitter.com/TDimitrios',
birdLink: 'http://www.twitter.com/TDimitrios',
css: { img: { width: '30px', height: '30px' } }
$('#twitter-widget .twitterSearchTitle a, .twitterSearchBird').attr('title','Follow Me');



For those readers that are new with Jquery lets explore the basic steps :

  • First import the three javascript components ( JQuery , jquery-cycle and jquery-twitter-search)  into your webpage .
  • Define a “div” tag anywhere into the layout of your webpage
  • Into a “document-ready” javascript function enable the twitter plugin . It accepts few configuration options , the most important (term : ) , defines your twitter account name .

Alternative plugins :


1. JQuery : Create a Cool Slide Out Panel that contains Twitter/Facebook Contact Links « Tournas Dimitrios - November 25, 2011

[…] example  includes the twitter-cycle plugin functionality . See a demo here . Read also ” Display Your Latest Tweets in Cycled Order into Your Website With JQuery ” […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s