Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > RSS Feeds
Mottie (MVP) 7/22/2009 9:15 PM EST : RE: RSS Feed Box v1.3
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Haruosan!

Actually this RSS Feed only works on Feeds that are formatted a certain way... sadly you can't get it to work properly on non-standard type feeds like server status XML.

But the good news is that the City of Heroes server status is a type of content box (instead of a free form text/HTML type content box). Make sure you have your guild game set to City of Heroes first.
TopBottom

haruosan (New Admin) 7/23/2009 5:32 AM EST : RE: RSS Feed Box v1.3

haruosan
Posts: 5
Getting Started!

Yay. That was simple. Thanks for helping me out.
TopBottom

Mottie (MVP) 11/17/2009 5:04 PM EST : RSS Feed Box v1.4
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

RSS Feed Box v1.1 | RSS Feed Box v1.2 | RSS Feed Box v1.3 | RSS Feed Box v1.4

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.
TopBottom

Valdaglerion (Guild Admin) 11/18/2009 8:15 PM EST : RE: RSS Feed Box v1.4
Valdaglerion
Posts: 2473
Zomgawsh Poster

1.1, 1.2 and 1.3 all work fine.  Tried 1.41 several times, both with my own feeds and the ones in the code (just copied and pasted the whole thing) and nothing appears.  The box is there but no feeds at all.
TopBottom

Mottie (MVP) 11/18/2009 9:20 PM EST : RE: RSS Feed Box v1.4
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Oops, try it now
TopBottom

Rabbyt (New Admin) 11/19/2009 11:40 AM EST : RE: RSS Feed Box v1.4
Rabbyt
Posts: 53
Posts With Wolves

I noticed that the preview boxes are showing a bunch of coding in with the description.  Is this normal with the inclusion of the date/time & author next to the item in the feed?
TopBottom

Mottie (MVP) 11/19/2009 11:55 AM EST : RE: RSS Feed Box v1.4
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Rabbyt!

The preview boxes get the content from whatever feed you added, so I'm not sure what you mean.... are you taking about setting the "previewMode" variable to true? That feature doesn't work well if you have a lot of HTML because it counts characters and doesn't look for breaks in the coding.

I included the date, time and author inside the preview, but I can remove it from there if you want.

If I'm totally off on your question, could you show me a screenshot or share a link to your site please.
TopBottom

Rabbyt (New Admin) 11/19/2009 12:25 PM EST : RE: RSS Feed Box v1.4
Rabbyt
Posts: 53
Posts With Wolves

Hey Mottie!

I think you're on the right track.  I'll message you a link to my guildsite and you can check it out for yourself.  I'd put the link in this post, but its my test site, and I'm a little self-conscious of my work before its completion =)

Thanks in advance, man.
TopBottom

Mottie (MVP) 11/19/2009 1:18 PM EST : RE: RSS Feed Box v1.4
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Rabbyt!

It looks like all you're missing is this tooltip version... this new tooltip version works because it looks for tooltips that are added after the page load (the feeds are added afterwards). Here is the code, I matched the background color with your site.
<style type="text/css">
.tooltip, .preview, .screenshot { cursor:pointer; }
#tooltip, #tooltip2 { width: 250px; }
#tooltip, #tooltip2, #preview {
 color: #dddddd;
 background: #E6E4A8;
 border: 1px solid #333333;
 padding: 5px;
 display: none;
 opacity: 0.9;
 filter: alpha(opacity=90);
 text-align: left;
}
</style>
<script src="http://www.axiomfiles.com/Files/258012/tooltip.js" type="text/javascript"></script>
TopBottom

Rabbyt (New Admin) 11/19/2009 6:51 PM EST : RE: RSS Feed Box v1.4
Rabbyt
Posts: 53
Posts With Wolves

Works like a gem!  Thanks Mottie!  You, sir, rock =)
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%