Simple jQuery Plugin for Displaying Recent Tweets - jtwt.js

File Size: 9.04KB
Views Total: 4627
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Plugin for Displaying Recent Tweets - jtwt.js

jtwt.js is a lightweight jQuery plugin that allows you using twitter json API to display anyone's recent tweets on your web page or elsewhere. You're free to use jtwt.js in personal and commercial projects.

You may also be interested in:

How to use it:

1. Include jQuery Library and jtwt.js on the web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jtwt.min.js"></script>

2. Markup

<div id="twitter"></div>

3. The CSS

#jtwt {
list-style: none;
}
#jtwt li {
margin-bottom: 10px;
}
#jtwt li:last-child {
margin-bottom: 0px;
}
#jtwt_loader {
font-weight: bold;
}
.jtwt_picture {
float: left;
margin-right: 10px;
}
p.jtwt_tweet_text {
text-align: justify;
}
a.jtwt_date {
font-size: 12px;
}
#jtwt {
border-radius: 2px;
overflow: hidden;
}
#jtwt li {
background: #38363f;
padding: 10px;
margin-bottom: 5px;
}
#jtwt .jtwt_tweet:last-child {
margin-bottom: 0px;
}
.jtwt_picture {
float: left;
margin-right: 10px;
}
.jtwt_picture img {
border-radius: 2px;
}
.jtwt_tweet_text {
margin-bottom: 0px;
}
.jtwt_date {
display: inline-block;
width: 100%;
text-align: right;
line-height: 12px;
font-size: 12px;
}

4. Call the plugin with options

<script type="text/javascript">
$(window).load(function() {

$('#twitter').jtwt({

username: 'jqueryscript',
count: 5,
image_size: 24

});

});
</script>

5. Options

 

  • count : int,  // The number of displayed tweets.
  • username : 'yourusername', // Your username.
  • image_size : int, // The size of your avatar.
  • loader_text : 'loading tweets', // loading text

 


This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.