1.20.2007

How to integrate FeedBurner with Blogger?

FeedBurner offers services for blogs to track their visitors that use RSS/Atom feeds for reading blog posts. In that case, some visitors choose to use their feed reader programs (some new browsers of IE or Firefox) or services (Google, Yahoo my pages). At this case, they do not need to visit blog site in order to read your blog posts. They only need to use their feed reader to read your blog post.

On the other hand, FeedBurner can be used to track these visitors. What I will show you in this post, to integrate FeedBurner with your blog site so that the actual RSS/Atom feeds will be hidden so that when the user wants to subscribe to your feed, it will subscribe to your FeedBurner feed.

To do so the very first thing, we should do is to change the template of your blogger site.
Here, in the new blogger templates there is a part similar to this at the beginning of the template:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title></title>
<b:skin>",


replace "<b:include data='blog' name='all-head-content'/>" with this:

<link href='http://feeds.feedburner.com/youraddress' rel='alternate' title='yourfeedname' type='application/rss+xml'/>

So the same part will look like this:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<link href='http://feeds.feedburner.com/youraddress' rel='alternate' title='yourfeedname' type='application/rss+xml'/>
<title></title>
<b:skin>

This will tell any browsers or other feed reader program that you use this feed address for your blog site.

The second thing is to make the links of actual blogger site feeds hidden. If they continued to be in your site, some user could subscribe for those feeds. To do so, we need to change the CSS behavior of the layer which these links are stored. Look for your template and find the phrase ".feed-links". An example is:

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
margin-left: 13px;
}

Now, add the line of "visibility:hidden;" to that part:

#blog-pager {
text-align: center;
}

.feed-links {
visibility: hidden;
clear: both;
line-height: 2.5em;
margin-left: 13px;
}

By doing this we make the links to actual feeds of blogger hidden. Now if you want, you can add your FeedBurner links to your blogger template by adding a new link list to your page elements.