Putting Blogger’s RSS Feed into Your Webpage in 3 Steps

Did you know that your Blogger blog already has an RSS feed upon creation? Not many people know, and if they are aware, most don’t have the first clue how to put it into their webpage. Well, that problem is about to be resolved.

RSS stands for “Really Simple Syndication” and was designed to provide a family of formats to publish frequently updated social media content (i.e. Blog, Audio, and Video) to a RSS Reader. Since RSS uses XML 1.0, most new browsers like Internet Explorer 8 already have a RSS Reader built into the web browser, making subscribing to RSS Feeds even easier than it has ever been.

Now, if you want to make a custom RSS feed yourself, you can find many sites like Harvard Law’s RSS 2.0 Specification Website that will guide you through the process of creating your own feed. However, if you have created a blog through Google’s Blogger, and want to see it in a RSS feed on your website in a matter of minutes, then read on, and learn for yourself, as I did, how not scary, and relatively easy it can be.

Step 1: Getting the code

Google has a Dynamic Feed Wizard that creates an AJAX API on your webpage, and is free to use and almost painless. Go to the site, and choose your style, you feeds’ expression, and click the “Generate Code” button. For the remainder of this lesson, I have chosen the Horizontal Style, and “People” as the feeds expression in my examples. Below, is the code that Google returned to me after I inputted my selections.

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->

<!--

// Created with a Google AJAX Search and Feed Wizard

// http://code.google.com/apis/ajaxsearch/wizards.html

-->

<!--

// The Following div element will end up holding the actual feed control.

// You can place this anywhere on your page.

-->

<div id="feed-control">

<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>

</div>

<!-- Google Ajax Api

-->

<script src="http://www.google.com/jsapi?key=notsupplied-wizard"

type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"

type="text/javascript"></script>

<style type="text/css">

@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

</style>

<script type="text/javascript">

function LoadDynamicFeedControl() {

var feeds = [ {title: 'People',

url: 'http://rss.people.com/web/people/rss/topheadlines/index.xml' }];

var options = {

stacked : false,

horizontal : true,

title : ""

}

new GFdynamicFeedControl(feeds, 'feed-control', options);

}

// Load the feeds API and set the onload callback.

google.load('feeds', '1');

google.setOnLoadCallback(LoadDynamicFeedControl);

</script>

<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Step 2: Paste code into webpage.

Now, open your webpage, find where in the body you want the API to be placed, and paste the code into your <div> container or your <td> cell for older web pages. Save the page, and view the web document. The API should look exactly as it did in Google’s preview pane. So far, my API has the title of “People” and is displayed the most current articles from People Magazine.

The next and last step is will direct the feed to your Blogger RSS Feed.

Step 3: Redirecting AJAX API to your Blogger RSS feed.

Last but certainly not least, we are going to modify the code to point to your Blogger’s RSS feed location. I have pasted the code below, and have bolded the changes that you will need to make.

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->

<!--

// Created with a Google AJAX Search and Feed Wizard

// http://code.google.com/apis/ajaxsearch/wizards.html

-->
<!--

// The Following div element will end up holding the actual feed control.

// You can place this anywhere on your page.

-->

<div id="feed-control">

<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>

</div>

<!-- Google Ajax Api

-->

<script src="http://www.google.com/jsapi?key=notsupplied-wizard"

type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"

type="text/javascript"></script>

<style type="text/css">

@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");

</style>

<script type="text/javascript">

function LoadDynamicFeedControl() {

var feeds = [ {title: 'Your Blog Title', url: 'http://yoursite.blogspot.com/feeds/posts/default' }];

var options = {

stacked : false,

horizontal : true,

title : ""

}

new GFdynamicFeedControl(feeds, 'feed-control', options);

}

// Load the feeds API and set the onload callback.

google.load('feeds', '1');

google.setOnLoadCallback(LoadDynamicFeedControl);

</script>

<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Just save the webpage, upload, and you’re finished! Now your blog’s RSS feed is on your webpage for all your viewers to see, click, and enjoy! Now get out there and start blogging or your articles will get old!