So I've spent a lot of my time over the last few days getting Feedburner set up and working inside of a Drupal system... specifically this Drupal system.  It was an interesting task, and one I've enjoyed customizing specifically for this site, but it didn't go quite as simply as I had hoped.  This had a lot more to do with Feedburner than it did Drupal, mainly the fact that its FeedFlare stuff is... well cumbersome html wise.  Luckily, thanks to FireBug and Jquery, this is a task that was handled fairly simply.

The following article is an indepth description of how I formatted Feedburner's typical output into something that actually looked nice, and worked well.

Our first major step is to obviously install the Feedburner module into Drupal.  I'm not going to go into this in depth because it's very typical in all of it's form and function.  I will however say that the accompanying block was not immediately simple to use.  I'll be digging into the code soon to try to improve it, but until then I manually built my own block for the details I wanted to add.  For myself I added the email, Digg, Del.i.cious, and Facebook details.  All of this is done via Feedburner's system and they provide you a simply script code to paste into your system.  One of their provided options was Drupal specific code.  Ultimately I was unhappy with it so I altered it a little.  The following code is my example code for the block I built.  This is the entire block:

Now, this is a couple of different basic elements that Feedburner makes available to you mashed together.  The most obvious is the blog subscription at the top (which you can see an example of at the top of this page), and then the second portion of it is the service portion that allows you to send your article to multiple re-aggregation providers.  This second part is what we'll focus on, as it's just a script tag and modifying the code it outputs is a little less than intuitive.

First, let's look at the code itself.  You can do this by using Firebug on Firefox and just inspecting the links you'd like to look at.  IE8 has some of these same capabilities, but first it's a Microsoft product, so I'm less than enthused, and second it's not as nice or intuitive, so I would suggest you grab Firebug/Firefox for this demo.  By default, Feedburner expects you to put the code they provide into say... your node.tpl.php file.  Thus, they provide the code with $node_url as the method for keeping track of what the url for you content submissions should be.  Great as this is, I really wanted the code to work in a block, so I rearranged it to get the alias for $_GET['q'].  This gave me the flexibility to run this code arbitrarily from any sort of output Drupal might produce for me.  Other then that, we're just doing some checks to make sure we're really on a node before showing that code, and then I let the block configuration control where the block shows up.

Once we've got that all set up the way we want, we have a problem again.  First of all, if you're using this and follow along for yourself, then you need to keep in mind that that script tag sometimes has caching issues coming from Feedburner directly, so you may not see it show up immediately.  Go grab a coke, or talk to a co-worker for a little bit and then come back and check again.  I expect it will be working by that point.

Our next problem is that, as I said before, Feedburner expects you to put this code at the bottom of your node.tpl.php or content-type specific equivalent.  That isn't where I wanted my code, so a bit of rearranging the output was necessary.   Since they expected this to show on the bottom of the node, the code format give was once of essentially this:

Now, that's not very pretty inside of a block, so it was time to dig in and really make this look nice.  The first step in that is a little bit of CSS.  First, we'll go with the theory portion of this.  In theory, everything I'm about to do is GREAT... except that I'm not in control of the code that Feedburner outputs.  If at some point Feedburner were to decide to alter what they output, then all my code could fall apart and I'd need to redo this.  I honestly do expect that to happen at eventually, but I really liked the way this worked out, so it was better than living with what everyone else on the planet "has".

The CSS for this was pretty simple.  We won't need the spacers, so with our css, we'll tell them to not display.  Our second step in the css is to get the anchor tags to be block level elements instead of inline elements so that they sit on top of each other, instead of next to each other, again all achievable from the css sheet, and finally, I chose to margin in my anchor tags a bit to visually separate them.  The css is as follows:

Feedburner was kind enough to give us a class tag to select on, and from there the rest is pretty simply CSS wise.  My final step in all of this was the most fun of the entire project.  I really wanted to supply some images representing the various options provided here, but again since I wasn't in control of the content being given to me by Feedburner, I had to get creative.  I'm actually kind of surprised that they didn't provide some sort of unique class or id for each of the anchor tags in they code their providing.  If they had, I could have accomplished this entire process with just css, but since they didn't we had to get some Jquery involved to do the rest.

Jquery is a fantastic tool, especially for those of us who lean towards CSS for our fix to everything.  Jquery actually supports a much more significant portion of the CSS standard than any browser you might be using.  In this case I was specifically interested in jquery's nth-child support.  If you've ever spoken to me in real life about css for very long, there's a pretty good chance I've brought up nth-child.  Once the major browser providers get off of their proverbial butts and give it to us, it will significantly alter the power we as themers and developers have.  Jquery provides me that power today, and while it's not a perfect solution, it's a pretty good one so again, the theory:

In theory, again, all of Feedburner's code could change at a moments notice and then all my pretty code goes down the toilet.  But again, I don't think that's likely to happen soon, and I'm content with rewriting this when/if it does happen.  Now, we need to essentially navigate the DOM, but jquery likes to make things easy on us.  Instead of using some typical this.whatever.selector javascript selector, I can just rely on CSS selectors.  We are, as I previously mentioned using nth-child, so I'm just going to paste the code and then explain it.

We use the psuedo-selector "first-child" to grab the first anchor tag that Feedburner provided us.  Now, these selectors are absolute, I could probably have used ".feedburnerFlareBlock:first-child" as my selector, but again, the code is working, so I've left it alone.  This confounded me for a while because initially I expected it to work as a for every nth anchor tag, instead of for every nth tag period.  As such, all of my anchor tags are even numbered elements in the DOM (counting from 0) and so I manually prepended each image I would like to have to each anchor tag.

Now, this is about the most unmanageable code in the fact that I'll have to manually rewrite this if I ever add new tags (I'm about to add Technorati soon) or if I ever want to rearrange the existing options.  Add to that Feedburner's somewhat laggy response time on updating these links when you add new or rearrange existing tags and it can be somewhat annoying.  Ultimately though this is a pretty focussed area, and really considering that with the exception of the block (which virtually all of the code was provided for) I wrote maybe a dozen lines of code for this project, it's really not that much of a pain, and I much prefer the output I achieved to anything else I've seen.

I hope that my description of what I've done here will be useful to you in your own experiments.  I'm in the Drupal IRC channel on freenode a lot under the nick EclipseGc, so feel free to ping me any time if you'd like to chat about this or anything else I've outlined in my other blogs.