Created by Martin Angelov on May 19th, 2010
As we increasingly depend on more and more social services, there rises the need to provide a simple way to let our website visitors take part of our diverse social presence.
In this tutorial we are going to create a simple widget, which combines the number of your RSS readers, twitter followers, and fans of your facebook fan page, to give a rough estimate of your social popularity.
We are using jQuery and the
tipTip plugin, object-oriented PHP, and
Yahoo’s YQL, while demonstrating a number of interesting web development techniques.
Step 1 – PHP
YQL is a free Yahoo web service, which enables us to communicate with numerous third-party APIs through a consistent SQL-like language (and hence the name). It is basically a gateway that sits between you and the other APIs.
This is especially important here, as we are using Yahoo’s YQL for three very different tasks:
- Fetch your RSS subscriber count with FeedBurner’s awareness API (which comes in the form of an XML file that has to be parsed).
Note: You have to enable the awareness API to use this widget with your own feed. This is done from the Publicize Tab on your feed settings page;
- Use twitter’s API to get your number of followers;
- Use Facebook’s new Graph API (link) to get information about the number of fans of your facebook fanpage.
If it weren’t for YQL, we’d have to research and implement three very different solutions, which would slow us down significantly.
includes/subscriber_stats.class.php
03 | public $twitter,$rss,$facebook; |
04 | public $services = array(); |
06 | public function __construct($arr){ |
08 | $this->services = $arr; |
10 | $yqlQueries = array(); |
14 | '/1.0/GetFeedData?uri='.end(split('/',trim($arr['feedBurnerURL'],'/'))); |
18 | if($arr['feedBurnerURL']) |
21 | WHERE url=\''.$feedBurnerAwarenessAPI.'\' |
24 | if($arr['twitterName']) |
26 | SELECT * FROM twitter.user.profile |
27 | WHERE id=\''.$arr['twitterName'].'\' |
30 | if($arr['facebookFanPageURL']) |
32 | SELECT fan_count FROM facebook.graph |
33 | WHERE id=\''.end(split('/',trim($arr['facebookFanPageURL'],'/'))).'\' |
38 | 'SELECT * FROM query.multi WHERE queries = "'.join(';',$yqlQueries).'"'; |
41 | $result = json_decode( |
43 | urlencode($multiQuery).'&format=json&diagnostics=false&' |
44 | 'amp;env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys') |
45 | )->query->results->results; |
49 | $this->rss = $result[0]->rsp->feed->entry->circulation; |
50 | $this->twitter = $result[1]->item->meta[5]->content; |
51 | $this->facebook = $result[2]->json->fan_count; |
54 | public function generate(){ |
56 | $total = number_format($this->rss+$this->twitter+$this->facebook); |
59 | class="subscriberStats">
|
60 | class="subscriberCount"
|
61 | title="'.$total.'+ Total Social Media Followers">'.$total.' |
64 | title="'.number_format($this->rss).' RSS Subscribers"> |
66 |  "img/rss.png" alt="RSS" /> |
70 | title="'.number_format($this->facebook).' Fans on Facebook"> |
72 | "img/facebook.png" alt="Facebook" /> |
76 | title="'.number_format($this->twitter).' Twitter Followers"> |
78 | "img/twitter.png" alt="Twitter" /> |
When we create an object of this class, the construct method is called, and a YQL query is created and executed.
To request the data from YQL’s servers, we just use
file_get_contents() with the query passed as a parameter of the URL address. This returns a JSON object (basically a JavaScript object) which we can decode into a native PHP array with the in-build
json_decode() function.
The results of these queries are saved locally and are made available for use in the
generate() method which renders all the needed markup.
And now lets see how this class is used:
subscriber_count.php
01 | require "includes/subscriber_stats.class.php"; |
03 | $cacheFileName = "cache.txt"; |
10 | if(file_exists($cacheFileName) && time() - filemtime($cacheFileName) > 6*60*60) |
12 | $stats = unserialize(file_get_contents($cacheFileName)); |
19 | $stats = new SubscriberStats(array( |
22 | 'twitterName' => 'Tutorialzine' |
28 | file_put_contents($cacheFileName,serialize($stats)); |
Sending a query to YQL’s servers and receiving a response is a relatively slow process and would be unwise to request the same information on every page load (not to mention that we could get banned from the API for abuse).
This is why we implement a simple caching system. The idea is simple: if a cache file does not exist (or is older than 6 hours), connect to YQL, create a new cache file and output the XHTML markup. Otherwise, just read the cache and output directly. This way we send a request to the API only once every six hours which is perfect for any practical purposes.
Combined Social Media Followers Count
Step 2 – XHTML
As mentioned in the PHP section above, the generate() method renders all the XHTML markup used to display the stats. Here is what the generated code looks like:
sample code
01 | <div class="subscriberStats"> |
02 | <div class="subscriberCount" title="25,382+ Total Social Media Followers>25,382div> |
04 | <div class="socialIcon" title="5,921 RSS Subscribers"> |
06 | <img alt="RSS" src="img/rss.png" />a> |
09 | <div class="socialIcon" title="16,813 Fans on Facebook"> |
11 | <img alt="Facebook" src="img/facebook.png" />a> |
14 | <div class="socialIcon" title="2,648 Twitter Followers"> |
16 | <img alt="Twitter" src="img/twitter.png" />a> |
This code is fetched via AJAX and displayed on the page. Notice the title attributes. They are used as the contents of the fancy tooltips which are created by jQuery and the tipTip plugin, which we will discuss in a moment.
Step 3 – CSS
The CSS code is also quite simple and straightforward. The
subscriberStats is the main outer div, inside it we have a number of
.socialIcon divs and the
subscrberCount.
css/styles.css
18 | border-bottom:1px dotted #CCCCCC; |
28 | margin:140px auto 50px; |
All of these are floated to the left. Also notice that we disable the borders on the icon images on line 14, which are displayed by default and ruin your design.
Step 4 – jQuery
After including the jQuery library to the page, we just need to listen to the $(document).ready event, which is executed when all the markup of the page is accessible (this happens before things like images are loaded and comes earlier than the onload event).
js/script.js
01 | $(document).ready(function(){ |
06 | $('#main').load('subscriber_count.php',function(){ |
11 | $('.subscriberStats div').tipTip({defaultPosition:'top'}); |
is the div where we want to insert the stats. This could be your sidebar or website header. The load method fetches the markup from
suscriber_count.php and displays it on the page. The callback function is called after this and all the div titles are replaced with fancy tooltips by the
tipTip plugin.
With this our combined social stats widget is complete!
Conclusion
With services like YQL working with third party APIs is a charm. Not only it provides a common interface to a sea of technologies, but it also guarantees that you will be able to access to the services you want even as the underlying APIs change overtime.
Postado por Fernando Schimit - Fox Creative
