In the first part of this tutorial, detailed information was provided on utilizing RSS (Really Simple Syndication) coding to incorporate free news content and links into any web page.
It is recommended that you review Pt. 1, because it explains more about RSS and reveals how to integrate a basic newsfeed module using Google Feed API.
The goal of this tutorial is to furnish instructions on adding a larger news content module, a horizontal newsfeed, and a list-format style feed.
Let’s get started. The idea of incorporating free news content links into your website, blog, or online newsletter may sound intriguing, but you might want it to occupy a larger designated area than required for a small, four-link module. Also, rather than manually changing the RSS coding to accommodate different news sources, you’d prefer to list a number of them all at once. The perfect solution is a multiple-source newsfeed.
Vertical Newsfeed Module
To set the feed up, copy the coding below into the Head section of any web page. The entire set of lines should be slotted beneath the Title and Meta Tag areas, and just in front of the closing Head tag:
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
#feedControl {
margin-top : 20px;
margin-left: auto;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}
</style>
<script src="https://www.google.com/jsapi/" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<script type="text/javascript">
function showControl() {
var feeds = [
{title:'CNN',
url:'http://rss.cnn.com/rss/edition_world.rss'},
{title:'NY Times',
url:'http://feeds.nytimes.com/nyt/rss/World'},
{title:'Reuters',
url:'http://feeds.reuters.com/Reuters/worldNews'}];
new GFdynamicFeedControl(feeds, 'feedControl',
{numResults : 6, stacked : true,
title: "World News"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showControl);
</script>At the position in the Body section of the web page where the newsfeed module is supposed to appear, place the following code line:
<div id="feedControl">Loading...</div>As in the case of the smaller newsfeed in the previous tutorial, options exist for some customization. For example, the ‘margin-left’ expression in the ‘feedControl’ section is set to ‘auto’, which centers the entire module within a designated area.
If one wanted to move it all the way to the left, all that is required is to change the noted parameter to ‘0px’.
#feedControl {
margin-top : 20px;
margin-left: 0px;
margin-right: auto;
width : 440px;
font-size: 16px;
color: #9CADD0;
}The three listed sources for world news are CNN, The New York Times, and Reuters. Should you desire to change any of them, or utilize the Feed API coding to put in newsfeeds covering an entirely different subject matter, just replace the current URLs with the desired ones.
To amend The Times world newsfeed to one focused on the New York Region only, substitute the current URL:
http://feeds.nytimes.com/nyt/rss/World
with:
http://feeds.nytimes.com/nyt/rss/NYRegion
The number of displayed links can also be adjusted. To change the quantity per news source from the default ‘6’ to ‘4’, the following line would need to be amended:
{numResults : 4, stacked : true,When the web page is uploaded, the module should look similar to this:
Horizontal Newsfeed Module
If available room is at a premium in the Body section of a given web page, you might opt for the space-saving horizontal newsfeed. This style of feed can currently be seen on a number of major news websites, including BBC.co.uk.
The following elements need to be altered from within the above coding lines in the Head section:
width : 650px;
{title:'', (remove the news source name from each of the designated areas)
new GFdynamicFeedControl(feeds, 'feedControl',
{horizontal : true,When the web page is uploaded after the noted changes have been made, you should see a horizontal module that looks like:
List-Format Newsfeed
For more of a free-flowing display style, let’s take a look at the list format. It is not encapsulated by any borders, and the text content adapts to a web page’s pre-existing font type.
To get started, place the following code lines into the Head section, below the Title and Meta Tag areas and just in front of the closing Head tag:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1")</script>Then, in the section of the web page where you wish the feed to appear, add:
<div id="feeddiv"></div>
<script type="text/javascript">
var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://feeds.nytimes.com/nyt/rss/NYRegion"
var feedlimit=10
var rssoutput="<b>Latest New York Regional News:</b><br /><ul>"
function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl)
feedpointer.setNumEntries(feedlimit)
feedpointer.load(displayfeed)
}
function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}
window.onload=function(){
rssfeedsetup()
}
</script>The resulting newsfeed, once the page is uploaded, should look like this:
You can customize the feed by adjusting the bolded elements in the following three lines:
var feedurl="http://feeds.nytimes.com/nyt/rss/NYRegion"
var feedlimit=10
var rssoutput="Latest New York Regional News:
"Conclusion
Each of the three newsfeed types discussed in this tutorial will provide fresh, eye-catching content for visitors to your website. Utilizing the above techniques, feeds on a wide variety of topics can be placed on any page throughout your site.
