Twidget

How to use

1. Reference the Twidget module in your html

   1	<script type="text/javascript" charset="utf-8" src="js/Twidget.js"></script>

2. Instantiate a Twidget object once the domready event has fired

   1 2 3

   window.addEvent("domready", function(){ new Twidget({ user: "mootools", count : "5" }); });

Syntax

1

new Twidget([options]);

Arguments

1. options – (object, optional) the options described below:

Options

• user : (string) The twitter username defaults to mootools
• count : (number) The maximum number of tweets to retrieve. defaults to 5
• element : (element) The container element in which to insert the tweets. defaults to $(“tweets”);

Events

• request : onRequest() – Fired when the request to twitter.com is executed
• cancel : onCancel() – Fired if the request to twitter.com fails
• complete : onComplete() – Fires after the tweets have been inserted into the page.

Default Markup

• All @replies will be wrapped in anchor elements.
• All #hashtags will be wrapped in anchor elements.
• All http/https links will be wrapped in anchor elements.
• Each tweet will be wrapped in a p element with a “tweet” class
• The time/date, relative to now, of the tweet will be appended to the end of the tweet and wrapped in a span element with a “when” class

Example Markup

This is a #tweet that mentions @mootools http://mootools.net 3 days ago

1
2
3
4

<p class="tweet">
  This is a <a href="http://search.twitter.com/search?q=%23tweet">#tweet</a> that mentions <a href="http://twitter.com/mootools">@mootools</a> <a href="http://mootools.net">http://mootools.net</a>.
  <span class="when">3 days ago</span>
</p>

Example Css

The CSS used to layout the widgets on this page is below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

div.twidgets .spinner {
  position              : absolute;
  z-index               : 999;
  opacity               : 0.4;
  filter                : alpha(opacity=40);
  -ms-filter            : progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  background-color      : black;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  -border-radius        : 5px;
}
div.twidgets .spinner-msg {
 text-align  : center;
 font-weight : bold;
}
div.twidgets .spinner-img {
 background : transparent url(http://c5.simulacre.org/images/twidget/spinner.gif) no-repeat -10px 0px;
 width      : 80px;
 height     : 24px;
 margin     : 0 auto;
}
.twidgets:after{
  content     : ".";
  display     : block;
  clear       : both;
  visibility  : hidden;
  line-height : 0;
  height      : 0;
}
div.twidget{
  border                : 3px solid #ebebeb;
  padding               : 0;
  margin                : 10px;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  -border-radius        : 5px;
  width                 : 200px;
  text-align            : center;
  float                 : left;
  position              : relative;
}
div.twidget div.border{
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  -border-radius        : 5px;
  border                : 1px solid #8d8d8d;
}
div.twidget div.inner{
  padding               : 5px;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  -border-radius        : 5px;
  border-top            : 2px solid #fff;
  border-bottom         : 2px solid #fff;
  background            : #f3f3f3 url(http://c5.simulacre.org/images/wdgtbg.gif) repeat-x 0px 0px;
}
div.twidget h3{
  margin     : 0 0 10px;
  font-size  : 11pt;
  text-align : left;
}
div.twidget a {
  text-decoration : none;
  outline         : 0;
  -moz-outline    : 0;
  color           : #dc2509;
}
div.twidget a:hover {
  position    : relative;
  left        : 1px;
}
div.twidget a:active{ top:1px; }
div.twidget img{ border:none; }
.tweets{
  text-align : left;
  font-size  : 8pt;
}
.tweets .posted, .tweets .when{
  font-size   : 7pt;
  white-space : nowrap;
  margin      : 0.25em 0;
}

Changing Links

If the Tweetify module is available Twidget will use it to construct the links, so change Tweetify if you have it installed.

If Tweetify is not available Twidget will use its own internal method linkify. In that case simply extend Twidget and write your own linkify method.

Changing Wrapper Markup

Twidget will wrap all links in a p element with a “tweet” class. The time/date, relative to now, when the tweet was created will be appended to the end of the tweet and wrapped in a span element with a “when” class.

The element described above are added by the internal markup method, so to change the markup, just extend Twidget and write your own markup method.

Known Issues