Here's a summary of the features of this script:

    * Uses the gAjax RSS Displayer engine and Google Ajax Feed API to host/cache the desired RSS feeds, so you don't have to install or host anything on your own server.
    * Specify multiple RSS feeds to display, with the results intermixed.
    * Sort the results either by "date", "title", or a custom "label" assigned to each feed (ie: "SimpleMachines.org" then "SimpleDesk.net").

Demo: Look at the forum footer

Download the files and images attached here and upload them to the root where SMF is installed.
#  gfeedfetcher.js 
# gajaxscroller.js

FIRST!
You need a Google API key...... Sign Up for the Google Maps API - Google Maps API — Google Developers

To use in a portal "Bottom HTML" block:

Code Select Expand

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR GOOGLE API KEY GOES HERE"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit [url=http://www.dynamicdrive.com/]Dynamic Drive DHTML(dynamic html) & JavaScript code library[/url] for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #242424;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}



code{ /*CSS for insructions*/
color: red;
}

</style>

<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "[url=http://www.simplemachines.org/community/index.php?type=rss;action=.xml"]Simple Machines Community Forum[/url]) //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>

Replace:

Code Select Expand

YOUR GOOGLE API KEY GOES HERE
with your own Google API key


In the codes, you can set width, height, RSS URL's.




For those not using portals and RC3 Only....

Open your /Themes/default/index.template.php

Find:

Code Select Expand

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

Add before:

Code Select Expand

echo'
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR GOOGLE API KEY GOES HERE"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit [url=http://www.dynamicdrive.com/]Dynamic Drive DHTML(dynamic html) & JavaScript code library[/url] for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #ffffff;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}



code{ /*CSS for insructions*/
color: red;
}

</style>';


Open: Themes/default/BoardIndex.template.php

Find at the end:

Code Select Expand

echo '
</div>
</div></div>
<span class="lowerframe"><span></span></span>';


Add before:

Code Select Expand

echo'
<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "[url=http://www.simplemachines.org/community/index.php?type=rss;action=.xml"]Simple Machines Community Forum[/url]) //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>';


Credits: Dynamic Drive

Am in the middle of this now.

Which part of the google API key is used?

All I have to do now is get the width corrected and give the scroller a heading.

Find this in your code.... change accordingly.

Code Select Expand

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #242424;
}

Tried the above.

Changed the forum theme width.

Its the scroller width which needs to be changed.

Tried the above.

Changed the forum theme width.

Its the scroller width which needs to be changed.

Right.   The code above wasnt intended for the forum.

The code above is found in the rss code posted in reply #1.

Sorted the problem I had.

Just can't have the shoutbox on the page the scroller is on.

Sorted the problem I had.

Just can't have the shoutbox on the page the scroller is on.

No kidding.

We just learned something new. ;)

This is a cool scroller, thank you for sharing  ;D I have one problem though

The script causes an error on the sites validation http://validator.w3.org/check?uri=http%3A%2F%2Frobbie93andhotchildxox.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.767

Code Select Expand

<style type="text/css"> do you know of a fix for this? thanks again for sharing ;D  http://robbie93andhotchildxox.net

This is a cool scroller, thank you for sharing  ;D I have one problem though

The script causes an error on the sites validation http://validator.w3.org/check?uri=http%3A%2F%2Frobbie93andhotchildxox.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.767

Code Select Expand

<style type="text/css"> do you know of a fix for this? thanks again for sharing ;D  http://robbie93andhotchildxox.net

Since the script has a css of its own in a block, i would think thats the error.

You could try adding:

<html><head> and <body> tags see if corrects it.

Code Select Expand


<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR GOOGLE API KEY GOES HERE"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example2{ /*Demo 2 main container*/
width: 925px;
height: 110px;
border: 1px dashed black;
padding: 4px;
background-color: #242424;
}

#example2 div ul{ /*Demo 2 UL container*/
margin: 0;
padding-left: 18px;
}

#example2 div ul li{ /*Demo 2 LI that surrounds each entry*/
margin-bottom: 4px;
}



code{ /*CSS for insructions*/
color: red;
}

</style>
</head>
<body>

<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "http://www.simplemachines.org/community/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>
</body>
</html>

Nope this gives even more errors http://validator.w3.org/check?uri=http%3A%2F%2Frobbie93andhotchildxox.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.767

I add more RSS feed url it mess up the labels as well as ordering using:

Code Select Expand

socialfeed.entries_per_page(5)

I add more RSS feed url it mess up the labels as well as ordering using:

Code Select Expand

socialfeed.entries_per_page(5)

If you're adding say 10, then you need to change the height of the box. The more links, the more height the box needs ;)

If you're adding say 10, then you need to change the height of the box. The more links, the more height the box needs ;)

Yes that's what I did but like I say...it mess up the labels, wrong label , wrong link.

How many are you trying to add?

I only use 5 feeds off 4 providers.

Code Select Expand

<script type="text/javascript">

var socialfeed=new gfeedpausescroller("example2", "example2class", 4000, "")
socialfeed.addFeed("SimpleMachines.org", "http://www.simplemachines.org/community/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimpleDesk.net", "http://www.simpledesk.net/community/.xml/type,rss/") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("TinyPortal.net", "http://www.tinyportal.net/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.addFeed("SimplePortal.net", "http://simpleportal.net/index.php?type=rss;action=.xml") //Specify "label" plus URL to RSS feed
socialfeed.displayoptions("label datetime") //show the specified additional fields
socialfeed.setentrycontainer("li") //Display each entry as a DIV
socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label
socialfeed.entries_per_page(5)
socialfeed.init() //Always call this last

</script>