Implementing String.Tweetify in MooTools

Written by David Walsh on Wednesday, September 2, 2009

Twitter has damn near taken over the world. Everything’s Twitter. Twitter this. Twitter that. TwitterGitter. Twitter everything. I’m more used to reading Twitter-speak (short condensed sentences, #’s, @’s, etc.) now than I am plain English. And since Twitter is only going to continue to get more popular, we better get used to using it on our websites and providing users with formatted tweets. MooTools makes it easy to format tweets with links.

The MooTools Javascript

//implement
String.implement({
	tweetify: function() {
		return this.replace(/(https?:\/\/\S+)/gi,'<a href="$1">$1</a>').replace(/(^|\s)@(\w+)/g,'$1<a href="http://twitter.com/$2">@$2</a>').replace(/(^|\s)#(\w+)/g,'$1<a href="http://search.twitter.com/search?q=%23$2">#$2</a>');
	}
});
//usage
var original = '@davidwalshblog I love your #Mootools LazyLoad plugin!  http://davidwalsh.name/lazyload';
var tweetified = original.tweetify(); //becomes: <a href="http://twitter.com/davidwalshblog">@davidwalshblog</a> I love your <a href="http://search.twitter.com/search?q=%23Mootools">#Mootools</a> LazyLoad plugin! <a href="http://davidwalsh.name/lazyload">http://davidwalsh.name/lazyload </a>

Now you can instantly tweetify any string!

Download PDF

Follow via RSS Epic Discussion

September 02 / #

moonkiki says:

I think this example is not usefull only for twittify but is a good practice to show and teach how to extend in our architecture every Object.

Changing our prospective of OOP developer we can imagine to transform our objects and give them a bit of intelligence like languages like Ruby do, for example :)

September 02 / #

Marc Fowler says:

That right there is glorious. Love it.

September 02 / #

Ororok Orebuk says:

You can do the same with String.prototype.tweetify=function(){ … };

September 02 / #

Sean Hood says:

How would you do this in php or jQuery?

September 02 / #

Darkimmortal says:

Doesn’t extending native objects in Javascript screw things up?

Or is that another myth?

September 02 / #

David Walsh says:

@Sean: jQuery doesn’t lend itself as well to this. I started creating a jQuery version and got frustrated and gave up. I may try again.

@Darkimmortal: Myth. Definitely a myth.

September 02 / #

derschreckliche says:

Nice thing – could be useful for a javascript “tweet this” button implementation.

September 02 / #

Sean Hood says:

Ive recreated this in jQuery http://sublimeorange.com/jquery/tweetify/

September 07 / #

derschreckliche says:

Here is dentify for using with identi.ca and other laconica / statusnet servers:

String.implement({
dentify: function(server) {
return this.replace(/(https?:\/\/\S+)/gi,’<a href=”$1″>$1</a>’
).replace(/(^|\s)@(\w+)/g,
‘$1<a href=”‘+server+’/$2″>@$2</a>’
).replace(/(^|\s)#(\w+)/g,
‘$1<a href=”‘+server+
‘/search/notice?q=%23$2&search=Search”>#$2</a>’
).replace(/(^|\s)!(\w+)/g,
‘$1<a href=”‘+server+
‘/search/group?q=%23$2&search=Search”>#$2</a>’);
}
});

You will have to give it a “server” string like “http://identi.ca”.

I used it for my identi.ca / twitter widget

Big THX again for this useful thing!

September 07 / #

derschreckliche says:

Sorry for double posting – had to change the one line:
(too much copy paste – forgot to put a “!” instead of “#” and killed the “%23″)
this works correct:
String.implement({
dentify: function(server) {
return this.replace(/(https?:\/\/\S+)/gi,’$1’
).replace(/(^|\s)@(\w+)/g,
‘$1@$2’
).replace(/(^|\s)#(\w+)/g,
‘$1#$2’
).replace(/(^|\s)!(\w+)/g,
‘$1!$2’);
}
});

September 08 / #

Wim says:

Good article but it would be smarter to prototype the javascript String object like Ororok said. Then you don’t need any extra javascript framework.

December 16 / #

Hamza says:

nice trick , yesterday i was making a twitter widget profile using mootools and i got my self confused on how to make tweets wel-formatted on mootools ??
this wat u used before

var status = twitters[i].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\]*[^.,;'">\:\s\\)\]\!])/g, function(url) {
return ‘‘+url+’‘;
}).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
return reply.charAt(0)+’‘+reply.substring(1)+’‘;
});

Thanks.