Step 1. Create a Twitter Appliation at https://dev.twitter.com/apps with the Read and write access permissions and Organization or personal website for callback url in Application.
Step 2. Integrate ChildBrowser in your Project . Check this blog
Step 3. Create a folder named js inside the www directory in your project.
Step 4. Download jquery from their website and add to your project’s www folder.
Step 5. Download OAuth.js file from this link and add to your project’s www folder.
Step 6. Replace the content of index.html file in the www folder of your project with the written below:-
<!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script> <script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script> <script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script> <script type="text/javascript" charset="utf-8" src="jsOAuth-1.3.6.js"></script> <script type="text/javascript"> function onBodyLoad(){ document.addEventListener("deviceready", onDeviceReady, false); } function onDeviceReady() { var root = this; cb = window.plugins.childBrowser; if(!localStorage.getItem(twitterKey)){ $("#loginBtn").show(); $("#logoutBtn").hide(); } else { $("#loginBtn").hide(); $("#logoutBtn").show(); } if (cb != null) { cb.onLocationChange = function(loc){ root.locChanged(loc); }; cb.onClose = function(){root.onCloseBrowser()}; cb.onOpenExternal = function(){root.onOpenExternal();}; } } function onCloseBrowser() { console.log("onCloseBrowser!"); } function locChanged(loc) { console.log("locChanged!"); } function onOpenExternal() { console.log("onOpenExternal!"); } </script> <!--Below is the code for twitter--> <script> // GLOBAL VARS var oauth; // It Holds the oAuth data request var requestParams; // Specific param related to request var options = { consumerKey: 'xxxxxxxxxxxxxxx', // YOUR Twitter CONSUMER_KEY consumerSecret: 'xxxxxxxxxxxxx', // YOUR Twitter CONSUMER_SECRET callbackUrl: "<a href="http://your-callback-url/">http://Your-callback-URL/</a>" }; // YOU have to replace it on one more Place var twitterKey = "twtrKey"; // This key is used for storing Information related var Twitter = { init:function(){ // Apps storedAccessData , Apps Data in Raw format var storedAccessData, rawData = localStorage.getItem(twitterKey); // here we are going to check whether the data about user is already with us. if(localStorage.getItem(twitterKey) !== null){ // when App already knows data storedAccessData = JSON.parse(rawData); //JSON parsing //options.accessTokenKey = storedAccessData.accessTokenKey; // data will be saved when user first time signin options.accessTokenSecret = storedAccessData.accessTokenSecret; // data will be saved when user first first signin // javascript OAuth take care of everything for app we need to provide just the options oauth = OAuth(options); oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>', function(data) { var entry = JSON.parse(data.text); console.log("USERNAME: " + entry.screen_name); } ); } else { // we have no data for save user oauth = OAuth(options); oauth.get('<a href="https://api.twitter.com/oauth/request_token">https://api.twitter.com/oauth/request_token</a>', function(data) { requestParams = data.text; cb.showWebPage('<a href="https://api.twitter.com/oauth/authorize?">https://api.twitter.com/oauth/authorize?</a>'+data.text); // This opens the Twitter authorization / sign in page cb.onLocationChange = function(loc){ Twitter.success(loc); }; // Here will will track the change in URL of ChildBrowser }, function(data) { console.log("ERROR: "+data); } ); } }, /* When ChildBrowser's URL changes we will track it here. We will also be acknowledged was the request is a successful or unsuccessful */ success:function(loc){ // Here the URL of supplied callback will Load /* Here Plugin will check whether the callback Url matches with the given Url */ if (loc.indexOf("<a href="http://your-callback-url/?">http://Your-callback-URL/?</a>") >= 0) { // Parse the returned URL var index, verifier = ''; var params = loc.substr(loc.indexOf('?') + 1); params = params.split('&'); for (var i = 0; i < params.length; i++) { var y = params[i].split('='); if(y[0] === 'oauth_verifier') { verifier = y[1]; } } // Here we are going to change token for request with token for access /* Once user has authorised us then we have to change the token for request with token of access here we will give data to localStorage. */ oauth.get('<a href="https://api.twitter.com/oauth/access_token?">https://api.twitter.com/oauth/access_token?</a>oauth_verifier='+verifier+'&'+requestParams, function(data) { var accessParams = {}; var qvars_tmp = data.text.split('&'); for (var i = 0; i < qvars_tmp.length; i++) { var y = qvars_tmp[i].split('='); accessParams[y[0]] = decodeURIComponent(y[1]); } $('#oauthStatus').html('<span style="color:green;">Success!</span>'); $('#stage-auth').hide(); $('#stage-data').show(); oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]); // Saving token of access in Local_Storage var accessData = {}; accessData.accessTokenKey = accessParams.oauth_token; accessData.accessTokenSecret = accessParams.oauth_token_secret; // Configuring Apps LOCAL_STORAGE console.log("TWITTER: Storing token key/secret in localStorage"); localStorage.setItem(twitterKey, JSON.stringify(accessData)); oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>', function(data) { var entry = JSON.parse(data.text); console.log("TWITTER USER: "+entry.screen_name); $("#welcome").show(); document.getElementById("welcome").innerHTML="welcome " + entry.screen_name; successfulLogin(); // Just for eg. app.init(); }, function(data) { console.log("ERROR: " + data); } ); // Now we have to close the child browser because everthing goes on track. window.plugins.childBrowser.close(); }, function(data) { console.log(data); } ); } else { // Just Empty } }, tweet:function(){ var storedAccessData, rawData = localStorage.getItem(twitterKey); storedAccessData = JSON.parse(rawData); // Paring Json options.accessTokenKey = storedAccessData.accessTokenKey; // it will be saved on first signin options.accessTokenSecret = storedAccessData.accessTokenSecret; // it will be save on first login // javascript OAuth will care of else for app we need to send only the options oauth = OAuth(options); oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>', function(data) { var entry = JSON.parse(data.text); Twitter.post(); } ); }, /* We now have the data to tweet */ post:function(){ var theTweet = $("#tweet").val(); // You can change it with what else you likes. oauth.post('<a href="https://api.twitter.com/1/statuses/update.json">https://api.twitter.com/1/statuses/update.json</a>', { 'status' : theTweet, // javascript OAuth encodes this 'trim_user' : 'true' }, function(data) { var entry = JSON.parse(data.text); console.log(entry); // just for eg. done(); }, function(data) { console.log(data); } ); } } function done(){ $("#tweet").val(''); } function successfulLogin(){ $("#loginBtn").hide(); $("#logoutBtn,#tweet,#tweeter,#tweetBtn,#tweetText").show(); } function logOut(){ //localStorage.clear(); window.localStorage.removeItem(twitterKey); document.getElementById("welcome").innerHTML="Please Login to use this app"; $("#loginBtn").show(); $("#logoutBtn,#tweet,#tweeter,#tweetText,#tweetBtn").hide(); } </script> <!--Code for Twitter ends here--> </head> <body onload="onBodyLoad()"> <h4>Oodles Twitter App</h4> <table border="1"> <tr> <th>Login using Twitter</th> <th> <button id="loginBtn" onclick="Twitter.init()">Login</button> <button id="logoutBtn" onclick="logOut();">Logout</button> </th> </tr> <tr id="tweetText" style="display:none;"> <td colspan="2"><textarea id="tweet" style="display:none;"></textarea></td> </tr> <tr id="tweetBtn" style="display:none;"> <td colspan="2" align="right"> <button id="tweeter" onclick="Twitter.tweet();" style="display:none">Tweet</button> </td> </tr> <tr><td colspan="2"><div id="welcome">Please Login to use this app</div></td></tr> </table> </body> </html>
Step 7. Replace the Consumer Key, Consumer Secret and Callback URL in the index.html file with your’s which as mentioned in your Twitter Application.
Step 9. Run the App.
Step 10 : Well there is no step 10, 9 steps to twitter didn’t seem right 😛
I will immediately take hold of your rss as I can not to find your e-mail subscription hyperlink or
newsletter service. Do you’ve any? Please let me know in order that I could subscribe.
Thanks.
Also visit my page madden mobile hack
Keep this going please, great job!
Do you mind if I quote a few of your posts as long as I provide credit and sources back to your weblog?
My website is in the exact same area of interest as yours and my users would certainly benefit from a lot of the information you present here.
Please let me know if this okay with you. Thank you!
Yes , please do .