How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout

24 July 2009
Tutorials, Web Design
This post was written exclusively for PV.M Garage by Piervincenzo Madeo
Comments (325)»

This tutorial was checked by Ryan Parman, Simple Pie Team.

The perfect reader seeks for great and unique contents but the research often is difficult.
There are some browser applications that simplify the readers work like the News Aggregators. They daily collect (and categorize) in one-page the most original resources of the web, certainly a useful service for “news consumer”.

I find the aggregators quite serviceable (here you can find some samples) because they select only the best posts for each category of interest.

In this post I want to explain how to create a single page news aggregator using an RSS stream through the php class Simple Pie.

Our Goal Is…

The main aim is to realize a nice web page where to show the best tech news of the day. We can make it using the RSS stream of significant websites like technewsworld.com or goodtutorials.com and Social Bookmarking like Delicious.
We’ll create a simple layout with an adaptive width for the single post container and then we’ll implement the “RSS Reader” for our news.

Live Demo and Source Files

To evaluate the final result click below on preview button. You can also download the source files to try on your local server the aggregator.

Sketch and Structure

Below you can see a simple layout scheme. We want to realize an adaptive layout with side margin of 100 px.

Step 0 – Wireframe

The following image introduce the specific layout features.
News Aggregator

Simple Header For Our Layout

In previous posts like Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop or How to Create a Large Header with a Simple Western Scene we have learn some web graphic tricks to design a nice web elements.
Now we need a simple header background and a logo.

Step 1 – Header Design In Photoshop

Open a new document (width 1200 px, height 200 px). Draw a rectangle and apply the following style to the layer: Drop Shadow (Multiply, Opacity 20%, Angle 90°, Distance 5px, Size 5px); Gradient Overlay (from #ffffff to #3f4247 with of this color opacity 0%, Linear, General Opacity 10%, Angle 90°); Pattern Overlay (use a carbon pattern and set a right opacity); Stroke (Size 1px, Opacity 100%, Color #e4e4e4).
News Aggregator

Using Gradient Tool you can also add a soft light.
News Aggregator

Add a text using Verdana (color #ffffff) and set the layer style. Apply Drop Shadow (Multiply, Opacity 100%, Distance 1px, Size 5px); Bevel and Emboss (Depth 83%, Size 1px, Soften 0%, Angle 90°/30°), Gradient Overlay (black-white-black with an opacity of 42%).
Add also a slogan text using Verdana with color #8c8a8a as shown.
News Aggregator

From PSD to XHTML/CSS Layout

Now is time of coding. We want to relize a “fluid” layout that is adaptive when the user resize the browser window.

Step 2 – Files, Folders and Images

In your local server (I use WampServer) create a new folder “newsaggregator” where to generate “index.php”, “style.css” and “images” folder.
From photoshop document save the following graphics to build the header: a repeatable image for background, the logo (png holding transparency), light for background (png holding transparency). If you have doubts on this step read DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial or WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial to learn more about psd-to-html conversion.

Below you can see the graphics from psd document we use to complete the layout.
News Aggregator

Step 3 – Basic Structure and Header

First of all we prepare correctly the document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tech News | A free Aggregator Template | made in PV.M Garage</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<!--here header content-->
</div>

<div id="down_head">
<!--here down-header content-->
</div>

<div id="news_container">
<!--here single post container-->
</div>

<div id="footer">
<!--here footer content-->
</div>

</body>
</html>

Add the header content.

<div id="header">
  <h1><a href="#">TechNews</a></h1>
  <div class="menu"> <!--nav-menu-->
  <ul>
    <li><a href="#">about</a></li>
    <li><a href="#">submit feed</a></li>
    <li><a href="#">help us</a></li>
    <li><a href="#">contact</a></li>
  </ul>
  <span class="adv"><a href="#">Advertise here, check our prices!</a></span> <!--adv box without img-->
</div>
</div>

Now open the “style.css” in your text editor and write the css rules.

/*Yahoo! CSS Reset optimized for our purpose*/
body,div,ul,ol,li,h1,h2,h3,p{
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}

h1,h2,h3 {
	font-size:100%;
	font-weight:normal;
}
/*End Yahoo! CSS Reset*/

body {
	margin: 0 150px;
	padding: 0;
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background: #e6e6e6 url(images/back.jpg) repeat-x top left;
	color: #8c8a8a;
}

a {
  text-decoration: none;
  color: #666;
}

a:hover {
  border-bottom: 1px dotted #666;
  color: #666;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

#header {
  background: url(images/backhead.png) no-repeat center top;
  min-width: 700px; /*use min-width to avoid an incorrect behavior of two div elements when windows is very strait*/
  height: 125px;
}

#header h1 {
  text-indent: -9999px;
  float: left;
}

#header h1 a {
  display: block;
  width: 208px;
  height: 58px;
  margin-top: 32px;
  background: url(images/logo.png) no-repeat left top;
}

#header h1 a:hover{
  border: none;
}

.menu ul li{
  display: inline;
  float: right;
}

.menu ul li a {
  display: inline-block;
  text-align: center;
  color: #cacaca;
  border-right: 1px solid #8c8a8a;
  border-left: 1px solid #8c8a8a;
  border-bottom: 1px solid #8c8a8a;
  margin-left: 15px;
  margin-top: -10px;
  padding-top: 15px;
  width: 100px;
  height: 25px;
  background: url(images/menback.png) left top;
  -moz-border-radius: 10px;
}

.menu ul li a:hover {
  color: #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-left: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

span.adv {
  width: 468px;
  float: right;
  margin-top: 20px;
}

span.adv a {
  background: #dfdfdf;
  border: 2px solid #8c8a8a;
  display: block;
  text-align: center;
  padding: 22px;
  color: #8c8a8a;
  font-weight: bold;
}

span.adv a:hover {
  background: #e6e6e6;
}

Step 4 – Coding Down Header

The markup for this section should expect three columns. Later we’ll write a specific script using jQuery to make adaptive the width of each element.

<div id="down_head" class="clearfix"><!--add a clearingfix class to solve floating bug-->
<div class="head_info">
      <h1>Our Goal</h1>
      <p>Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</p>
</div>
<div class="head_info border_info">
      <h1>RSS Feed</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="head_info">
      <h1>You are member</h1>
      <p>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>
</div>

Below you can see the css rules for this section.

#down_head {
  min-width: 700px;
  clear: both;
  margin: 20px auto;
}

#down_head h1 {
  font-size: 22px;
  font-weight: bold;
  padding: 10px 20px;
}

#down_head p {
  padding: 10px 20px;
}

.border_info {
  border-left: 1px dashed #ccc;
  border-right: 1px dashed #ccc;
}

.head_info {
  overflow: hidden;
  float: left;
  text-align: justify;
}

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Step 5 – Coding Post Container Section

Now we can code the “core” of the structure.

<div id="news_container" class="clearfix">

<!--here the Simple Pie loop start-->

<div class="post_cont">
      <div class="content">
      <h2>30 Luglio | 11:30am</h2>
      <h2><img src="<!--favicon url-->" alt="favicon" /><a href="<!--permalink news-->">Article Title</a></h2>
      <span class="visit_link"><a href="<!--permalink news-->">direct link to article</a></span>
      </div>
</div>

<!--end of loop-->

</div>

This is the update for “style.css”.

#news_container {
	min-width: 700px;
	border-top: 3px dashed #666;
	border-bottom: 3px dashed #666;
	padding-bottom: 10px;
}

.post_cont {
  width: 250px;
  overflow: hidden;
  float: left;
  margin-top: 10px;
}

.content {
  height: 200px;
  margin: 0 5px;
	padding: 5%;
	background: #fff;
	border: 1px solid #cacaca;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.content h2 {
	margin-bottom: 10px;
}

.content h2 a {
	font-size: 22px;
	font-size: 18px;
	color: #333;
}

.content h2 a:hover {
	color: #333;
	border-bottom: 1px dotted #333;
}

.content img {
  float: left;
	margin: 2px 4px 2px 0;
	width: 16px;
	height: 16px;
}

.content p {
  font-size: 11px;
  color: #666;
}

span.visit_link a {
  margin-top: 10px;
  padding: 10px;
  display: block;
  background: #dfdfdf;
  color: #8c8a8a;
  -moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}

span.visit_link a:hover {
  background: #e6e6e6;
  border: none;
}

Step 6 – Coding Footer

Below the simple footer code.

<div id="footer">
  <p><strong>tech News</strong> is a <a href="#">PV.M Garage Product</a>. It's released under Creative Common License also for commercial use.</p>
</div>

The CSS rules.

#footer {
  width: 700px;
  margin: 15px auto;
}

#footer p {
  text-align: center;
}

Step 7 – Adding jQuery

Now we add a simple script to make adaptive the width of the down-head elements and of the post container.
Download the last version of jQuery and load it in your “newsaggregator” folder, then between the tag head insert the following string to activate the framework.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Now after the tag body add the script.

<script type="text/javascript">

$(document).ready(function(){

	function adPostWidth() {

		var ovWid = $('#header').width(); /*We use the header width that has a min-width of 700px in the style*/
		var postN = Math.floor(ovWid / 250);
		var widFix = Math.floor(ovWid / postN);

		$(".post_cont").css({ 'width' : widFix});

	}

  function WidthHead() {

		var ovWid = $('#header').width();
		var widFixHead = Math.floor(ovWid / 3);

		$(".head_info").css({ 'width' : widFixHead - 2});

	}

	adPostWidth();
  WidthHead();	

	$(window).resize(function () {
		adPostWidth();
    WidthHead();
	}); 

});

</script>

If you want to learn more about this technique read the useful Soh Tanaka tutorial Smart Columns w/ CSS & jQuery whence I learned this trick.

Add Simple Pie

We use Simple Pie to load great news on our page. First of all download the php class. I’ve used the 1.1.3 version, downloadable from here, because in 1.2 there is bug for set_feed_url when we want to load an array.

Step 8 – Activate The RSS Feed Parsing Class

Copy in your folder the file “simplepie.inc” and create a new folder “cache” for caching system of Simple Pie.
Now in top of “index.php” add the following php code.

<?php
    //get the simplepie library
    require_once('simplepie.inc');
    //grab the feeds
    $feed = new SimplePie();
    //our list of RSS
$feed->set_feed_url(array(
    'http://feeds.digg.com/digg/popular.rss',
    'http://feeds.delicious.com/v2/rss/',
    'http://feeds.feedburner.com/cssglobe/',
    'http://news.google.com/news?ned=us&hl=en&output=rss',
    'http://feeds.dzone.com/dzone/frontpage',
    'http://www.good-tutorials.com/tutorials/photoshop.rss',
    'http://www.graphic-design-links.com/rss',
    'http://feeds2.feedburner.com/BestPhotoshopTutorials',
    'http://www.technewsworld.com/perl/syndication/rssfull.pl'
    ));
    //enable caching
    $feed->enable_cache(true);
    //complete path for caching system
    $feed->set_cache_location('cache');
    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1500);
    //init the process
    $feed->init();
    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();
?>

Step 9 – The Loop

Update the code of post container implementing the Simple Pie Loop. I used this php class in a previous tutorial, so if you want to know more about the use of this library read How to Realize a Daily Activities Widget in WordPress Sidebar using SimplePie.

<div id="news_container" class="clearfix">

<?php foreach ($feed->get_items(0, 100) as $item): ?>

<div class="post_cont">
      <div class="content">
      <h2><?php echo $item->get_date('j M Y'); ?> | <?php echo $item->get_date('g:i a'); ?></h2>
      <h2><img src="<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>" alt="favicon" /><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h2>
      <span class="visit_link"><a href="<?php echo $item->get_permalink(); ?>">direct link to article</a></span>
      </div>
</div>

<?php endforeach; ?>

</div>

Conclusion

Well brother. We have our News Aggregator, re-check the final result and enjoy it! There are many uses for this kind of web-project so free your imagination…

PV.M Garage | Web Design Blog

How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout

Our Goal Is…

Live Demo and Source Files

Sketch and Structure

Step 0 – Wireframe

Simple Header For Our Layout

Step 1 – Header Design In Photoshop

From PSD to XHTML/CSS Layout

Step 2 – Files, Folders and Images

Step 3 – Basic Structure and Header

Step 4 – Coding Down Header

Step 5 – Coding Post Container Section

Step 6 – Coding Footer

Step 7 – Adding jQuery

Add Simple Pie

Step 8 – Activate The RSS Feed Parsing Class

Step 9 – The Loop

Conclusion

Author: Piervincenzo Madeo

325 Comments

Trackbacks

Leave your comment

Socialize With Us

Friends and Partners

Web Design Updates

PV.M Garage | Web Design Blog

How To Realize A News Aggregator Using Simple Pie In An Adaptive Layout

Our Goal Is…

Live Demo and Source Files

Sketch and Structure

Step 0 – Wireframe

Simple Header For Our Layout

Step 1 – Header Design In Photoshop

From PSD to XHTML/CSS Layout

Step 2 – Files, Folders and Images

Step 3 – Basic Structure and Header

Step 4 – Coding Down Header

Step 5 – Coding Post Container Section

Step 6 – Coding Footer

Step 7 – Adding jQuery

Add Simple Pie

Step 8 – Activate The RSS Feed Parsing Class

Step 9 – The Loop

Conclusion

Author: Piervincenzo Madeo

325 Comments

Trackbacks

Leave your comment

Socialize With Us

Community News

Resources

Friends and Partners

Web Design Updates