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