the Forum

How to use external RSS feeds for your site in jSON with jQuery.

Michael Rosario pic

Posted on November 4, 2011 by Michael Rosario
Total Posts: 32  |  Join date: 03-12-11

We had a client that needed to display twitter and Facebook feeds to their site without using PHP and just jQuery.

The obstacle occurs because I can’t really use $.GET or $.Ajax because it’s restricted to the same domain (Cross-domain Policy), unless we use PHP.

The javascript work around is to use $.getJSON(). I know for a fact that twitter and facebook have RSS feeds that I can use, but how do I convert the RSS feeds?

Thanks to Yahoo!’s API, we can easly convert RSS to XML or jSON. http://developer.yahoo.com/yql/console/

Here’s my sample code to output twitter and facebook feeds:

[...]
<script>
   $(
document).ready(function(){

// TWITTER SAMPLE
      
$.YQL("select * from rss where url='http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=[USER_HANDLE]&count=3'", function(data{
             
$.each(data.query.results.item,function(index){
                    
var tweet '@'+this.title;
                    $(
'.feed-twitter .bdy .items').append('<li class="thumb-feature"><p>'+tweet.parseURL().parseUsername().parseHashtag()+ '</p><p>'+this.pubDate.dateConvert()+'</p></li>');
          
}); 
      
});

// FACEBOOK SAMPLE
      
$.YQL("select * from rss where url='http://www.facebook.com/feeds/page.php?id=[USER_ID]&format=rss20' limit 3", function(fJson{
           
$.each(fJson.query.results.item,function(index){
           
$('.feed-facebook1 .bdy .items').append('<li class="thumb-feature"><p>'+this.description+'</p><p>'+this.pubDate.dateConvert()+'</p></li>').find('a').attr("href",this.link);
               
});
         
});  
  
}); // END of $document.ready

String.prototype.dateConvert = function(){
    
var datetext this.toString();
    var 
jDate = new Date(datetext); 
    var 
HH jDate.getHours();
    var 
MM jDate.getMinutes();
    var 
AM "";
    if(
HH 11){ AM "PM"else { AM "AM"};
    if(
HH 12){ HH HH 12};
    if(
MM 10){ MM "0" MM}
var month=new Array(12);
month[0]="January"month[1]="February"month[2]="March"month[3]="April"month[4]="May"month[5]="June"month[6]="July"month[7]="August"month[8]="September"month[9]="October"month[10]="November"month[11]="December";
    var 
date '' +  month[jDate.getMonth()' ' +jDate.getDate()+', ' jDate.getFullYear().toString() + " at " HH +":"MM " " AM;
    return 
date;
};
String.prototype.parseURL = function(){
    
return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function (url{
        
return url.link(url);
    
});
};
String.prototype.parseUsername = function(){
    
return this.replace(/[@]+[A-Za-z0-9-_]+/g, function (u{
        
var username u.replace("@""")
        return 
u.link("http://twitter.com/" username);
    
});
};
String.prototype.parseHashtag = function(){
    
return this.replace(/[#]+[A-Za-z0-9-_]+/g, function (t) {
        
var tag t.replace("#""%23")
        return 
t.link("http://search.twitter.com/search?q=" tag);
    
});
};
String.prototype.format = function(){
    
var this,
        
arguments.length;
    while (
i--) {
        s 
s.replace(new RegExp('\\{' '\\}''gm'), arguments[i]);
    
};
    return 
s;
};
$.
YQL = function(querycallback{
    
if (!query || !callback{  throw new Error('$.YQL(): Parameters may be undefined');  }
    
var encodedQuery encodeURIComponent(query.toLowerCase()),
    
url 'http://query.yahooapis.com/v1/public/yql?q=' encodedQuery '&format=json&callback=?';
    $.
getJSON(urlcallback);
};
</script>
[
...

Tags: facebook, feeds, jquery, json, parser, rss, twitter, yahoo, yql

There are no answers yet.  Add yours below.

add your comment here
Login

or register to create an account