A challenge that many website owners
face is how
to supply continuously fresh content for new and repeat visitors to peruse.
face is how
to supply continuously fresh content for new and repeat visitors to peruse.
It can be a
very time-consuming task to manually upload regular updates. Fortunately, there is an easy way to showcase free,
readily
available news content on
a wide variety of topics.
very time-consuming task to manually upload regular updates. Fortunately, there is an easy way to showcase free,
readily
available news content on
a wide variety of topics.
We will examine a quick and effective
method of incorporating RSS
(Really Simple Syndication) coding in
order
to add news content
to an site. First,
let’s look at what RSS is, and how it works.
method of incorporating RSS
(Really Simple Syndication) coding in
order
to add news content
to an site. First,
let’s look at what RSS is, and how it works.
RSS is an online coding
solution that delivers
automatic updates for W content. Say, for instance, you add an
RSS code for international new your website from a
popular source, such as CNN, Reuters, or the BB Visitors would be able to access new content links as often as the sou updated their news feed. In
other
words, you get the benefit of presenting the very latest desired information online, with no effort o
your part.
solution that delivers
automatic updates for W content. Say, for instance, you add an
RSS code for international new your website from a
popular source, such as CNN, Reuters, or the BB Visitors would be able to access new content links as often as the sou updated their news feed. In
other
words, you get the benefit of presenting the very latest desired information online, with no effort o
your part.
Due perhaps to a misguided perception that it is difficult
to add the necessary coding to make RSS work within
a website’s framework, it
remains an extremely underutilized resource.
to add the necessary coding to make RSS work within
a website’s framework, it
remains an extremely underutilized resource.
A typical RSS newsfeed (this one from the BBC) looks like:
http://feeds.bbci.co.uk/news/world/rss.xml
When the XML document is updated by the BBC, the new
information
is automatically displayed
on any website that has
incorporated the above URL to obtain World News.
information
is automatically displayed
on any website that has
incorporated the above URL to obtain World News.
You can find RSS feeds all over the Web; just look for the small orange
icon with a dot
and two waves above it. The very latest data is available
on diverse subjects ranging
from international news, to financial
updates, to reports on innovations in
the
food and drink industry, to the latest updates on
plants and gardening.
icon with a dot
and two waves above it. The very latest data is available
on diverse subjects ranging
from international news, to financial
updates, to reports on innovations in
the
food and drink industry, to the latest updates on
plants and gardening.
So, now that we have a
better understanding about RSS and what it can do, let’s move on to finding out how to incorporate the correct
coding into a website in order to gain the noted benefits.
better understanding about RSS and what it can do, let’s move on to finding out how to incorporate the correct
coding into a website in order to gain the noted benefits.
Google Feed API
Google has developed an exceedingly convenient method to display RSS feed data, via their Feed API feature. Using this technique, you can showcase any newsfeed by incorporating some simple Javascript lines into a web page.
To begin utilizing the Feed API, insert the following
script into the Head section of your web page, beneath
the meta tag area and just
in front of the closing
Head tag:
script into the Head section of your web page, beneath
the meta tag area and just
in front of the closing
Head tag:
<script type=“text/javascript” src=“https://www.google.com/jsapi“></script
<script src=“http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcon type=“text/javascript“></script>
<style type=“text/css”>
@import url(“http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcon
#feedControl
{ margin-top : 10px; margin-left: auto; margin-right: auto; width : 440px;
{ margin-top : 10px; margin-left: auto; margin-right: auto; width : 440px;
font-size: 12px;
color: #9CADD0;
}
</style>
<script type=“text/javascript“>
function load() {
var
feed =“http://feeds.bbci.co.uk/news/world/rss.xml“;
new GFdynamicFeedControl(feed, “feedControl”);
}
google.load(“feeds”, “1”);
google.setOnLoadCallback(load);
</script>
Then, insert the following
code into the desired area of the web page:
code into the desired area of the web page:
<div id=“body”>
<div id=“feedControl”>Loading…</div>
</div>
After uploading the web page to the Internet, you should see the following addition:
The width of
the
four-stack vertical dynamic
newsfeed is set at 440px by default, but it can
be adjusted based on
the
size constraints of the given area within the page, or the HTML table, in
which it is placed.
the
four-stack vertical dynamic
newsfeed is set at 440px by default, but it can
be adjusted based on
the
size constraints of the given area within the page, or the HTML table, in
which it is placed.
The newsfeed pointer
rotates continuously between
the news items, displaying a
link and short summary for each.
rotates continuously between
the news items, displaying a
link and short summary for each.
Feed Customization
You can manually change the coding variables in the following expression:
#feedControl
{
margin-top : 10px; margin-left: auto; margin-right: auto; width : 440px;
{
margin-top : 10px; margin-left: auto; margin-right: auto; width : 440px;
As noted, you can raise or lower the set width of the display.
The margins can also be adjusted. If, for example, you want to create more
space
at the top of the new feed box, the ‘margin-top’ expression can
be upped to 20px, or higher.
The margins can also be adjusted. If, for example, you want to create more
space
at the top of the new feed box, the ‘margin-top’ expression can
be upped to 20px, or higher.
Changing
News Sources
News Sources
The newsfeed can also be updated
to accommodate a
new source very easily.
to accommodate a
new source very easily.
Say that you got tired of the BBC feeds, and instead
wanted to incorporate news from CNN. The required adjustment would
be made to the following line:
wanted to incorporate news from CNN. The required adjustment would
be made to the following line:
var feed =”http://feeds.bbci.co.uk/news/world/rss.xml”;
The CNN RSS code would be substituted so that the line looked like:
var feed =”http://rss.cnn.com/rss/edition_world.rss”;
A similar adjustment to display
an international newsfeed from Reuters would entail the following change:
an international newsfeed from Reuters would entail the following change:
var feed =”http://feeds.reuters.com/Reuters/worldNews “;
Conclusion
As this brief tutorial demonstrates, it is both quick and easy to incorporate a
newsfeed into your site.
The above coding
can be inserted into the home page,
or any interior page.
newsfeed into your site.
The above coding
can be inserted into the home page,
or any interior page.
Once you get the hang of integrating the FeedAPI coding into your site, I think you can integrate any API Feed into
your site.
