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

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.

Watercolored Web Portfolio CSS Template

Download Source
Download Source

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…

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

325 Comments

  1. everybodyweb

    Geat Piervincenzo! Simple idea for a very useful web page!

  2. Jasmin Halkic

    Wow, amazing! Thanks. Very useful.

  3. piervix

    @everybodyweb, @Jasmin Halkic: thanks guys. I’m honored!

  4. Mika Steve

    Great tutorial, useful trick in using SimplePie. Again… Thanks!

  5. fandy

    Simple but useful…

  6. Scott

    Piervix

    Nice tut you can check out another live example of a news aggregator site at http://ldfeeds.com AKA LiveDevFeeds.com

    The reason I found your post is because your sites RSS feed is included in the dev feed list.

    Keep up the good work my readers and I am looking forward to hearing more from your site.

    Scott

  7. virua

    Thanks. Great tutorial.

  8. AREA 1

    Simply great! Thanks :)

  9. piervix

    @AREA 1: You’re welcome, dear Opariuc! Thanks for visit and comment!

  10. sarah

    Hi
    This is exactly what I need. Problem is, I just can’t do it…
    I have a WP blog. The page for the rss aggregator would be a regular page of the blog, so I guess I don’t need the design part.
    But then how do I get only the feed part to be installed on WP?

    Help would be lovely.
    Thanks

  11. Guillermo

    Date in Spanish???

  12. http://www.ekoal.com/KMDefault.aspx?ctrid=11904

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  13. jersey shore season 4

    Hi! Your place is valueble for me. Thanks!…

  14. sodding grass

    I actually wanted to compose a remark to thank you for some of the pleasant solutions you are giving at this site. My extensive internet search has at the end of the day been rewarded with good quality information to share with my visitors. I ‘d declare that most of us website visitors actually are unequivocally lucky to dwell in a notable site with many marvellous individuals with interesting tips and hints. I feel quite fortunate to have discovered your web pages and look forward to many more pleasurable times reading here. Thanks once again for a lot of things.

  15. sandra

    xQnYlw http://fhYj30Mxb55m1SpveOxt.com

  16. penis enlargement

    RE: It’s so hard to get backlinks these days, honestly i need a backlink by comments on your blog / forums or guestbook to make my website appear in search engine. I am getting desperate Now! I know you’ll laugh while reading this comment !!! Here is my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|download youtube videos|penis enlargement pills|Vimax|penis enlargement I know my comments do not relate to the topic, but PLEASE HELP ME!! APPROVING MY COMMENT!
    So what is the problem my friends, I’m collecting backlinks to make my website vimax|bigger penis|penis enlargement pills|penis enlargement pills|penis enlargement|weight loss program|penis enlargement pills|Vimax|penis enlargement appear in the search engines!! whether are the comments look like a crap!
    BH2011titit

  17. Jpkrmvdl

    It’s funny goodluck Lolita Top 100
    :[ Nude Lolita
    9195 Lolita Boys
    340 Lolita Portal
    941081 Lolitas Bbs
    :-D Little Lolitas
    nrjvuv Nude Lolitas
    >:P Lolita Top
    %-OO Lolita Nude
    =[[[ Lolita Tgp
    %PP

  18. Dfbhucuq

    real beauty page Shemale Movies
    0586 Shemale Porn
    36402 Shemale Tubes
    hkca Shemale Videos
    ujvx Shemale Tube
    148481 Black Shemale
    wfg Shemale Sex
    365865 Shemales
    8-((( Shemale
    405261 Shemale Cum
    8-(

  19. Hjlsjwbp

    Very Good Site Lolita Pics
    8-]]] Preteen Lolita
    2630 Lolita Sex
    >:-DDD Lolita Toplist
    %-[[[ Lolitas
    27417 Preteen Lolitas
    793 Lolita Porn
    2909 Lolita Bbs
    >:-]]] Lolita
    279462 Lolita Models
    otu

  20. hebegubele

    I appreciate the info shared here. Please keep up the good work. Best wishes to you..

  21. Ofctwxnv

    Cool site goodluck :) pthc pay 8P pretty girls pthc 435 pthc zeps guide bbs rod pthc ranchi 12323 pthc short sotries gunly pthc messageboards jzebk pthc vicki 9516 bbs forum pthc hqia pthc hussyfan downloads aaovr shark pthc ijnl

  22. Free Articles

    There is obvisously a lot to know about this. I think you made some good points in Features too. Great Job.

  23. Free Articles

    In search for sites related to web hosting and comparison hosting plans, your site came up.

  24. obesimed

    hei, what’s going on here?

  25. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  26. is it bad to exercise before bed

    how to send you an email? let us get closer

  27. KabSoabomaJet

    The cost of gasoline is constantly fluctuating. Most occasions, its sky high!

    Listed here are some strategies for you to save gas.

    1. Tune up your car usually. Inadequate running situation eats up more gasoline.

    2. Strategy your route forward of time. This avoids taking unnecessary driving.

    3. Use your aircon sparingly. You can turn the aircon on for a few minutes then flip it off
    and allow the fan circulate the cool air in the automobile. Don’t open the windows whenever you aircon is on.

    4. Keep the windows closed when travelling at high pace for less air friction.
    Open windows drag the speed and lower gas mileage.

    5. Do not idle your engine for lengthy intervals of time.

    6. Do not journey at quick speeds in low gears unless of course you’ll need the compression to slow down.

    7. Attempt driving on permitted pace restrict.

    8. Do not rev the engine when not essential.

    9. Once the price for gas is higher, do not fill up. Wait till it goes down.
    You don’t want to give an impression to oil businesses that you are willing to pay for gasoline at any cost.

    10. Lastly, buy autos which have great gasoline mileage.

    11. Don’t forget to cover your automobile.

    Goodluck!

  28. Buford Vanzandt

    This is the suitable weblog for anybody who desires to search out out about this topic. You realize a lot its nearly arduous to argue with you (not that I truly would need…HaHa). You undoubtedly put a new spin on a subject thats been written about for years. Nice stuff, simply great!

  29. fieldrunners hd

    Thanks i love your article about 301 Moved Permanently

  30. Cell Phone Accessories

    A Little off topic mayhap, but anyhow – which template are you using? I really love the menu style.

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US