alt-web logo

Tips & Tutorials for Web Designers

Friday, June 10, 2011

Adding a Blogger RSS Feed to an HTML Page

This brief tutorial shows how to add your Blogger RSS Feeds to your main web site.   NOTE: For this to work, your server must support .php and server-side includes.

Locate your Blogger's RSS Feed

Type the following URL into your browser's address bar:

http://your_blog.blogspot.com/feeds/posts/default?alt=rss

Replace your_blog with your actual blogger site name.  Hit enter.

As an example, this blog's RSS feed is located at:
http://alt-web.blogspot.com/feeds/posts/default?alt=rss

Parsing an XML feed into HTML

You need a script to parse XML into HTML otherwise it will appear as an un-styled mess.  FeedForAll RSS Creation Tool  has a free PHP script for displaying RSS feeds in HTML pages.  Download zip: RSS2HTML

Configuration of RSS2html

Unzip the folder.  Open the rss2html-docs.txt file in Dreamweaver or your favorite plain text editor and read the instructions.  Actually it's very simple to implement by modifying a few lines of code in the rss2html.php file:

Tell the script where to find your RSS Feed:

 $XMLfilename = "http://your_blog.blogspot.com/feeds/posts/default?alt=rss";

Tell the script where to find your RSS Template on your web site (not blogger):

 
$TEMPLATEfilename = "http://yourdomain.com/rss2html/sample-template.html";

Tell the script how many feed items to display in your HTML page.

The default value is 1000.  I personally prefer 5 or possibly 10 items max.

$FeedMaxItems = 10000;

Tell your script how many characters to display from your blog post.

The default value of 0 includes everything.  150 is a nice number.

$limitItemDescriptionLength = 150;

The rest of the items are optional. Adjust them at will.  Save rss2html script with a .php extension and upload to your site.

Style your RSS template

Open the sample-template.html page.  Replace everything in code view with the following snippet of HTML code.

 ~~~BeginItemsRecord~~~
<p>~~~ItemPubShortDate~~~ ~~~ItemPubShortTime~~~</p>
<p><a href="~~~ItemLink~~~">~~~ItemTitle~~~</a></p>
<p>~~~ItemDescription~~~</p>
~~~EndItemsRecord~~~

Save sample-template.html and upload to your server.

Finally, open your main web site's home page (or whichever page you want the your blogger feed to appear on).  Scroll down to where you want it to display and insert a Server-Side Include pointing to the rss2html.php script.

<!--#include file="rss2html/rss2html.php" -->

For this to work, you'll need to save your index.html page with a .php or .shtml extension. This is necessary to parse includes on the server.   Delete old index.html page from server.

Go to your remote site and preview in browsers.   That's all there is to it.
We hope you enjoyed this tutorial.