Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Add ajax RSS pausing scroller to your forum

Mick in Tutorials on Mar 22, 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

Tagged with: ajax rss scroller script 


Mick

Mick G

idesignsmf.com

    

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 and has a weakness for Tacos and Pizza.


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

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

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

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


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

socialfeed.entries_per_page(5)
10

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

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




Latest Discussions

Join the conversation

Our Most Popular Features