Custom Counter for Twitter and Feedburner

I would like to share a simple way to have your Twitter follower counter or Feedburner total reader counter using custom styling on your WordPress website. You can see some examples on Custom Counter Page to get the idea of how these counters can look. Enough with the introduction, lets get started.


Step 1 Reading the value

The most important thing is how can we read the value from Twitter and Feedburner, let start with Twitter first. You can get details for your Twitter account by visiting the following URL: https://twitter.com/users/show/insert-your-username-here For example https://twitter.com/users/show/eizil, if you click the URL, you will see a list of information regarding my Twitter account in XML format.

We can do a similar thing to Feedburner too, you can use the following URL to get your Feedburner data: https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=insert-your-username-here For example https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=eizil, if you click the URL, you will see information regarding my Feedburner account.

So now we have the source for our info, next we need to read the XML value from our website to be used in our custom counter. We will use file_get_contents and the SimpleXMLElement function to read the value from Twitter or Feedburner.

Now we have all the data we needed from Twitter and Feedburner, next we need to read the follower and reader value from this data.

And we combine this code to get the totals for Twitter and Feedburner like the example below.


Step 2 Styling the counter

We have our value for our counter already, next we will style our counter to be better looking. We will use the following HTML structure for our counter.

For Style 1 in Custom Counter Page, we will use the following CSS:

Now you have a custom counter to be used on your WordPress theme.


Step 3 Get the code into theme functions

At this stage, we already know how to read the value and how to make a simple counter, next we will create a new function in our theme functions.php file to handle this request. We will also add a cache file to read this value, as we don't want the counter to try to fetch a new value each time a user visits our WordPress website.

Let's start with creating a new function named getTwitFeedburnCount() like the example below

Next we will add two variables to the function to enable us to use this for Twitter and Feedburner, the two variables we are going to use would be 1. username, and 2. type of account. These two values will be used to determine which code will be used to fetch the value, and as an identifier for our cache file.

We will prepare the cache file at the beginning of the function, first we will try to see if there is a cache file available to be used or else we will fetch a new value from Twitter or Feedburner.

All cache will be stored in temporary file system, this is to avoid any security breach if we are to use a folder within our theme or WordPress installation. Now we can add the code that actually processes the reading from Twitter and Feedburner.

One thing I need to remind you, Feedburner sometimes resets the value if you fetch it live, and you end up having zero as the value for your reader. A quick solution for this would be to read the Feedburner value from 4 days ago. This is optional, just a solution if you ever encounter the problem like I did. You need to add the date to your function like shown below:

After you finish adding this function to your theme, you are good to go.


Step 4 Use the code

Now if you want to use the function, please use the following format

You can put the code together into the HTML like the example given below


Conclusion

By now you should be able to use this function in any of your themes, you can download the source file to take a look at other styles as seen on the Custom Counter Page. Do share your custom counter with me especially if you create a new style for your theme.

Tags:

Comments

Related Articles