Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

[SCRIPT] Add ajax RSS pausing scroller to your forum

Mick in Tutorials
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

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.

Website: https://www.idesignsmf.com/

    


20 Comments

Brack1
Mar 25, 2010
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

Mick
Mar 25, 2010
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

Brack1
Mar 25, 2010
Tried the above.

Changed the forum theme width.

Its the scroller width which needs to be changed.

3

Mick
Mar 25, 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

Brack1
Mar 28, 2010
Sorted the problem I had.

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

Mick
Mar 28, 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

robbie93
May 21, 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

7

Mick
May 21, 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

Dismal Shadow
Jun 16, 2010
I add more RSS feed url it mess up the labels as well as ordering using:

socialfeed.entries_per_page(5)
10

Mick
Jun 16, 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

Dismal Shadow
Jun 16, 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

Mick
Jun 16, 2010
How many are you trying to add?
13

Mick
Jun 16, 2010
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



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


Advertisement  




 Tutorials
In this section you will find in-depth how-to's involving common SMF development and design techniques.



go up