Front End Development

Often it is a pretty common occurrence to see websites display their social statistics such as Twitter followers count and RSS subscribers on their site. In this tutorial, I will show you how to get your social following statistics for your Twitter, Facebook and Feedburner account. In this demo I have coded up Orman’s Subscriber Count Icons and used PHP to get each count.

If you also enjoy learning all kinds of coding and programming, I think you might as well enjoy some articles on our website that are oriented to CSS and jQuery. These articles also include detailed instructions how to do certain things step by step, for example our article about How To Customize Vibrant CSS Buttons With Pictogram Icon and Best Tutorial for Coding a jQuery Popup Contact Form on Design Woop.

Download

Check out the download/fork it on GitHub.

Default Page Structure

Nothing out of the ordinary here, just a super basic HTML5 page structure where I load the CSS and create the list items for the social icons and counters.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Getting Your Social Stats</title>
	<link rel="stylesheet" href="css/style.css" /> 
</head>
<body>
	<!-- BEGIN .wrap -->
	<div class="wrap">
		<header>
			<h1>Demo: Get Your Social Follower Count Using PHP</h1>
			<p>Read the <a href="">full article</a> on how to get your Twitter, RSS and Facebook follower count.</p>
		</header>
		<section>
			<article>
				<div class="social-love">
					<ul>
						<li class="rss"><a href="https://feeds.feedburner.com/designwoop"></a></li>
						<li class="twitter"><a href="https://twitter.com/#!/designwoop"></a></li>
						<li class="facebook"><a href="https://www.facebook.com/pages/Designwoop/158483190866574"></a></li>
					</ul>
				</div>
			</article>
		</section>
		<footer>
			<p>A basic social statistic tutorial by <a href="https://www.bestseocompanies.com/" title="DesignWoop">DesignWoop</a>, feel free to develop it further.</p>
		</footer>
	<!-- END .wrap -->	
	</div>
</body>
</html>

Default CSS Structure

Again the CSS is about as basic as it gets, I use the handy Eric Meyer CSS reset then begin styling the social list items. You will notice that I use an image sprite for the social icons, this means I combine the three icons into one image then use the background-position property to display different areas of the image sprite. This allows me to load just one image, yet display three different icons. Again, pretty standard stuff but a worthy mention.

.social-love {
	width: 300px;
	margin: 60px auto 0 auto;
	clear: both;
}

.social-love ul {
	margin: 0;
	padding: 0;
	clear: both;
	display: block;
}

.social-love ul li {
	margin: 0 32px 0 50px;
	padding: 0;
	float: left;
	width: 32px;
	height: 32px;
}

.social-love ul li:first-child {
	margin-left: 0;
}

.social-love ul li a {
	margin: 2px 50px 0 40px;
	float: left;
	font-size: 22px;
	font-weight: bold;
}

.rss {
	background: url(../img/icons-sprite.png) 0 0 repeat transparent;
}

.twitter {
	background: url(../img/icons-sprite.png) 64px 0 repeat transparent;
}

.facebook {
	background: url(../img/icons-sprite.png) 32px 0 repeat transparent;
}

Get Your RSS Feedburner Subscriber Count Using PHP

The first thing to mention when trying to get your Feedburner RSS counter is that you will need activate your Feedburner Awareness API. This allows us to query the feeds data. Your will need your full RSS URL and you will need to be sure its parsed in XML format, it should look like so: https://feeds.feedburner.com/designwoop?format=xml

Once we have our Feedburner URL we can use PHP to convert the feed XML to a string that we can then easily query. I do this by using file_get_contents, this allows us to take the entire XML file and convert it to a string. Once we have the XML converted and stored in a variable we can then use the PHP SimpleXmlElement function to convert XML to an object that can processed. We lastly pull out the RSS subscriber count from the array using $xml->feed->entry->attributes()->circulation;.

I finally store the ‘Subscriber’ count from the returned data using $rss_count = $xml->feed->entry->attributes()->circulation;, here I simply store the ‘Subscriber’ count from the array so I can use it later.

The completed code would look like so:

/********************************************************************************
 FeedBurner Subscriber Count
********************************************************************************/

/* Send an XML feed of a FeedBurner URL to a PHP variable */
$rss = file_get_contents('https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=https://feeds.feedburner.com/designwoop?format=xml');

/* Convert XML feed to an object */
$xml = new SimpleXmlElement($rss);

/* Store the FeedBurner count  */
$rss_count = $xml->feed->entry->attributes()->circulation;

Get Your Facebook Page Like Count Using PHP

To get a Facebook page like count using PHP is pretty simple, in this example you will see I first need to get the page id or name. For example the id: 158483190866574 or the name: drDre. This is then used in conduction with the Facebook Graph API, so putting the two together would look like: https://graph.facebook.com/[PAGEID OR NAME]

In the code below you will see I use the PHP json_decode function, this allows us to decode a JSON string, in this case the one which is returned from the Facebook Graph API URL. Once I have done this I use file_get_contents to allow us to be able to use and store certain data later. I finally grab the ‘Like’ count from the returned data using $facebook_count = $facebook[‘likes’];, here I simply store the ‘Like’ count from the array so I can use it later.

The completed code would look like so:

/********************************************************************************
Facebook Like Count
********************************************************************************/

/* Send the FaceBook Graph to a PHP variable */
$facebook = json_decode(file_get_contents('https://graph.facebook.com/158483190866574'), true);

/* Store the  Facebook count  */
$facebook_count = $facebook['likes'];

Get Your Twitter Followers Count Using PHP

To get your Twitter follow count, I use much the same principles as I did when obtaining the Facebook ‘Like’ count, I use the PHP json_decode function and the file_get_contents function to convert the contents of JSON file into a PHP variable that we can get data from.

When obtaining data from Twitter, I use the the Twitter API, in this instance I am trying to get user data, so I use the ‘User Stream’ from the ‘Streaming API’. This provides and data and events about an authenticated Twitter user.

The Twitter API URL I use, looks like so: https://api.twitter.com/1/users/lookup.json?screen_name=YOURTWITTERNAME, to customise this for your purpose simply add your Twitter name minus the ‘@’ in lowercase.

The completed code would look like so:

/********************************************************************************
 Twitter Follower Count
********************************************************************************/

/* Send the Twitter api to a PHP variable */
$twitter = json_decode(file_get_contents('https://api.twitter.com/1/users/lookup.json?screen_name=designwoop'), true);

/* Store the Twitter follower count */
$twiter_count = $twitter[0]['followers_count'];

Display The Data

Once we have collected the data, its time to show it to the front-end user. For the purpose of this demo, I simply check the variables are not blank then echo the variable into the HTML list.

<div class="social-love">

	<ul>
		<li class="rss"><a href="https://feeds.feedburner.com/designwoop"></a></li>
		<li class="twitter"><a href="https://twitter.com/#!/designwoop"></a></li>
		<li class="facebook"><a href="https://www.facebook.com/pages/Designwoop/158483190866574"></a></li>
	</ul>

</div>

Closing Thoughts

This demo is simply a starting point for you to start creating your own version, this demo does not include caching and more advance PHP data checks to ensure the user always gets data, even if some APIs are unavailable. This would be the next development to add to the above code, if you do so wish. Enjoy 🙂

Download

Check out the download/fork it on GitHub.

References

https://php.net/manual/en/function.file-get-contents.php

https://php.net/manual/en/class.simplexmlelement.php

https://php.net/manual/en/function.json-decode.php

https://dev.twitter.com/docs

Image Credits:

https://www.premiumpixels.com/freebies/subscriber-count-icons-psd-png/