Add ajax RSS pausing scroller to your forum

by Mick in Tutorials on 22 Mar 2010



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:
<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:
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:
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];


Add before:
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:

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



Add before:

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
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
20 Comments
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.
#1
Find this in your code.... change accordingly.

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

Changed the forum theme width.

Its the scroller width which needs to be changed.

#3
Quote from: Brack1 on 25 Mar 2010
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.
#4
Sorted the problem I had.

Just can't have the shoutbox on the page the scroller is on.
#5
Quote from: Brack1 on 28 Mar 2010
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. ;)
#6
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

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

#7
Quote from: robbie93 on 21 May 2010
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

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

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

#8
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
#9
I add more RSS feed url it mess up the labels as well as ordering using:
socialfeed.entries_per_page(5)
#10
Quote from: Dismal Shadow on 16 Jun 2010
I add more RSS feed url it mess up the labels as well as ordering using:
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 ;)
#11
Quote from: bluedevil on 16 Jun 2010
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.
#12
How many are you trying to add?
#13
I only use 5 feeds off 4 providers.

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

#14

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.