This post aims at giving you 3 tips for achieving a more dynamic webpage with very little programming and no change in your workflow. The tools we are going to use are:
- Yahoo Pipes
- Twitter
- Wordpress
- Delicious
- Magpie RSS
What we would like to achieve is a website that feels more dynamic even when you are not writing articles on your blog/website. This article is based on a web running PHP, Smarty, Wordpress and a hosting plan that gives you the possibility to create and change rights for directories. You can of course adapt these tips to any server architecture you may be using, but these examples will feature this architecture.
Integrate Yahoo Pipes for News
Yahoo Pipes lets you, easily and graphically, create advanced mashups from different external sources such as RSS and other content available online. You can aggregate, manipulate and filter the content to fit your needs. Yahoo Pipes is very powerful used correct. In this post we will focus on how to take 1 or more RSS-feeds, combine them into one and filter out the content that fits on your website as targeted news.
Below you find a screenshot of a pipe where I have aggregated a couple of RSS-feeds from startup-blogs, sorted all items on publish date and filtered out all items that have the name “social” in the title.
Pipes is very intuitive and you should be able to create a solution like this in less than 10 minutes.
Save your Pipe and give it a nice name, then click Run Pipe…, on the resulting page you will get the option to “Get as RSS”, copy that URL, it should look something like this: http://pipes.yahoo.com/pipes/pipe.run?_id=BMHzDooV3RGSSmEWJhOy0Q&_render=rss
You now have dynamic content that are filtered according to your needs, below we will show you how to integrate it to your website with Wordpress Plugins or with Magpie RSS and Smarty.
Integrate Twitter to Wordpress
Twitter is a micro-blogging service that lets users tweet messages to their twitter profile. If you are using twitter, why not integrate your tweets to your blog, making it more dynamic, and if you like to, more personal. Maybe you do not want to create a single post for every tweet (max 140 characters), a daily aggregation maybe suits your blog better. Alex King has built a Wordpress Plugin on top of Twitters API which do just that (among other things). Downloading and installing the plugin should not take you more than 10 minutes all together.
Integrate del.icio.us as Link Manager
If you run a web site or a blog, you probably collects and share bookmarks on social bookmark services such as del.icio.us, BlinkList, simpy, Ma.gnolia, reddit and other social bookmarking sites. Why not utilize the well specified apis and tagging possibilities that they offer. In this example I have choosen to go with del.icio.us, but I am pretty sure you can do this with all of the popular social bookmarking services, the only thing is that they have to have an RSS published for the tag you are using to pinpoint your dynamic content.
In this example we are going to use del.icio.us and my bookmarks tagged with jquery as a resource for adding external links to your website that updates automatically when you add new bookmarks tagged with jquery to your online del.icio.us bookmarks.
My jQuery bookmarks can be found at http://del.icio.us/hising/jquery. By adding /rss between hostname and username, you will get the list of jQuery bookmarks in a format suitable for integration with your web site. In this case the url to the rss is http://del.icio.us/rss/hising/jquery
RSS Integration Code Example
With Magpie RSS and Smarty
Download Magpie RSS and follow the installation instructions. One thing you dont want, is to grab the feed every time someone visits your page, you are want to cache the result for a specified period of time, in this example we cache the feed response for 1 hour (set this depending on how often you think you will update your dynamic content)
channel array which contains info on the rss
//$news->items array that contains the feed items
/*
item example:
array(
title => 'Weekly Peace Vigil',
link => 'http://protest.net/NorthEast/calendrome.cgi?span=event&ID=210257',
description => 'Wear a white ribbon',
dc => array (
subject => 'Peace'
),
ev => array (
startdate => '2002-06-01T11:00:00',
enddate => '2002-06-01T12:00:00',
type => 'Protest',
location => 'Northampton, MA'
)
);
*/
?>
When you have got the result from your controller/php-file make sure you expose the response data to your view manager, and print out your items. In this example I have used the Smarty templating engine
//PHP:
require_once(YOUR_SMARTY_PATH . 'Smarty.class.php');
$smarty = new Smarty();
$smarty->assign('news', $news);
$smarty->display('template.tpl);
//Template
As Wordpress Plugin
Download a plugin for integrating external RSS into your blog. There are a lot of different plugins for this, in this example we will use FeedList. Upload and enable the plugin. Then in your template add this:
'http://del.icio.us/rss/hising/jquery',
'num_items' => 10));
?>
More Examples on Creating a Dynamic Web Quickly
There are many other ways to create a more dynamic web site. You could use FeedBurner for creating Headline Animators. Headline Animator is an animated banner that cycles through your feed’s five most recent items. It’s an easy way to promote your content anywhere you can place a snippet of HTML. By doing this you can promote content from another blog on your website AND add a more dynamic web. All this is easy steps, under an hour of labour, to achieve a more alive web. Do you have any other tips that are a quick win when it comes to adding dynamic content to your web site?
Front-End Book is run and primarily written by Mattias Hising, an experienced Lead Developer from Uppsala, Sweden. I try to focus my efforts on Front-End related issues, as I find the problems to solve are more complex and interesting than the ones in traditional back-end development.