Have you ever wondered how blogs such as Smashing Magazine, Vandelay Design, Three Styles (That’s Me) display their feed count in a custom way? Well I ran across a tutorial at Blogussion Which provides the code to bring the feed in text format. Today I am not only going to show you how to use the code provided by Blogussion, but I am going to show you a few ways you can customize it using CSS and images.

Custom RSS Feed

The first thing you need to do is create a file called feed.php. Copy the code below into the file you just created.

The Code – Displaying your RSS Feed count

<?php
//get cool feedburner count
$whaturl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Feed Here";

//Initialize the Curl session
$ch = curl_init();

//Set curl to return the data instead of printing it to the browser.
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

//Set the URL
curl_setopt($ch, CURLOPT_URL, $whaturl);

//Execute the fetch
$data = curl_exec($ch);

//Close the connection
curl_close($ch);
$xml = new SimpleXMLElement($data);
$fb = $xml->feed->entry['circulation'];
//end get cool feedburner count

echo $fb;

?>

Once you have pasted this section of code into your new feed.php file, there is another important step you MUST take in order for it to work.

Input your Feedburner ID

On line 3 of the code above you have to change a bit of code. You must change this code so that it reads your Feedburner ID instead of Feed Here which is just a place holder. See correct example below.

$whaturl="https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=ThreeStyles";

Your Feedburner ID is what is at the end of your Feeds URL so DO NOT FORGET to insert that there or the feed count will not work.

Don’t forget the Include

The last step to getting your count to display is using a PHP include statement to include the code we copied above into the actual page. On my blog I included my code into the sidebar because that happened to be where I had space. So in my sidebar.php I used the code below.

<?php include("feed.php"); ?>

Time for the Styles!!

Now we have our code coming into the sidebar but it is as plain as plain can be right?
Remember I’m doing this tutorial based on the subscribe button in the top right corner of the sidebar. So first I am going to open my sidebar.php file or whatever file you placed the Include statement in. We are now going to add two divs around our include statement as shown below.

<div id="feedcount"><a href="http://feeds.feedburner.com/ThreeStyles"></a>
      <p><?php include("feed.php"); ?></p>
</div>

Ok now that we have a container div and a paragraph tag around our include we now want to head over to Photoshop to create the graphic. I’m not going to take time to show you how I created the buttons in this tutorial so just make some test buttons or take my button from below.

Notice how I left some space on the graphic for a feed count number? Make sure that you take how many subscribers you have into consideration when creating your graphic. Since I only have 200 subscribers ( get me to 300, click subscribe and tell a friend ) the actual area that will contain the numbers doesn’t have to be too wide. Ok now that we have our graphic we will upload into our images folder in our theme directory.

On to the CSS

Let me explain the reasoning behind the HTML I used. The reason we put a container div around the include is to make the whole button clickable, then I used a paragraph tag so that we can move the actual text around inside of the container with out affecting the position of the container.

Our first piece of CSS is going to position the container element.

#feedcount {
      position: relative;
}

The next piece of code sets the background image that we created in photoshop to the Anchor tag of the continer div. NOTE: You must use display block in this piece of code or the code will not work. I gave the anchor tag the width and the height of the image I created in PS. Set the image as the background and added a border around it.

#feedcount a {
      width: 300px;
      height: 75px;
      background: url(images/subscribe.png);
      display: block;
      border: 1px solid #2996b1;
}

Now we should have our button that is clickable and the feedcount will probaby be somewhere below our button. In order to get that text inside of our button we have to position it absolute in order to take it out of the flow of the document, but because our conataining div is relatively positioned the absolute positioned element will stay inside of the container. We also set the font-size, color, etc… for how we want the text to display. Here is the CSS I used.

#feedcount p {
      position: absolute;
      top: 25px;
      right: 42px;
      color: #004e5c;
      font-size: 1.4em;
      font-weight: bold;
}

Final Product

If you enjoyed this post please Subscribe and support Three Styles in anyway possible. Thanks and I hope you learned something. Leave any questions in the comments and I will get back to you.

Written by Shane Jeffers

Shane Jeffers is the Creator and Author of Three Styles. He has a unique passion for design trends and tutorials. Reach him through the Contact page or follow him on twitter @ThreeStyles