Adding RSS/microblogging to a webpage

This is a snippet from a future version of Hispavox/Vikuit.

Step one: Import jquery.min.js (tested on 1.5.0) and microblogging.js (reduced version, to check a full version visit vikuit):




(function($){



    var maxItems=0;

    var labelComment = 'Comments';

    var labelBy = 'By';

    var labelRead = 'Read more';

    var current = "";

    var standard = true;

    $.fn.microblogging = function(j){

        var k=$.extend({

            targeturl:"http://www.hispavox.org/",

            loadingImg:'/static/images/throbber.gif',

            maxItems:1,

            standard:true,

            current:"",

            labelComment:'Comments',

            labelBy:'By',

            labelRead:'Read more'},j);



        if(!j.targeturl)

            return false;



        var l=$.extend(k,j);

        var n="xml";

        var divid=guid();

        this.append('<div id="'+divid+'newsfeed"><div class="atomloader" style="position:absolute;text-align:center;z-index:99;"><img src="'+l.loadingImg+'"/></div></div>');

        $('#'+divid+'newsfeed .atomloader').width(this.width());

        $('#'+divid+'newsfeed .atomloader').height(this.height());

        $('#'+divid+'newsfeed .atomloader img').height(this.height()/4);

        var toplocal=(this.height()/2)-($('#'+divid+'newsfeed .atomloader img').height()/2)

        $('#'+divid+'newsfeed .atomloader img').css('margin-top',toplocal+'px');

        var path=l.targeturl;

        maxItems=l.maxItems;

        standard = l.standard;

        labelComment = l.labelComment;

        labelBy = l.labelBy;

        labelRead = l.labelRead;

        current = l.current;

        requestRSS(path,function(results){

            $('#'+divid+'newsfeed').append(results);

            $('#'+divid+'newsfeed .atomloader').remove();

            });

        };



        function S4(){

            return(((1+Math.random())*0x10000)|0).toString(16).substring(1);

        }

  

        function guid(){

            return(S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

        }



        function requestRSS(site,callback){

            if(!site){

                alert('No site was passed.');

                return false;

            }

                new Ajax.Request(site, {

                method: 'get',

                parameters: "",

                onSuccess: cbFunc,

                onFailure: function() {

                    alert(' There was an error :(');

                }

                });

            function cbFunc(data){



                        if(window.DOMParser){

                            parser=new DOMParser();

                            xmlDoc=parser.parseFromString(data.responseText,"text/xml");

                        } else {

                            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

                            xmlDoc.async="false";

                            xmlDoc.loadXML(data.responseText);

                        }



                var items =xmlDoc.getElementsByTagName("item");



                if(items[0]){

                    var datalength=items.length;

                    if(datalength>maxItems){

                        datalength=maxItems

                    };

                    var i;

                    var feedHTML="";

                    for(i=0;i<datalength;i++) {

                        var author = items[i].getElementsByTagName("author")[0].childNodes[0].nodeValue;

                        feedHTML=feedHTML+"<div class='entry'>"

                        feedHTML+="<div class='title'>"+items[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</div>";

                        try {

                            feedHTML+="<div>"+labelBy+": <span class='author'>"+author +"</span>"

                            feedHTML += "</div>";

                        } catch(e) {}

                        try {

                            var pub = new Date(items[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue);

                            feedHTML+="<div class='date'>"+ pub.toLocaleDateString()+" "+pub.toLocaleTimeString()+"</div>"

                        } catch(e) {}

                        feedHTML+="</div>";

                    }

                    if(typeof callback==='function'){

                        callback(feedHTML);

                    }

                } else throw new Error('Nothing returned from getJSON.');

            }

        }//RSS

})(jQuery);





Step two: Add a div to your page:


     <div id="littleRss"></div>


Step three: Create an instance of microblogging:


        <script>

             function loadLittleRss() {

                document.getElementById('littleRss').innerHTML = "";

                $('#littleRss').microblogging({

                                targeturl: "/feed/mblog",

                                maxItems:5,

                                standard:false,

                                labelComments: "Comments",

                                labelBy: "Written by"

                });

            }

             loadLittleRss();

        </script>




And a possible result is here (depends on your CSS):



Vikuit is a Social app developed with Python, Django, Jinja2 and AppEngine.
And Hispavox is...umm wait, visit and you'll see.

No hay comentarios: