Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Custom Widgets > Custom RSS Feed
Mottie (SuperAdmin) 6/9/2008 9:50 AM EST : Custom RSS Feed
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

How to add a customizable RSS feed to your site

GuildPortal admin site link to original post

GuildPortal's RSS Feed content box won't work on some sites and sometimes gives an error. I found a nice script that google provides. I'm still exploring and learning, but similar scripts can be used to display a search box, a calendar, a map or even images. Check out the site here.

I copied their Feed API and modified it slightly to work with Guild Portal. It should work with all standard format RSS feeds.

It will display the Feed Title and the news items (with links), when you hover over the news item a tooltip will pop up and show the date & time of the post along with a description. If you want to put multiple boxes on the same page, you'll have to change the ID of the div box in the script (in blue).

Content Box

<style type="text/css">
.feedTitle { color: #ffffff; }
.feedDate { color: #aaaaaa; }
.feedDesc { color: #00c000; padding: 5px; }
.feedDesc img { max-width: 550px; }

#feedText1 a:link { color: #ffcc00; text-decoration: none; }
#feedText1 a:visited { color: #ffcc00; text-decoration: none; }
#feedText1 a:hover { color: #ffffff; text-decoration: none; }
#feedText1 a:active { color: #cccc00; text-decoration: none; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
var myfeeds = new Array();

var tooltipWidth = 560;

myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",5]);
myfeeds.push (["WoW Blues Comments","http://www.wowblues.com/feed.xml",6]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",7]);
myfeeds.push (["Warhammer Current News","http://feeds.warhammeronline.com/warherald/RSSFeed.war?type=current",10]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
  feedResult(myfeeds[k]);
 }
function feedResult(currentFeed) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == "") ? (result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = "<div class='feedTitle'>" + ftitle + "</div>";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j < items.length; j++) {
    var titleElement = items[j].getElementsByTagName("title")[0];
    var xtitle = titleElement.firstChild.nodeValue;

    var titleElement = items[j].getElementsByTagName("link")[0];
    try {var xlink = titleElement.firstChild.nodeValue;} catch(e) {xlink = "";}

    var titleElement = items[j].getElementsByTagName("pubDate")[0];
    try {var pubDate = titleElement.firstChild.nodeValue;} catch(e) {pubDate = "";}

    var titleElement = items[j].getElementsByTagName("description")[0];
    try {var descript = titleElement.firstChild.nodeValue;} catch(e) {descript = "";}

    pubDate = pubDate.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");
    descript = descript.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");

    var feedPopup = '<div class=feedDate>' + pubDate + '</div><div class=feedDesc>' + descript + '</div>';

    feedText += (j % 2 == 0) ? '<div class="NormGridRow">' : '<div class="AltGridRow">';
    feedText += '<a =\"ddrivetip(\'' + feedPopup + '\', ';
    feedText += '\'\', \'' + tooltipWidth + '\');\" ="hideddrivetip();" href="' + xlink + '">' + xtitle + '</a></div>';
   }
   feedText += '<br>';
   document.getElementById("feedText1").innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
</script>
<div id="feedText1"></div>

Customizing the Code

  • Change the CSS styles in purple to match your site.

  • "feedText1" (in blue) should be changed if you use this code more than once on a page.

  • Adjust the "tooltipWidth" value (in red) to your desired tooltip width. Note the ".feedDesc img" class a "max-width" to limit the size of any images that may be included in the feed - make this slightly smaller than your tooltipwidth value.

  • Add your feed RSS links as follows:

    feeds.push (["Feed Title","Feed URL",#]);

    • To add more feeds, add a block that looks like the above example
    • Replace the text in (orange) with your feed RSS URL.
    • Replace the number (in red) with the number of lines from each feed you want to display.
Edit (9/7/08): Changed all the [ i ] into [j], since it wasn't showing up in the code.
Edit (10/10/08): Updated the code: Combined the CSS with the script, corrected some CSS classes and a few minor code changes.
Edit (10/10/08): Updated the code to allow you to name each feed.
Edit (10/11/08): Opps, fixed the code since somehow I posted an older one.
Edit (10/14/08): Added "NormGridRow" and "AltGridRow" classes to the feed lines to help style them for your site.
Edit (10/23/08): Rewrote the script to fix a problem with headers not matching the feeds (only in IE).
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 10/26/2008 6:52 PM EST : RE: Custom RSS Feed
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

RSS Feed Box v1.2

This version is updated because some RSS Feeds are extremely long (*cough* WarHerald *cough*) and the preview tooltip ends up going off the screen. This only has minor changes from the original version, but I named it version 1.2 ummm because like OMG it's like way different from the very first version o.O

The Code

<div id="feedText1"></div>
<style type=text/css>
.feedTitle { color: #999999; }
.feedDate { color: #3A5894; text-size: 12pt; }
.feedDesc { color: #999999; text-size: 8pt; padding: 5px; }
.feedDesc img { max-width: 550px; }

#feedText1 {font-size:8pt;}
#feedText1 a:link { color: #3A5894; text-decoration: none; }
#feedText1 a:visited { color: #354973; text-decoration: none; }
#feedText1 a:hover { color: #354973; text-decoration: none; }
#feedText1 a:active { color: #3A5894; text-decoration: none; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
var myfeeds = new Array();

var feedBox = "feedText1";
var tooltipWidth = 560;

var previewMode = true;
var previewLength = 500;
var readMoreMessage = "...<br><br><div align=right>(click for more info)</div>";

myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",5]);
myfeeds.push (["WoW Blues Comments","http://www.wowblues.com/feed.xml",6]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",7]);
myfeeds.push (["Warhammer Current News","http://feeds.warhammeronline.com/warherald/RSSFeed.war?type=current",10]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
  feedResult(myfeeds[k]);
 }
function feedResult(currentFeed) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == "") ? (result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = "<div class='feedTitle'>" + ftitle + "</div>";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j < items.length; j++) {
    var titleElement = items[j].getElementsByTagName("title")[0];
    var xtitle = titleElement.firstChild.nodeValue;

    var titleElement = items[j].getElementsByTagName("link")[0];
    try {var xlink = titleElement.firstChild.nodeValue;} catch(e) {xlink = "";}

    var titleElement = items[j].getElementsByTagName("pubDate")[0];
    try {var pubDate = titleElement.firstChild.nodeValue;} catch(e) {pubDate = "";}

    var titleElement = items[j].getElementsByTagName("description")[0];
    try {var descript = titleElement.firstChild.nodeValue;} catch(e) {descript = "";}

    pubDate = pubDate.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");
    descript = descript.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");

    if (previewMode) {
     var dStart = descript.indexOf("<br>") + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }

    var feedPopup = '<div class=feedDate>' + pubDate + '</div><div class=feedDesc>' + descript + '</div>';

    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a href="' + xlink + '" =\"ddrivetip(\'' + feedPopup + '\', \'\', \'';
    feedText += tooltipWidth + '\');\" ="hideddrivetip();">' + xtitle + '</a></div>';
   }
   feedText += '<br>';
   document.getElementById(feedBox).innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
</script>

Customizing

  • "feedText1" (in blue) should be changed if you use this code more than once on a page (e.g. if you have a second RSS Feed box on a page, change this to "feedText2"). I moved the "<div>" to the top of the code, so it's all together.

  • Change the CSS styles in purple to match your site.

  • Adjust the "tooltipWidth" value (in red) to your desired tooltip width. Note the ".feedDesc img" class a "max-width" to limit the size of any images that may be included in the feed - make this slightly smaller than your tooltipwidth value (this only works with non-IE browsers).

  • Preview Mode:

    • Turn preview mode on and off by setting the "previewMode" to true or false respectively (in teal).

    • Adjust the length of the feed, "previewLength", shown in the tooltip to the number of characters to display (in red). Note: This number also includes any HTML code, such as <font> or <span>. So it may need to be adjusted to your liking.

    • Change the "readMoreMessage" to your liking. The default text will add the ellipses (three dots) followed by several returns and a right side aligned message to click the link for more info.

      "...<br><br><div align=right>(click for more info)</div>"

  • Add your feed RSS links as follows:

    feeds.push (["Feed Title","Feed URL",#]);

    • To add more feeds, add a block that looks like the above example

    • Replace the text in (orange) with your feed RSS URL.

    • Replace the number (in red) with the number of lines from each feed you want to display.

Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 11/8/2008 6:11 AM EST : RSS Feed Box v1.3
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

RSS Feed Box v1.3

This version of the RSS Feed Box adds a separate tooltip for the feeds. The new tooltip requires a single background image, see the details below.

The Code

<div id="feedText1"></div>
<style type="text/css">
.feedTitle { color: #999999; }
.feedDate { color: #3A5894; }
.feedDesc { color: #999999; padding: 5px; }
.feedDesc img { max-width: 550px; }

#feedText1 {font-size: 12pt;}
#feedText1 a:link { color: #3A5894; text-decoration: none; }
#feedText1 a:visited { color: #354973; text-decoration: none; }
#feedText1 a:hover { color: #354973; text-decoration: none; }
#feedText1 a:active { color: #3A5894; text-decoration: none; }

.tooltip td { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/tooltip.png);}

.tooltip {empty-cells: show; border-collapse:collapse; border-spacing:0;}
.tooltiplt {padding: 10px;}
.tooltiprt {background-position: right top !important;}
.tooltiplb {background-position: left bottom !important;}
.tooltiprb {background-position: right bottom !important;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
var myfeeds = new Array();

var feedBox = "feedText1";
var tooltipWidth = 560;

var previewMode = true;
var previewLength = 500;
var readMoreMessage = "...<br><br><img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>";

myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",5]);
myfeeds.push (["WoW Blues Comments","http://www.wowblues.com/feed.xml",6]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",7]);
myfeeds.push (["Warhammer Current News","http://feeds.warhammeronline.com/warherald/RSSFeed.war?type=current",10]);

// **************************************
// Do not change anything below this line
// **************************************
var ttcss = "#dhtmltooltip";
var ttBrdr = $(ttcss).css("border-width");
var ttBkgd = $(ttcss).css("background-color");
$("#"+feedBox)
 .mouseover(function(){$(ttcss).css("border-width","0").css("background-color","transparent")})
 .mouseout (function(){$(ttcss).css("border-width",ttBrdr).css("background-color",ttBkgd)});
 for (var k = 0; k < myfeeds.length; k++) {
  feedResult(myfeeds[k]);
 }
function feedResult(currentFeed) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
  var ftitle = (currentFeed[0] == "") ?(result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue): (currentFeed[0]);
   var feedText = "<div class='feedTitle'>" + ftitle + "</div>";
   var items = result.xmlDocument.getElementsByTagName("item");

   for (var j = 0; j < items.length; j++) {
    var titleElement = items[j].getElementsByTagName("title")[0];
    var xtitle = titleElement.firstChild.nodeValue;

    var titleElement = items[j].getElementsByTagName("link")[0];
    try {var xlink = titleElement.firstChild.nodeValue;} catch(e) {xlink = "";}

    var titleElement = items[j].getElementsByTagName("pubDate")[0];
    try {var pubDate = titleElement.firstChild.nodeValue;} catch(e) {pubDate = "";}

    var titleElement = items[j].getElementsByTagName("description")[0];
    try {var descript = titleElement.firstChild.nodeValue;} catch(e) {descript = "";}

    pubDate = pubDate.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");
    descript = descript.replace(/'/g,"&rsquo;").replace(/\"/g,"&quot;");

    if (previewMode) {
     var dStart = descript.indexOf("<br>") + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }

    var feedPopup = '<div><table class=tooltip><tbody><tr><td class=tooltiplt>';
    feedPopup += '<div class=feedDate>' + pubDate + '</div><div class=feedDesc>' + descript + '</div>';
    feedPopup += '</td><td class=tooltiprt>&nbsp;</td></tr><tr><td class=tooltiplb>&nbsp;</td>';
    feedPopup += '<td class=tooltiprb>&nbsp;</td></tr></tbody></table></div>';

    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a href="' + xlink + '" =\"ddrivetip(\'' + feedPopup + '\', \'\', \'';
    feedText += tooltipWidth + '\');\" ="hideddrivetip();">' + xtitle + '</a></div>';
   }
   feedText += '<br>';
   document.getElementById(feedBox).innerHTML += feedText;
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
</script>

Customizing

  • Please follow the instructions provided with RSS Feed Box v1.2 on how to customize this script. The notes below are on the updates.

  • I replaced the text in the "readMoreMessage" variable with an image... replace that URL in orange if you want to add your own (NOTE: do not add quotes around the URL).

  • To customize the new tooltip border/background:

    • The border image is a 700x700 pixel transparnet PNG file that I "borrowed" from wowhead.com. Here is a link to it if you want to download it to modify it in any way.

    • Look in the CSS code for ".tooltip td", and replace the image URL in orange with your image URL.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 4/3/2009 5:00 PM EST : RSS Feed Box v1.4 - two columns
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

RSS Feed Box v1.41 (Two Column)

I made a few slight changes from the previous version. But this version puts the very first feed into the right column (made for your own site news feed) and all remaining feeds go into the left column.

  • I made a table with the class "feedBox" that has two columns.
    • The very first feed is added to the Recent Post side of the table (right)
    • All additional feeds are placed in the RSS News Feed Column (left)
    • You can make separate divs or switch the classes in the table however you want. Just make sure the ID is unique (only one per page)
  • Made the tooltip border larger since I was seeing the background repeat on some posts
  • Added the author's name to the tooltip

The Code

<table width="100%" class="feedBox">
 <tr>
  <td id="feedText1" width="50%" valign="top"></td>
  <td id="recentPosts" valign="top"></td>
 </tr>
</table>

<style type="text/css">
.feedTitle { color: #ffffff; }
.feedDate { color: #ffcc00; }
.feedDesc { color: #ffffff; padding: 5px; }
.feedDesc img { max-width: 550px; width: auto !important; width: 550px; }

.feedBox { font-size:12pt; width:800px; }
.feedBox a:link { color: #ffcc00; text-decoration: none; }
.feedBox a:visited { color: #ffcc00; text-decoration: none; }
.feedBox a:hover { color: #ffffff; text-decoration: none; }
.feedBox a:active { color: #ffcc00; text-decoration: none; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function(){rssfeedbox()});
function rssfeedbox(){
 var myfeeds = new Array();

var feedTxt = "feedText1";
var tooltipWidth = 560;

var previewMode = false;
var previewLength = 800;
var readMoreMessage = "...<br><br><img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>";

var addAuthorInline = false;
var addDateInline = false;

// The first feed should be your "recent posts" RSS feed link
myfeeds.push (["Recent Posts","http://guildportal.com/RSS/Feed.aspx?Type=GuildForumsMR&ID=258012",10]);

// The remaining feeds will go into your news feed box
myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",4]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",5]);

// **************************************
// Do not change anything below this line
// **************************************
 for (var k = 0; k < myfeeds.length; k++) {
  var feedoutpt = (k==0) ? $('#recentPosts') : $('#'+feedTxt);
  feedResult(myfeeds[k],feedoutpt);
 }

function feedResult(currentFeed,feedoutpt) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == '') ? (result.xmlDocument.getElementsByTagName('title')[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = '<div class="feedTitle">' + ftitle + '</div>';
   var items = result.xmlDocument.getElementsByTagName('item');

   for (var j = 0; j < items.length; j++) {
    var xtitle = $(items[j]).find('title').text();
    var xlink = $(items[j]).find('link').text();
    var pubDate = $(items[j]).find('pubDate').text();
    var author = $(items[j]).find('author').text();
    var descript = $(items[j]).find('description').text();

    pubDate = pubDate.replace(/\"/g,"\'");
    descript = descript.replace(/\"/g,"\'");

    if (previewMode) {
     var dStart = descript.indexOf('<br>') + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }

    var feedPopup = '<span class=feedDate>' + pubDate + '</span>';
    feedPopup += (author=='') ? '' : ' by ' + author;
    feedPopup += '<div class=feedDesc>' + descript + '</div>';

    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a class="tooltip" href="' + xlink + '" title="' + feedPopup + '" rel="' + tooltipWidth + '">' + xtitle + '</a>';
    feedText += (addAuthorInline) ? ' by ' + author : '';
    feedText += (addDateInline) ? ' on ' + pubDate : '';
    feedText += '</div>';
   }
   feedText += '<br>';
   $(feedoutpt).append(feedText);
  } else { alert ('feed error from ' + currentFeed[0]); }
 });
 }
}
</script>
Customizing
  • This update of (v1.41) replaces the tooltips with the newer script ( you probably won't notice a difference)
  • I also added two variables: addDateInline & addAuthorInline

    var addAuthorInline = false;
    var addDateInline = false;

    setting either of these to true will add the author or the date of the post to the feed box (visible without hovering over the title).
  • The rest of the instructions for this is basically the same as the other feed posts with minor changes in the CSS. 
Edit (11/17/2009): Added and updated this code with two new variables.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%