SunBlogNuke - DotNetNuke Blog Module

With more clients paying more attention to our Ultimate DNN Blog Module – SunBlogNuke, this blogging engine for DotNetNuke platform have been used by more and more excellent websites, like db4 developer website. In the agile process of SunBlogNuke development, we embraced changes and focused more attentions on clients’ feedback or feature request. If you have more questions or any suggestions for our blog module, please feel free to let us know or begin a new post in our forum. We are there for you and will try our best to help you. Here I also would like to thank some clients for your awesome contributions in our community, like Eric and Matt.

Today I would like to cover a tip shared by Eric in our support forum. You will learn how to retrieve feed in DotNetNuke with jQuery. Please visit the demo link and db4 developer website to see how it action firstly. Okey, let us go ahead the integration process below on how to add a blogging feed to your site.

1) Make sure whether there exist the core jQuery framework in the current page. It should be there if your website is above 5.x.

2) Add the Html module to your page and click "Edit Content" and enter html editor panel.

3) Switch to "Rich Text Editor" mode and click "Source" into html source as screenshot below:

4) Copy the following codes and paste it into the text area:

<div id="rssdata" class="community_activity">
    <div class="loading">loading activity feed...</div>
</div>

<script type="text/javascript" language="javascript">
    $(function() {
        var pipe_url = 'YOURFEEDURL'; // e.g '/Blogs/Community/tabid/166/rssid/0/Default.aspx';
        var max_records = 4;
        var item_style = 'box_dark';
        var item_style_alt = 'box_light';

        $.get(pipe_url, function(xml) {
            $("item", xml).each(function(index, item) {
                if (index >= max_records) return; //short-circut for the max_records
                var s = (index % 2 == 0) ? item_style : item_style_alt;
                var item_html = '<div class="box_size ' + s + '"><a href="' + $("link", item).text() + '">' + $("title", item).text() + '</a></li>';
                $('#rssdata').append(item_html);
            });

            $('#rssdata div.loading').fadeOut();
            $('#rssdata').slideDown();
        });
    });
</script>

that's all the code you need. You just need to replace the token [YOURFEEDURL] with your specific feed source. Also  you can do some more things basing the code snippet, like rendering the description and publish date. Please refer to the related resources in the end of the post.

5) Click "Save" and return front-end page. Then you will discover that the slider works like a charm. :)

Note that you may need to add some styles into skin file (skin.css) for making your slider more cool, for example the box_dark & box_light mentioned in the above code sample.

Related resources:

http://visualrinse.com/2008/09/24/how-to-build-a-simple-rss-reader-with-jquery