Advertisement

Custom Counter for Twitter and Feedburner

by

This Cyber Monday Tuts+ courses will be reduced to just $3 (usually $15). Don't miss out.

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.

// read Feedburner data
            $data = file_get_contents("https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=insert-your-username-here);         
            $xml = new SimpleXMLElement($data);

// read Twitter data
            $data = file_get_contents ( 'http://twitter.com/users/show/insert-your-username-here');
            $xml = new SimpleXMLElement ( $data );

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.

           $total = $xml->feed->entry['circulation'];  // Read the total count from Feedburner
           $total = $xml->followers_count; // Read total follower count from Twitter

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

// read Feedburner data
            $data = file_get_contents("https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=insert-your-username-here);         
            $xml = new SimpleXMLElement($data);
            $total = $xml->feed->entry['circulation'];  // Read the total count from Feedburner
// read Twitter data
            $data = file_get_contents ( 'http://twitter.com/users/show/insert-your-username-here');
            $xml = new SimpleXMLElement ( $data );
            $total = $xml->followers_count; // Read total follower count from Twitter

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.

    <div class="counter">
      <div id="feedcount"><a href="http://feeds.feedburner.com/insert-your-username"></a>
        <span>Value</span>
      </div>
      <div id="twitcount"><a href="http://twitter.com/insert-your-username"></a>
        <span>value</span>
      </div>
    </div>

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

.counter { float:left; clear:both; width: 100%; }
/* Feedburner counter */
#feedcount {  float: left;  position: relative;}
#feedcount a {  width: 150px;  height: 38px;  background: url(images/subscribe.png);  display: block; }
#feedcount span {  position: absolute;  top: 10px;  right: 15px;  color: white;  font-size: 0.75em;  font-weight: bold;}
/* Twitter counter */
#twitcount {  float: left;  position: relative;}
#twitcount a {  width: 150px;  height: 38px;  background: url(images/subscribe-twitter.png);  display: block;}
#twitcount span {  position: absolute;  top: 10px;  right: 12px;  color: white;  font-size: 0.75em;  font-weight: bold;}

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

function getTwitFeedburnCount() {

}

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.

function getTwitFeedburnCount($username, $type) {

}

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.

function getTwitFeedburnCount($username, $type){
    if($type == "feedburner"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );
    elseif($type == "twitter"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );            
    endif;

    if (is_file ( $cfile ) == false):
        $cfile_time = strtotime ( '1983-04-30 07:15' );
    else:
        $cfile_time = filemtime ( $cfile );
    endif; 

    $difference = strtotime ( date ( 'Y-m-d H:i:s' ) ) - $cfile_time;

    if ($difference >= 3600):   // set the interval before updating the cache in seconds
        //fetch new value code goes here
    else:
        //read from cache file
    endif;
}

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.

function getTwitFeedburnCount($username, $type){
    if($type == "feedburner"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );
    elseif($type == "twitter"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );            
    endif;

    if (is_file ( $cfile ) == false):
        $cfile_time = strtotime ( '1983-04-30 07:15' );
    else:
        $cfile_time = filemtime ( $cfile );
    endif; 

    $difference = strtotime ( date ( 'Y-m-d H:i:s' ) ) - $cfile_time;

    if ($difference >= 3600):   // set the interval before updating the cache
        if($type == "feedburner"):

            $data = file_get_contents("https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$username);         
            $xml = new SimpleXMLElement($data);
            $total = $xml->feed->entry['circulation'];  // Read the total count from Feedburner

        elseif($type == "twitter"):

            $data = file_get_contents ( 'http://twitter.com/users/show/' . $username );
            $xml = new SimpleXMLElement ( $data );
            $total = $xml->followers_count; // Read total follower count from Twitter
         
        endif;

        if (is_file ( $cfile ) == true):
            unlink ( $cfile );
        endif;
            touch ( $cfile );
            file_put_contents ( $cfile, strval ( $total ) );
        return strval ( $total );

    else:
            $total = file_get_contents ( $cfile );
        return strval ( $total );
    endif;    
}

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:

function getTwitFeedburnCount($username, $type){
    

    if($type == "feedburner"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );
    elseif($type == "twitter"):
        $cfile = sys_get_temp_dir().'/e1z'. $type . md5 ( $username );            
    endif;

    if (is_file ( $cfile ) == false):
        $cfile_time = strtotime ( '1983-04-30 07:15' );
    else:
        $cfile_time = filemtime ( $cfile );
    endif; 

    $difference = strtotime ( date ( 'Y-m-d H:i:s' ) ) - $cfile_time;

    if ($difference >= 3600):   // set the interval before updating the cache
        if($type == "feedburner"):
        
            $date = date('Y-m-d', strtotime('-4 days'));
            $data = file_get_contents("https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=".$username."&dates=".$date.",".$date);         
            $xml = new SimpleXMLElement($data);
            $total = $xml->feed->entry['circulation'];  // Read the total count from Feedburner

        elseif($type == "twitter"):

            $data = file_get_contents ( 'http://twitter.com/users/show/' . $username );
            $xml = new SimpleXMLElement ( $data );
            $total = $xml->followers_count; // Read total follower count from Twitter
         
        endif;

        if (is_file ( $cfile ) == true):
            unlink ( $cfile );
        endif;
            touch ( $cfile );
            file_put_contents ( $cfile, strval ( $total ) );
        return strval ( $total );

    else:
            $total = file_get_contents ( $cfile );
        return strval ( $total );
    endif;    
}

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


echo getTwitFeedburnCount("insert-your-username-here", "feedburner");
echo getTwitFeedburnCount("insert-your-username-here", "twitter");

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

    <div class="counter">
      <div id="feedcount"><a href="http://feeds.feedburner.com/insert-your-username"></a>
        <span><?php echo getTwitFeedburnCount("insert-your-username-here", "feedburner"); ?></span>
      </div>
      <div id="twitcount"><a href="http://twitter.com/insert-your-username"></a>
        <span><?php echo getTwitFeedburnCount("insert-your-username-here", "feedburner"); ?></span>
      </div>
    </div>

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.

Advertisement