Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Discussion

1. Brian Arnold

   In each of the jQuery(this).find(sel) cases, you can make things a bit more efficient by using the secondary context argument. Looks a lot like the dojo.query form.

   Before: jQuery(this).find('i')
   After: jQuery('i', this)

   Should be a good deal more performant.

   Some people prefer the .find approach – but in that case, I’d suggest keeping a copy of the first call to jQuery(this) around, so it doesn’t have to recreate that object three times – something one commonly sees will be things like var $this = jQuery(this); and then you could just kick off $this.find – not the best efficiency gain ever, but every bit counts. :D

   Or, if you’re really going to be doing jQuery(this) a lot of times and working primarily with the jQueryfied element in the loop, check out Ben Alman’s each2 plugin – http://benalman.com/projects/jquery-misc-plugins/#each2 – there’s some serious performance gains using that approach. I was stunned. Good stuff.
• Doug Neiner

  Hey Brian, if you check the jQuery source, jQuery(this).find("i") would be a tad more performant since jQuery just calls that exact format internally if you do it the other way you suggested with context. (Reference: http://github.com/jquery/jquery/blob/master/src/core.js#L150-154). However, Ben Almans plugin is a great plugin if you use each a lot. In the code in this post, $.each was unnecessary as the bind method does an implicit each when binding.
• Doug Neiner

  Hey David! We need to catch up, hope you are doing well!

  I wonder if you write your jQuery to look like MooTools code on purpose, or it happens by accident :) I took a stab at writing it in a more idiomatic jQuery fashion using some optimizations and short form where possible. The the most important optimization is that you don’t need to call .each on the form selector as .bind does an implicit each on it anyway. A second readability optimization is that you can pass $ as the first parameter of the anonymous document ready callback function and use it internally instead of the more verbose jQuery term. You can check out the original and the revised as a Gist.”>http://gist.github.com/550834″ rel=”nofollow”>the original and the revised as a Gist.

  the original and the revised as a Gist.”>
• David Walsh

  I’m probably guilty of writing jQuery MooTools-style. I’ve updated my post to use your more awesome version.
2. Ege Özcan

   Nice article. The only thing is that I couldn’t figure out the reason behind using .each() and attaching events one by one. This could also be done like $(selector).bind('someAction',fn() {doSomething;}); (It basically does the same thing but the code gets simpler)
3. Cesar Scur

   Is there a way that I can use this with the twitter api? I mean, if the one who click the button is loged on twitter he will start to follow me, otherwise a popup to login open up, all with no server side from my domain (just twitter’s).
• Cesar Scur

  There is no simple way as magic but this gives some directions:
  http://www.sitepen.com/blog/2009/02/19/introducing-oauth-in-dojox/
4. Bryan Forbes

   The Dojo example could be simplified a bit by doing this:

   dojo.ready(function(){
       dojo.query('form.follow-form').onsubmit(function(e){
           dojo.stopEvent(e);
           dojo.query('i', this).addClass('active');
           // ...
       });
   });
   

   Almost all DOM events can be bound like that and it will run the function in the context of the node (this will be the node).
5. Savageman

   Hey David,

   I also have a simplification for the MooTools code.

   $$('form.follow-form').each(function(form) { 
       /* stop form event */ 
       form.addEvent('submit',function(e) { 
         // [...]
       }
     });
   

   Shouldn’t be this code be written as follow:

   $$('form.follow-form').addEvent('submit',function(e) { 
         // [...]
     });
   
6. Russell

   Love this great code, but I want to know something a bit different.
   When you are on Twitter.com and you have some new post, what I would like to do, is allow new posts to load, the same way that twitter allow.

   it seems that Twitter inserts data in between divs depending on the users post time.

   I am wondering how do we do that with jQuery?
7. suliaman

   hello i would really like to know how to deal with twitter-follow.php, i know how to the mysql side of things, but how i send back a success when the data has been entered into the database, thank you very much
8. Abhik

   David,
   I like the way you did it.
   well, to be honest, I am a nut when it comes to coding.
   But, I’d like to add a checkbox after my blog’s comment field. When people check that box while commenting, then automatically follow me on twitter.

   Is that possible?
   Thanks
   Abhik
9. bose

   Here’s my attempt at writing Mootools in jQuery style, not sure if it works?

   /* with mootools */
   window.addEvent('domready',function() {
       /* fetch elements and stop form event*/
       $$('form.follow-form').addEvent('submit',function(e) {
           /* stop event */
           if(e) e.stop();
           /* send ajax request */
           this.getElement('i').addClass('active');
           new Request({
               url: 'twitter-follow.php',
               onSuccess: function() {
                   /* find and hide button, create element */
                   var button = e.target.getElement('button').hide();
                   new Element('span.following',{
                       html: 'Following!'
                   }).inject(button,'after');
               }
           }).post({followID: e.target.getElement('input').value});
       });
   });
   
10. Web Dizajn BiH

    Great! THX from Sarajevo!
11. Steve

    Great code but missing just as important “un-follow functionality”…
12. Atticus

    This is very cool! How would you implement an “un-follow” button in the same space, once the button has changed to “following!” ?
13. Jimmy

    Call me a n00b, but I’m stuck at the PHP part. Where is the code for twitter-follow.php? Is that in a separate article? As far as I can tell, when I click on this button, it tries to reference that page, but I don’t have it yet. It’s been a while since I did anything with AJAX, so this could just be a brain fart… Would you mind pointing me in the right direction?

    I’m frustrated that Twitter’s @Anywhere API doesn’t define a SIMPLE follow button that ONLY has the user follow the specified Twitter account, and that’s IT. I don’t want my users to have to install a custom app on their Twitter account. I won’t follow anyone who tries to make me give up information about myself just to follow them, and I expect my website visitors feel the same way. Facebook has a VERY simple “Like” button that works on any website without any hassle. Why all the nonsense, Twitter?
14. ram

    Can u give the php code?
15. neha sachan

    sir,i m trying your script but its not working,m using html,css and jquery.
16. Nikolai

    Very good script. For me, working perfectly, but I touched a little code : )
17. Frank

    It will be nice to have a sample of what the twitter-follow.php would look like. Am trying to adapt parts of this tutorial to a project am working on (non-twitter related)