O'Reilly

Implementing String.Tweetify in MooTools

By on  
TwitterGitter

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!

Track.js Error Reporting

Recent Features

  • Animated 3D Flipping Menu with CSS

    CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more.  I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet...

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

  • jQuery Link Nudging

    A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery: The jQuery JavaScript It's important to keep...

  • MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse....

Discussion

  1. 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 :)

  2. That right there is glorious. Love it.

  3. Ororok Orebuk

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

  4. How would you do this in php or jQuery?

  5. Darkimmortal

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

    Or is that another myth?

  6. @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.

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

  8. 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!

  9. 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’);
        }
        });
  10. 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.

  11. 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.

  12. Abby Torrendon

    Hi, I just want to make a request, could you make a blank demo page of this code? I was trying to figure the codes out (kinda newbie in MooTools) and I would like to add this to my school project (my prof wants us to make a sample portfolio site). Thanks in advance.

  13. Abby Torrendon

    By the way, I’m currently using MooTools 1.2, but the code won’t mess up if I’m using the old version, right?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Serve a Directory via Python

    Sometimes I'm working with a test HTML file and some JavaScript but need to work off of a served space.  In that case, I sometimes need to swap out folders within MAMP Stack which leads to a maintenance nightmare.  Bleh. I recently found out that you can...

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...