widgets w/ jQuery and Google Feed API

Posted on September 25, 2009, 5:11 pm, under Javascript.

For a recent project, I was making series of AJAX based blog widgets (blogparts).  There wasn’t much of a problem except client server didn’t provide JSON-based API.  Instead of messing with their web-server, I’ve decided to use their RSS feed and Google’s Feed API.

Although using jQuery might be excessive for a simple widget, for the sake of simplicity I’m gonna make use of it.

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

(function () {
 
    var self = function () {
        var scripts = document.getElementsByTagName('script');
        return scripts[scripts.length - 1];
    } ();
 
    var defaults = {
        lang: 'ja',
        num: 5,
        url: 'http://feeds.feedburner.com/blogspot/MKuf'
    };
 
    // actually you should stop proccess if url is invalid.
    var options = {};
    if (self.src.match(/url=([^&]+)/)) options.url = RegExp.$1;
    if (self.src.match(/num=([^&]+)/)) options.num = RegExp.$1;
    if (self.src.match(/lang=([^&]+)/)) options.lang = RegExp.$1;
 
    var outerHTML = self.parentNode.insertBefore(document.createElement('div'), self);
 
    function _initialize() {
        (function ($) {
            //options
            options = $.extend(defaults, options);
            //load your custom css
            loadCss('http://www.zenoplex.jp/css/bp.css');
 
            function parse(data) {
                if (data.responseStatus != 200) return;
                // structure the output
                var html = '<ul>';
                var feed = data.responseData.feed;
                var $entries = $(feed.entries);
                $entries.each(function (index) {
 
                    var li = '<li>';
                    var imgs = /(<img(.+?)>)/.exec(this.content);
                    var img = imgs[1].replace('>', 'width="120px" height="120px" >');
                    li += '<a href="' + this.link + '">' + img + '</a>' + '<br />';
                    li += '<a href="' + this.link + '">' + this.title + '</a>';
                    li += '</li>';
                    html += li;
 
                });
                html += '</ul>';
 
                $(outerHTML).addClass('bp').append(html);
            };
            $.getJSON('http://ajax.googleapis.com/ajax/services/feed/load?q=' + encodeURIComponent(options.url) + '&hl=' + options.lang + '&num=' + options.num + '&v=1.0' + '&callback=?', parse);
        })(jQuery);
    };
 
    function loadScript(url, callback) {
        var script = document.createElement("script");
        script.src = url;
        if (!callback) return;
        script.onload = callback;
        script.onreadystatechange = function () {
            if (/loaded|complete/.test(this.readyState)) {
                callback();
            };
        };
        document.getElementsByTagName("head")[0].appendChild(script);
    };
    function loadCss(url) {
 
        var links = document.getElementsByTagName("link");
        var len = links.length;
        for (var i = 0; i < len; i++) {
            if (links[i].href == url) return;
        }
 
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = url;
 
        document.getElementsByTagName("head")[0].appendChild(link);
    };
    if (typeof jQuery == 'undefined') loadScript('http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', _initialize);
    else _initialize();
})();

HTML

1

<script type="text/javascript" src="http://www.zenoplex.jp/tools/js/bp.js?url=[feedURL here]"></script>

In real world situations, you should style the output with either adding classes or styles to adjust the design.
Enough said, check out the demo here.

Tags: , , ,
Comment (RSS)  |  Trackback

Leave a Reply

«
»