A Simple Way to Add Free News Content to Your Website Part 2

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.

Author: David Elliot
David is a long-time journalist and editor who also has over 10 years experience as a freelance Web developer, specializing in online newspaper design and maintenance.
  • http://www.logocontestreviews.com/99designs-scam-facts/ 99designs is a Scam

    I think is a great idea! actually my site based on Forex news, and this news update plugin suit on my site. i will surely try this news update on my site! Thanks u .

    • Dave

      You’re more than welcome. I hope that integrating one, or more, of the newsfeeds into your site goes smoothly.

  • querier

    Thank you for the helpful script. Would you please advise, how to change font size and font color for the first vertical RSS module script? It appears to allow customization, but nothing I do will change the default font size (very small!) and light grey font color. I need larger and darker readable font for an older targeted audience. Thank you in advance.

  • http://www.concise-courses.com/ Henry Dalziel

    Thanks for this – I was looking around for an RSS Widget but its amazing how your code just works immediately – no issues. Thanks

  • bob robins

    excellent. how would I have 2 or 3 Horizontal Newsfeed Modules in different parts of the page fron different sources

  • Michael

    Dark Matter in regions of outer space reveal detailed coded information about shadows, and their use of light.