Monday, February 05, 2007

Integrating Your Feedburner Feed

This tutorial will show you how to use your Feedburner feed with your Blogger (out of) beta blog.

1) Feed Auto-Detection
First, go to Template -> Edit HTML and towards the top you'll notice a line that says

<b:include data='blog' name='all-head-content'/>

which actually spits out something like
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml" title="Minima Theme Switch Demo - Atom" href="http://minima-switch.blogspot.com/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Minima Theme Switch Demo - RSS" href="http://minima-switch.blogspot.com/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Minima Theme Switch Demo - Atom" href="http://www.blogger.com/feeds/8301582465326140745/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www2.blogger.com/rsd.g?blogID=8301582465326140745" />

when viewing the page source (in Firefox right click & choose 'View Page Source')

For your blog, you'll wanna copy & paste those lines from your blog's page source (the actual code it spits out will be different for everyone so DON'T JUST COPY & PASTE THIS!), then go ahead and edit the href's on the 2 lines that say rel="alternate" (as shown in bold) with your Feedburner feed
  <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<link rel="alternate" type="application/atom+xml" title="Minima Theme Switch Demo - Atom" href="http://feeds.feedburner.com/YourFeedburnerFeed" />
<link rel="alternate" type="application/rss+xml" title="Minima Theme Switch Demo - RSS" href="http://feeds.feedburner.com/YourFeedburnerFeed" />
<link rel="service.post" type="application/atom+xml" title="Minima Theme Switch Demo - Atom" href="http://www.blogger.com/feeds/8301582465326140745/posts/default" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www2.blogger.com/rsd.g?blogID=8301582465326140745" />

Now take what you've constructed at this point and replace the all-head-content part (as shown in the 1st codebox) with this.

2) Replacing Clickable Atom Feeds
Go to Template -> Edit HTML, check the box to Expand Widget Templates and find the following
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

This is the code for the part that shows either
Subscribe to: Posts (Atom)

or
Subscribe to: Post Comments (Atom)

depending on the page-type (label, permalink, homepage, etc.)

Replace that with
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<b:if cond='data:blog.pageType == "item"'>
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml'><data:f.name/> (RSS)</a>
<b:else/>
<a class='feed-link' href='http://feeds.feedburner.com/YourFeedburnerFeed' type='application/rss+xml'><data:f.name/> (RSS)</a>
</b:if>
</b:loop>
</div>
</b:includable>

This will make that link point to your Feedburner feed for all pages except for the permalink pages which points to the per-post-comment feed for that post. Just replace the part in bold with your specific Feedburner feed.

3 comments:

Paula the Surf Mom said...

Moggy I'd like to do this, but you completely lost me on this one.

PurpleMoggy said...

@Paula

Yeah, I wouldn't be surprised, I was gonna post this awhile back and didn't, so now that I did I kinda rushed thru it :P

Basically the first part has to do with feed auto-detection. For example if you browse to this page in Firefox it'll show a little feed icon on the address bar (because it auto-detected the feed)

The 2nd part shows how to change the "Subscribe to: Posts (Atom)" link that you see at the bottom of most Blogger blogs to point to your Feedburner feed instead of the default Blogger feed.

If there's anything else that wasn't very clear, feel free to let me know and I'll try & make it clearer :)

migz said...

Nice code, been looking for this one! thanks