A Recent Topics "Widget" using RSS Feed
Posted November 28th 2011, 10:25pm
Important note! This example is for those members who are trying to learn javascript. There are no instructions to install this on a board. There will be no instructions to install this on a board. Any posts asking for instructions will be deleted.

If you want to learn more about the techniques, please ask, because I realize that XML scripting is an advanced topic.

The good folks at forumotion have, for a long time, provided RSS feeds for their boards. However, the feeds pretty much go unused because, well, no one really knows how to access and use them. Until now. ;)

The following code block will load a board's RSS feed, access the data in the feed, and create a Recent Topics "widget" from the data. The HUGE benefit of using RSS feeds for this purpose is that a portion of the contents of the first post are in the feed data. The code block reads that data, and adds the first post contents as a title tooltip.

This simple example demonstrates several useful javascript techniques, the most important being how to access and manipulate XML data, which is the data format of RSS feeds. Here is the code block that will create the Recent Topics "widget":

var CopyrightNotice = 'Recent Topics widget using RSS feed. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';


var numtopics=10;

var xmlrss=new XMLHttpRequest();
xmlrss.open('GET', '/feed', false);
xmlrss.send('');
var rssfeed=xmlrss.responseXML;

$(function() {
    var feedblock='<div id="rssfeed">';
    var x=rssfeed.getElementsByTagName('item');
    if (x.length < numtopics) {numtopics=x.length;}
    for (i=0; i<numtopics; i++) {
        var topictitle=x[i].childNodes[0].childNodes[0].nodeValue;
        var topicauthor=x[i].childNodes[3].childNodes[0].nodeValue;
        var topicdesc=x[i].childNodes[4].childNodes[0].nodeValue;
        var y=new Date(x[i].childNodes[6].childNodes[0].nodeValue);
        var topiclpdate=y.toLocaleString();
        var topiclplink=x[i].childNodes[7].childNodes[0].nodeValue;
        feedblock=feedblock+'<br /><a href="'+topiclplink+'" title="'+topicdesc+'">'+topictitle+'</a><br /><b>By: '+topicauthor+'</b><br />Last post was '+topiclpdate+'<br />';
    }
    feedblock=feedblock+'<br /></div>';
});

When complete, the variable feedblock contains the HTML of the Recent Topics "widget". At that point you can do whatever you want with the variable.

The "widget" will contain a list of up to 10 topics. You can change the maximum number of topics in the "widget" by changing the value of the numtopics variable.

I hope this is of some benefit to the membership.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Recent Topics "Widget" using RSS Feed
Posted November 29th 2011, 5:11pm
Interesting! So this will allow us to modify the appearance of the Recent Topics? :D
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
A Recent Topics "Widget" using RSS Feed
Posted November 29th 2011, 7:30pm
The code block demonstrates how to address and manipulate XML data.

If you want to modify the Recent Topics widget, look here: [url=/t8486-]http://www.diondesigns.org/t8486-[/url]
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
A Recent Topics "Widget" using RSS Feed
Posted February 12th 2012, 2:47am
Dio you had an exaplme page for this rss example I can't find where it is?
φ
Posts: 163
Joined: August 5th 2011, 11:00pm
Location: Pakistan
Likes Given: 34
Likes Received: 3

Who is online

Users browsing this forum: No registered users and 0 guests