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;
}
