An updated method for adding RSS Headlines to your BlogHarbor weblog has been added, please see this page for instructions on adding RSS Headlines to your weblog. BlogHarbor users should use the newer method and not the method described on this page.

As we wrote about in this article, BlogHarbor weblogs support the RSS syndication format. It is also possible to insert other RSS feeds into your weblog. This article explains how to create a custom component which displays RSS headlines and insert the component into your weblog.

This page will help you to create small Javascript code which you will insert into your weblog. This Javascript code will fetch the headlines from an RSS source you specify, and display the headlines on your weblog.

First you will need the URL of the RSS file whose news you wish to include in your web page. Enter it in the form below, and click on the Preview button. You can choose to include a specific number of items, or all items available. You can also choose whether or not to include the date that an item was posted.

The Preview button will show you an example of the feed, but when the feed is included in your website it will automatically adapt to the style of your weblog, no matter what template you are using.

Once you have configured the feed the way you like it, click on Generate JavaScript and follow the instructions below for Adding the Javascript to your Weblog.

RSS Javascript Generator

Example

Here is an example of a Javascript showing the World News RSS feed from Yahoo!, limiting the number of items to 5 and showing the posting date:

Adding the Javascript to your Weblog

Once you have generated the Javascript to include an RSS feed in your BlogHarbor weblog, you will need to include it in a custom component you create.

1. Login to the BlogHarbor Control Panel, and click on the Look and Feel tab at the top.
2. Now you are in the Layout Manager; Click on the Advanced tab. The first thing you will see at the top of the page is the Custom Compononent tool.
   
   
   
   Enter your Javascript into the Content area and enter a descriptive name in the Name area, like this:
   
   
   
   (The Name box is used to identify Components within the Layout Manager, it will not be output into your weblog.) Now click Add Component.
3. Now that you have created a Custom Compononent using the RSS feed, it's time to add it into your layout. Click on the Columns tab in the Layout Manager tool, and scroll down to the Component Layout area. In the Inactive column, you should see the name of the Custom Compononent you just created (it will have a name like Custom: Your Component's Name). Drag the component into the Left or Right Column, and click on the Save button at the bottom of the page.
4. Your website is now displaying headlines from other websites!

Creating Javascript to Syndicate your Weblog

When you set the Use Custom CSS? option to No, the Javascript generator will create Javascript which perfectly matches your BlogHarbor weblog by including CSS or Cascading Style Sheet information identical to the CSS which is used to create the look and feel of your BlogHarbor weblog.

But what if you want one of your friends to display your headlines on their website? The Javascript generator will do that too! As we explained in this article, your BlogHarbor weblog creates RSS files too. To create a Javascript which displays your headlines on another website, use your Blog's RSS URL in the Javascript generator and set the Use Custom CSS? option to Yes. Now you have some Javascript you can use to display your headlines on another website!

In addition to the Javascript, you will also want to distribute the CSS style information necessary to modify the look of your headlines. By using the Custom CSS option, other websites can modify the look of your headlines by including CSS style information such as the following in the HEAD section of their HTML document (the styles can modified freely!):

<STYLE type="text/css">
.rss_box {
margin: 10px 15%;
padding: 4px 8px;
background-color: #cccccc;
border: 1px dashed #7485CA;
}

.rss_title, rss_title a {
font-family: "American Typewriter", "Trebuchet MS", Trebuchet, Lucida, sans-serif;
font-size: 120%;
font-weight:bold;
margin: 5px 0;
padding: 0;
letter-spacing: 1px;
}

.rss_items {
padding: 4px 8px;
background-color: #FFFFFF;
}

.rss_item {
font-family: verdana, arial, sans-serif;
font-size: 90%;
font-weight : bold;
margin: 8px 0;
}

.rss_item a:link, .rss_item a:visited {
text-decoration : none;
color: #88b;
}

.rss_item a:hover {
text-decoration : underline;
color: #e0861e;
}

.rss_date {
font-size: 80%;
font-weight : normal;
color: #F60;
}
</STYLE>


RSS Sources

Where can you find RSS feeds? They are everywhere! Often a site will identify its RSS feed with the orange XML icon:

Clicking on the orange XML icon will usually show you the RSS feed for that site. Look at the address bar of your browser, and note the URL. That is the URL for their RSS feed.

Some sites specialize in aggregating, cataloging, and organizing RSS newsfeeds. Here are links to sites where you can find thousands of RSS newsfeeds from webloggers and news publishers all over the world:

• Syndic8.com
• NewsIsFree
• Feedster
• Yahoo! News

Notes

• Headlines are cached for 3 hours. If an RSS source is updated, it may take up to 3 hours for the Javascript to show the changes.
• When you leave the Use Custom CSS option set to No, the Javascript includes CSS style information which perfectly matches the CSS which is used to create the look and feel of your BlogHarbor weblog. The design of your Javascript headline will automatically adapt to the style of your weblog even if you change template themes.

This service is based on software written by Alan Levine.