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