How to Build a Simple Community News Section with Delicious and FeedBurner

by Steven Snell

on November 20, 2008

in Tutorials

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

A growing number of blogs are now including community news sections, including DesignM.ag. My experience with the news section is that it’s a great way to encourage readers to get involved by submitting items, and it can also reward them with a link and some traffic, not to mention that it gives readers the latest blog posts that might interest them without needing to search through tons of blogs to find them.The community news is especially popular on design and development blogs, but not as much outside of this niche. I also have a blog, Traffikd, where I write about topics related to social media marketing and blogging. I’ve been thinking about possible ways to enhance that blog, and I decided to use a news section there since there aren’t as many other blogs doing the same thing in that niche.

Community News at Traffikd

When it comes to setting up a community news section where users can submit links, there are several different approaches that can be used. Here at DesignM.ag I have a separate category set up for news, and they are published much like a regular blog post, but the category is used to pull them out of the WordPress loop, and recent submissions are placed in the sidebar (There’s some use of custom fields involved as well).

Collis Ta’eed wrote a popular tutorial for creating a news section using the comments functionality of WordPress, and many bloggers have followed this tutorial and are using this approach on their own blog. I decided to try something a little bit different for the news section at Traffikd, and I’d like to share the details here.

I decided to use Delicious bookmarks to power the community news rather than WordPress posts or comments. There are pros and cons of each approach, and I don’t think any is necessarily better or worse than the others. In this situation I was looking for something that would be quick and easy to set up and to maintain, plus I just wanted to try something different than what I’m doing here at DesignM.ag.

Setting Up a News Section with Delicious

The steps to this process are very simple, and that’s the main reason why I think it is an approach that could be useful to others as well.

Step 1 - Establish a Delicious Tag for News Items

If you already have an account with Delicious, the first thing you’ll need to do is determine a tag that will be used for anything that you want to be included in the community news section (mine is “traffikd-community”). Be sure that you choose a tag that you will not use on any of your other bookmarks aside from those that you want to post to the news. If you don’t already have an account with Delicious, you’ll need to sign up.

Step 2 – Tag a Few News Items

In order to get things set up completely, you’ll need to have a few sample links to start with. I tagged 5 or 10 posts that I had come across on my own, and these bookmarks were used to test the setup. So, find a few links that you’d like to include in your news section, save them with Delicious, and tag them with the specific tag that you’ve chosen to use.

Step 3 – Run the Feed Through FeedBurner

To make things easier for displaying links in your sidebar, we’re going to take the feed created by Delicious and deliver it by FeedBurner. From your Delicious account, view the items with your chosen tag (the URL in my case is http://delicious.com/vandelaydesign/traffikd-community). If you scroll to the bottom of the page you’ll see a link to an RSS feed for this tag. The feed will contain only the items that are bookmarked with this specific tag. Click on the link for the RSS feed and copy the URL. Login to your FeedBurner account (if you don’t already have one, create one now) and paste the URL in to burn the feed.

Step 4 – Activate Buzz Boost

FeedBurner offers a free option called BuzzBoost that makes it easy to republish your feed as HTML. With your community news feed selected, click on the “Publicize” link, and click on “BuzzBoost”. You’ll be able to choose a few different options, such as the number of items to display, whether you want the content or just the title to be shown, and a few other choices. I have all of the boxes unchecked so that BuzzBoost will produce a simple unordered list with just titles that link back to the original post.

Once you have the options set the way that you want them, click on “Activate”. FeedBurner will provide you with the code for your BuzzBoost. By cutting and pasting this code into your sidebar you’ll be putting the list of recent community news items at that location in the sidebar. At this point you should see an unstyled list.

Activating BuzzBoost

Step 5 – Style the List and Links

One of the nice things about BuzzBoost is that it can easily be styled using CSS in just about any way you want. Go back to the FeedBurner BuzzBoost page. Above the feed settings you’ll see a link that says “how to apply your own styles to BuzzBoost”. Click on this link and it will show you the basics of what you need to do to style the list that is produced.

Here is a sample of the and CSS code that I’m using:

CSS:

.feedburnerFeedBlock ul {
margin: 0;
padding: 0;
}
.feedburnerFeedBlock ul li {
margin: 0;
padding: 5px 0;
font-size: 1.25em;
list-style-type: none;
border-bottom: solid 1px #DDD;
}
.feedburnerFeedBlock ul li a {
margin: 0;
padding: 0;
text-decoration: none;
}
.feedburnerFeedBlock ul li a:hover {
text-decoration: underline;
}
#creditfooter {
display: none;
}
.small a {
font-size: 1em;
color: #333;
font-weight: bold;
}

Once you have the list styled to your satisfaction, the news section is set up! Now all you have to do is bookmark items with your tag whenever you want them to be included. If you have the Delicious toolbar installed this is very quick and easy. If you want to allow users to submit news items there is one additional step.

Step 6 – Set up the Submission Form

Using the CForms II WordPress plugin (or any other method for creating a contact form), create a simple form that will allow users to submit links for your consideration. Place the form inside a page on your blog and include a link to the submission page just below the news list in your sidebar. When readers submit a link, all you’ll have to do is visit the link and decide if it should be included. If so, save the link with Delicious and tag it accordingly.

Pros and Cons of this Approach

I was able to set up the community news section at Traffikd in about 10 or 15 minutes without touching any of the WordPress files except the sidebar to paste in the BuzzBoost code, and the stylesheet to include new styles for the list. If you’re setting up the news in some other fashion, such as using comments or blog posts, you’ll have to get more involved with the WordPress files.

In addition to getting it set up quickly, adding links is also easy. I use Delicious on a regular basis anyway, so tagging a few additional items only takes another minute or two. Collis’ method of using WordPress comments is also painless to maintain, as users essentially add their own links.

One last reason to like this approach is that it takes no additional toll on your WordPress database. Serving up a list of post titles and links in your sidebar (such as I do here at DesignM.ag) or by using comments, you’ll be drawing that information from your database. This approach, however, is getting the list of news items from FeedBurner and Delicious.

There are a few negatives about this system. You’re fairly limited to what you can include, although BuzzBoost does give some options. Many blogs using a community news section allow the submitter to enter a description or summary of the item. This isn’t feasible (at least not without some tweaking) with the Delicious/FeedBurner approach.

Another negative is that the links are temporary. One of the things I like about the news section here at DesignM.ag is that it gives a quality, permanent link to submissions because it creates an actual blog post. So even after the item is no longer news and it’s not listed in the sidebar, the original page will still be getting a link from the post on DesignM.ag. With the news section using Delicious and FeedBurner, no permanent link is created. Once new items are added and the link is pushed off of the sidebar, there will be no other link.

How Do You Power Your Community News?

I know some readers have their own blogs with news sections. If this applies to you, which method do you use for displaying news on your blog?

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+