the Forum

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

Posted on November 4, 2011 by Michael Rosario
Total Posts: 33 | 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 s = this,
        i = arguments.length;
    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    };
    return s;
};
$.YQL = function(query, callback) {
    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(url, callback);
};
</script>
[...] 

Tags: There are no tags for this entry.

There are no answers yet. Add yours below.

add your answers here

comments powered by Disqus

Amazon.com Widgets

the Forum

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

There are no answers yet. Add yours below.

add your answers here

Trending Threads

Tags