Webfeeds

What are webfeeds

Our webfeeds enable you to embed the latest SciDev.Net stories into your website. Simply insert some code (described below) into your web template to activate our latest news and analysis into your site. Read about other ways to follow us here.

How to get the embed code

webfeeds_icon

Web feed icon.

Look for the webfeeds icon across our site. You'll find it at the very top of each edition and additionally in our "theme" pages that allow you to drill down through our content.

The edition-wide feed will provide you with the latest articles across all topics and for all article types. Theme page webfeeds will allow you to select the filters using the "facet" toolbar before building your webfeed embed code, giving you greater control over the content that appears in the feed.

webfeeds_articles_about_agriculture_fileminimizer_

Theme page webfeeds will allow you to select the filters using the "facet" toolbar (picture above) before building your webfeed embed code.

Embedding the code in your website

webfeed_screenshot

Our webfeed

Once you have generated the embed code as per the instructions above, embedding the code in your website is as simple as copying and pasting into your web template(s). For example:

<html>
<head>
<title>Your webpage</title>
</head>
<body>
<div class="area-for-scidev-webfeed">
<!-- BEGIN EMBED CODE -->
<script src="https://www.scidev.net/global_webfeed.js"></script> 
<!-- END EMBED CODE --> 
</div> 
</body> 
</html>

The webfeed HTML will then be generated within the <div class="area-for-scidev-webfeed">...</div> tag (you can use whatever you like here, this classname is for illustrative purposes only).

Customising the appearance of the feed

The webfeed uses simple markup with scidev specific class-names to allow you to customize the look and feel of the feed. Below is the HTML structure of the feed along with the default style definitions:

<div class="scidev-webfeed">
<p class="scidev-webfeed-title">Latest News</p>
<p class="scidev-webfeed-description">
on science, technology &amp; the developing world.
</p>
<ul class="scidev-articles">
<li class="scidev-article">
<a class="scidev-article-title" href="#">Title that links to the article</a>
<p class="scidev-article-blurb">Short description of the article</p>
<p class="scidev-article-date">dd/mm/yy</p>
</li>
<!-- ... etc., repeated li for each article -->
</ul>
<a class="scidev-webfeed-supplied-by" href="#">
<img valign="bottom" src="scidev-webfeed.png"> Supplied by scidev.net
</a>
</div>
<style type="text/css">
.scidev-webfeed {
width
: 220px;
color
: #4d4d4d;
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size
: 11px;
line-height :
16px;
padding
: 0 5px;
}
.scidev-webfeed-title {
font-weight
: 700;
font-size
: 25px;
text-transform : uppercase;
color
: #e10000;
letter-spacing : -1px;
line-height
: 20px;
}
.scidev-webfeed-description {
font-size
: 11px;
font-weight : 700;
margin
: 10px 0;
}
.scidev-articles {
list-style
: none;
margin
: 0;
padding
: 10px 0;
border
: solid #cecece;
border-width : 1px 0;
}
.scidev-articles a{
color : #1e648c;
}
.scidev-article-title,.scidev-article-date,.scidev-article-blurb,.scidev-webfeed-title{
margin : 5px 0 0 0;
}
.scidev-webfeed a,.scidev-webfeed a:visited {
font-weight
: 700;
font-size
: 12px;
text-decoration : none;
line-height
: 17px;
}
.scidev-webfeed a:hover {
color : #114B6D;
}
.scidev-article-date {
color
: #999;
margin : 5px 0 10px;
}
.scidev-article,.scidev-webfeed-supplied-by {
margin-top : 5px;
}
.scidev-webfeed-supplied-by{
color
: #e10000;
margin-top : 10px;
display
: inline-block;
}
.scidev-webfeed-supplied-by img{
margin-right : 5px;
}
</style>

We have designed the stylesheet and markup so that it is easy to override using simple CSS. For example, to change the default font colour to blue, you would change your embed code to look something like this:

<html>
<head>
<title>Your webpage</title>
</head>
<body>
<div class="area-for-scidev-webfeed">
<!-- BEGIN EMBED CODE -->
<script src="https://www.scidev.net/global_webfeed.js"></script>
<style type="text/css">
.scidev-webfeed {
color : blue;
}
</style>
<!-- END EMBED CODE -->
</div>
</body>
</html>

That's it!