I have a WordPress plugin that I am working on that Polls all the major Social Networking sites and returns the social counts ( followers ) for a specific user.
This can be quite slow and intensive on the server so I have built the plugin using WordPress Transient Caching to store the details returned from the Social Network sites, and am also using jQuery AJAX json to display the data.
These are the main functions:
Retrieve the Facebook Count
/**
* Fetch Facebook count.
*
* @param string $url The url to fetch.
* @return int of Facebook counts.
*/
function ass_get_fb_likes($facebook_id) {
try {
$json = wp_remote_get("http://graph.facebook.com/".$facebook_id);
if(is_wp_error($json))
return false;
$fbData = json_decode($json['body'], true);
return format(intval($fbData['likes']));
} catch (Exception $e) {
return false;
}
}
this above function is also connected to another function that handles the Transient caching. This aspect works great.
Handles the initial display of the Social Network data
jQuery(function($) {
$('#fblikes').advanceddashboardwidget({
'action':'get_facebook_likes',
'service':'facebook',
'countof':'likes',
'callback':'formatCount'
});
});
Helper function to format the display
function formatCount(element,count){
var display_count='';
count=parseInt(count,10);
if(count>1000000)
{
count=count/1000000;
count=count.toFixed(0);
display_count=count+'m';
}
else if(count>1000)
{
count=count/1000;
count=count.toFixed(0);
display_count=count+'k';
}
else
{
display_count=count;
}
element.html(display_count);
}
The below function if the one giving me issues. It is used to communicate with WordPress to call the PHP functions and retrieve the data.
(function($) {
$(document).ready( function() {
var AdvancedDashboardWidget = function(element, options)
{
var ele = $(element);
var settings = $.extend({
action: '',
service: '',
countof: '',
query: '',
callback:''
}, options || {});
this.count=0;
var url='';
switch(settings.service)
{
case 'facebook':
if(settings.countof=='likes' || settings.countof=='talks')
{
ajaxCall(action,ele,settings);
}
break;
}
};
var ajaxCall = function(action,ele,settings){
opts = {
url: ajaxurl, // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
type: 'POST',
async: true,
cache: false,
dataType: 'json',
data:{
action: settings.action // Tell WordPress how to handle this ajax request
},
success:function(response) {
//alert(response);
ele.html(response);
return;
},
error: function(xhr,textStatus,e) { // This can be expanded to provide more information
alert(e);
//alert('There was an error deleting the cache');
return;
}
};
$.ajax(opts);
};
$.fn.advanceddashboardwidget = function(options)
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('advanceddashboardwidget')) return;
// pass options to plugin constructor
var advanceddashboardwidget = new AdvancedDashboardWidget(this, options);
// Store plugin object in this element's data
element.data('advanceddashboardwidget', advanceddashboardwidget);
});
};
});
})(jQuery);
The Issues
The issue is that when the data is returned from the transient functions there is always an extra 0 ( zero ) appended to the number. From what I have been reading this could be because I am using "json" instead of "jsonp".
When I change it to "jsonp" I get an error "Error: jQuery172011280598581866697_1353705456268 was not called". I guess this has to do with the callback function.
So far I have found this the fastest way to display this information on a site. If the data exists in the transient cache the pages load quick but if not that can take a few seconds and that is where I want jQuery to come in and maybe display a loading graphic until the data is retrieved.
Any help would be greatly appreciated.
