Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

Apr 19, 2010

Set "connect with twitter" anywhere

Twitter @Anywhere is an easy solution for bringing the Twitter communication platform to your site. In my previous post we learned how to set twitter hovercard with anywhere Today i am sharing the code for using @Anywhere to integrate "Connect to Twitter."



Idea

Some @Anywhere functionality doesn't require the user to authorize your site for access ( like viewing a given Twitter user's profile info in a Hovercard). Other functionality, like to follow a user on Twitter via the Follow Button and Tweet from your site require the user to login to Twitter and authorize your site for access.
NOTE - To Tweet via anywhere your application must has Read/Write permissions. unfortunately option to change permissions is not supported yet on http://dev.twitter.com. Dont worry, go to http://twitter.com/oauth to change permissions.

Code

First of all go to http://dev.twitter.com/apps/new to register your application and and get an APIKEY

HTML

 <div id="user"></div>
 <div id="login"></div>
 <div id="logout"></div>
 <div id="default-tweetbox"></div>
 <div id="follow-dharmmotyar"></div> 
These are the target Divs for @anywhere element.

JavaScript
We have to include this script like this -

 <script src="http://platform.twitter.com/anywhere.js?id=APIKEY&v=1"></script> 

and


//This function Updates HTML elements 
function update(T){
if (T.isConnected()) {
      document.getElementById('user').innerHTML = 'Logged in as : ' + T.currentUser.data('screen_name');
      document.getElementById('logout').innerHTML = '<a href='#' onClick="twttr.anywhere.signOut();">Sign out of Twitter</a>'; 
      //Add tweet box 
      T('#default-tweetbox').tweetBox();
  }
}
twttr.anywhere(function(T) {
    update(T);
    // The follow button
    T('#follow-dharmmotyar').followButton('dharmmotyar');
    //connect button
    T('#login').connectButton({
                    authComplete: function(loggedInUser) {
                        // triggered when auth completed successfully
                        update(T);
                    },

                    signOut: function() {
                          // triggered when user logs out
                          document.getElementById('logout').innerHTML = '';
                          document.getElementById('default-tweetbox').innerHTML = '';
                          document.getElementById('user').innerHTML = ''; 
                    }
          });
}); 

Demo

You can see this code in action here.

Labels: , ,




By :