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!  https://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="https://davidwalsh.name/lazyload">https://davidwalsh.name/lazyload </a>

Now you can instantly tweetify any string!

Raygun Pulse

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    iPad Detection Using JavaScript or PHP

    The hottest device out there right now seems to be the iPad. iPad this, iPad that, iPod your mom. I'm underwhelmed with the device but that doesn't mean I shouldn't try to account for such devices on the websites I create. In Apple's...

  • By
    Unicode CSS Classes

    CSS class name structure and consistency is really important; some developers camelcase classnames, others use dashes, and others use underscores.  One thing I've learned when toying around by HTML and CSS class names is that you can actually use unicode symbols and icons as classnames.

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!