Jquery mobile / phonegap OAuth1.0 :(


#1

I just want to display my own account’s time line feed to a jquery mobile app I am making.
I was using the version 1 API and displaying the feed fine but that will be gone this month.

Has anyone done this successfully with a jquery mobile app? I know you can not authenticate with JavaScript but there must be a way to do it…
Plz share your method with me !

So far the closest I have got to a accessing my feed to my jquery app is by running an OAuth request on my website, enabling data to be pulled from the page with CORS then getting what ever is outputed by the OAuth library.

Instead of json objects though, it’s outputting an array?

I am using tmhOAuth.php lib.


#2

I found a solution for anyone using jquery mobile just incase someone else out there needs…

1st - follow this guide for getting the feed to your website:
http://www.tom-elliott.net/php/authenticating-twitter-feed-timeline-oauth/

2nd - Use CORS to let your app grab the feed from your page : header(‘Access-Control-Allow-Origin: *’);
Make sure your php file is set to json content : header(‘Content-type: application/json’);

3rd - Call this page from your jquery app :

	//this is an interval refresher
	<script type="text/javascript"> $(document).ready(function(){
		var refreshID = setInterval(function () {
			$.getJSON('http://www.thehappening.ca/oauth/happeningtweets.php',function(data){
				listTweets(data);
				$('#tweetlist').trigger('create');
			});
		}, 100000);
		});
		</script></code>

4th - Then run your feed through a function to pull all the @'s #'s etc… and do some CSS and you have a nice single user twitter feed on your web app.

(UPDATE-- the hashtag search doesnt seem to be working hmm but the @'s does )example function:
function listTweets(data){
console.log(data);

var output = '<ul data-role="listview" data-theme="a">';

$.each(data, function(key, val) {
	var text = data[key].text;
	var thumbnail = data[key].user.profile_image_url;
	var name = data[key].user.name;
	
	text=text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g, function(i){
		var url=i.link(i);
		return url;
	});
	
	text=text.replace(/[@]+[A-Za-z0-0-_]+/g,function(i) {
		var item= i.replace("@",'');
		var url=i.link("http://twitter.com/" + item);
		return url;
	});
	
	text = text.replace(/[#]+[A-Za-z0-9-_]+/g, function(i) {
		var item=i.replace("#",'%23');
		var url = i.link("http://search.twitter.com/search?q="+item);
		return url;
		});
	
	output += '<li>';
	output += '<img src="' + thumbnail + '" alt="photo of ' +name+ '" height="50" width="50"/>';
	output += '<div>' + text + '</div>';
	output += '</li>';
});//gothru eachtweet 
output += '</ul>';
$('#tweetlist').html(output);

}

Example CSS:

#tweetlist img{
-webkit-border-radius: 10px;
-mox-border-radius:10px;
border-radius: 10px;
margin:10px 0 0 25px;

}

#tweetlist .ui-listview li{

font-weight: normal;
border-top: 1px solid #888;

}

#tweetlist .ui-listview a{
color: #00c4ff;
}


#3

to make the hash tag search work take out the “search” in the url construct in the listTweets function.

var url = i.link(“http://search.twitter.com/search?q=”+item);

should just be :

var url = i.link(“http://www.twitter.com/search?q=”+item);


#4

Do you have a hosted example?


#5

thanks !!