Tutorial – Create Your Own Custom Del.icio.us Badge

For a long time I used the Del.icio.us Tagometer Badge on this blog. If you’re not familiar with the Tagometer Badge (shown below), basically its purpose is to show visitors how many Del.icio.us users have bookmarked a particular page, what tags are commonly being used for that page, and it makes it easy for them to bookmark the page themselves.

Of the social media buttons and badges that I’ve used, the Tagometer Badge was my favorite. When I re-designed the blog a few weeks ago the badge didn’t look good with the new background color, so rather than edit/customize the badge I decided to try FeedBurner’s FeedFlare option for the same purpose.

Most bloggers use FeedFlare to show links like “Digg This”, “Stumble It” or to show the comment count in their feeds, but FeedFlare is also available to include the same links directly on your posts.

One of the cool things about FeedFlare is that is gives you an opportunity to style it however you like because of the way the code is created by FeedBurner. As a result I decided to try using a custom-made Del.icio.us badge to create a more unique, and hopefully a more attractive section that encourages bookmarks from visitors.

The process of setting up and customizing FeedFlare is pretty straightforward, but I don’t see many bloggers doing it, so I thought I would write up a tutorial so anyone else who is interested can apply this on their own blog. Here goes.

Step 1 – Create Your Image

At the top of the post you saw an image of the final product, which is really nothing more than the text and link created by FeedBurner sitting on top of a background image that I created in Photoshop. Here is a look at the background image without the text.

You’ll want to create the image so it lines up with the width of your main content area where the FeedFlare will be displayed. In my case the image is 482 pixels wide, almost as wide as the entire content area. I’m not going to go over the steps of creating the image because I want to focus on the coding aspect, but as you can see it’s a very simple image divided in half vertically with a typical Del.icio.us logo that most visitors will recognize.

Step 2 – Login to FeedBurner and Set Up FeedFlare

Login to your FeedBurner account, click on your feed, click on “Optimize” and then on “FeedFlare” in the vertical navigation at the left side of the screen. You may have already activated FeedFlare for your feed or your site, or it may still be inactive. For the purposes of this tutorial we’ll be working with the options under the “Site” category, not under “Feeds.” You can select the same options for both or you can select different options. Whatever you currently have selected for “Feed” leave as it is.

Under the “Site” column we’re going to select “save to del.icio.us”, which is different than “add to del.icio.us.” Save to del.icio.us includes the number of bookmarks and the popular tags, while add to delicious only includes a link that lets users bookmark the page. We don’t want to have any other options selected under “Site”. (The approach I’m taking will only work with one selection because of how we are going to style the code generated by FeedBurner.)

Once you’ve selected “save to del.icio.us”, scroll down to the bottom and click “Activate” if your FeedFlare is currently inactive, or click “Save” if it has already been activated. You’ll now see “Get the HTML code to put FeedFlare on your site.” I’m using WordPress, so that’s what I select and it will open a new window with the code. Leave this window open for now.

Step 3 – Set Up the Code in Your single.php File

If you’re using WordPress you’ll want to copy the code provided by FeedBurner in that new window and paste it into your single.php file right where you want it to appear. Save the single.php and if you’re using Dreamweaver or something similar, upload the file to your server.

You now have FeedBurner set up to produce the FeedFlare on your posts and you have the code in your single.php file to display the results of the FeedFlare. At this point it will show up as simple text links with no styling except what is already set in your stylesheet (such as your basic styling for paragraphs and links). However, you won’t see the FeedFlare on old posts that were published before it was activated, so you’ll have to wait for a new post to see it in action.

Step 4 – Customize Your FeedFlare

As I mention earlier, FeedBurner makes it easy to customize your FeedFlare by giving you code that you can apply styles to in order to accomplish the look that you want. In the window that FeedBurner opened that contained the code, if you scroll down towards the bottom you’ll see some instructions for customization. They give a sample of the code that is produced so you’ll know how to apply styles.

Here’s the sample code provided by FeedBurner:

If you’re only using one FeedFlare option, such as the “save to del.icio.us” that we chose, the styling is very easy. The code produced is all contained in a paragraph with the class “feedburnerFlareBlock”, so we’ll want to set the height and width of this paragraph to match the image that we created (in this case 482px x 52px) and we’ll also set that image as the background image.

Now all that’s really left to do is to get the text of the links aligned like you want. This can be a little bit tricky because the width of this line will vary from post to post. With the image that I created I need the text to always appear to the right of the del.icio.us logo, so I set a left margin on the feedburnerFlareBlock links to 50 pixels. I also used a top padding on the paragraph of 25 pixels to keep the text at the lower half of the image so it doesn’t sit on top of the text that I created in Photoshop, “Bookmark with Del.icio.us for Future Reference.”

Here’s the CSS code that I’m using:

That’s all there is to it. You now have a custom banner/badge on your blog for encouraging bookmarks. Remember, you can use this approach for any FeedFlare option, the code produced will still allow for styling in the same manner. So if you didn’t want to use Del.icio.us you could create a banner for StumbleUpon or Digg or something else. Again I want to emphasize that this will not appear on older posts, so if you have a test blog you may want to go through these steps and publish a new post to see the FeedFlare in action.

If you want to test it out, feel free to bookmark this post