Facebook provides a great API for application developers. An API which helps developers to make their applications more facebook-fit.
There are many things that a developer can do using FBML (Facebook Markup Language), but pagination. Recently I was looking for a way to add Facebook style pagination for one of the Facebook applications being developed. Though there's no relevant FBML tag, we could have something which works out of the box. :)
I found this solution on the Facebook developers forum which looks promising. :) It's a nice php function and anyone can use it to have a exact same Facebook style pagination on their Facebook applications.
The code itself provides many functionalities including mockajax. I could use the original source code with mockajax straight away, but I had to modify it a little bit in-order to add a loading indicator. :)
Here I'll post the modified php code, with mockajax support + a loading indicator, but all credits must go to the developer of the original source code. :)
How to use :
$ajax_top = array('rewriteurl' => $targetpage, 'rewriteid' => 'mypagination', 'rewriteform' => 'mypagination_form', 'loadingimg' => 'spinner');
"'loadingimg' => 'spinner'" will do the trick. You must put an <img> tag with the correspondent id. (here it's 'spinner'). And the image must put inside the 'rewriteid' (div).
<img src="<?=$callback_url?>/loading.gif" id="spinner" style="display:none;"/>
Modified code with the loading indicator :
/**
* Facebook style paginator
*
* @param page the page number (1-based)
* @param total_items the total amount of items
* @param limit the amount of items to show per page
* @param ajax an array with each of clickrewrite[url|id|form]
* @param url the url the links point to
* @param query_string the string to be appended to url
* @param item name the name of items shown in summary
* @param position whether paginator is on top or bottom of page
* @return pagination string to be placed in html code
*/
function get_pagination_string(
$page = 1,
$total_items,
$limit = 8,
$ajax='',
$target_page = '',
$page_string = '?page=',
$summary_name = 'items',
$placement = 'summary'
)
{
// DEFAULTS
$adjacents = 5;
// HTML
$div_bar = '<div class="bar clearfix %s_bar">';
$display = '<div class="summary">Displaying %d-%d of %d %s.</div>';
$ul = '<ul id="pag_nav_links" class="pagerpro">';
$link = '<li><a href="%s%s%s">%s</a></li>';
$current_link = '<li class="current"><a href="%s%s%s">%s</a></li>';
$ajax_link = '<li><a href="#" clickrewriteurl="%s&page=%s" clickrewriteid="%s" clickrewriteform="%s" clicktoshow="%s">%s</a></li>';
$current_ajax_link = '<li class="current"><a href="#" clickrewriteurl="%s&page=%s" clickrewriteid="%s" clickrewriteform="%s" clicktoshow="%s">%s</a></li>';
$ul_close = '</ul>';
$div_close = '</div>';
$div_font = '<div style="font-size:11px;">%s</div>';
// VARS
if(substr($page_string, 0, 1) != '?')
$page_string = '?' . $page_string;
if(substr($page_string, strlen($page_string) - 5) != 'page=')
$page_string .= '&page=';
$prev = $page - 1;
$next = $page + 1;
$firstpage = 1;
$lastpage = ceil($total_items / $limit);
$fiop = ($limit * $page) - $limit + 1;
$liop = min($limit * $page, $total_items);
// DRAW PAGINATOR
// the footer paginator has no summary and the current page has a different gfx
$type = ($placement == 'summary') ? 'summary' : 'footer';
$pagination = sprintf($div_bar, $type);
// Draw summary
if($placement == 'summary')
$pagination .= sprintf($display, $fiop, $liop, $total_items, $summary_name);
if($lastpage > 1)
{
$pagination .= $ul;
// First page selector
if ($page > 2)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$firstpage,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
'First');
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$firstpage,
'First');
}
}
// Previous page selector
if ($page > 1)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$firstpage,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
'Prev');
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$firstpage,
'Prev');
}
}
// Page selectors
if ($page < 4)
{
for ($counter = 1; $counter <= min(5, $lastpage); $counter++)
{
if ($counter == $page)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$current_ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$current_link,
$target_page,
$page_string,
$counter,
$counter);
}
}
else
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$counter,
$counter);
}
}
}
}
elseif ($page > $lastpage - 3)
{
for($counter = $lastpage - min(5, $lastpage);
$counter <= $lastpage;
$counter++)
{
if ($counter == $page)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$current_ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$current_link,
$target_page,
$page_string,
$counter,
$counter);
}
}
else
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$counter,
$counter);
}
}
}
}
else
{
for($counter = $page - 2; $counter <= $page + 2; $counter++)
{
if ($counter == $page)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$current_ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$current_link,
$target_page,
$page_string,
$counter,
$counter);
}
}
else
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$counter,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
$counter);
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$counter,
$counter);
}
}
}
}
//next button
if ($page < $lastpage)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$next,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
'Next');
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$next,
'Next');
}
}
//last button
if ($page < $lastpage - 1)
{
if(!empty($ajax))
{
$pagination .= sprintf(
$ajax_link,
$ajax['rewriteurl'],
$lastpage,
$ajax['rewriteid'],
$ajax['rewriteform'],
$ajax['loadingimg'],
'Last');
}
else
{
$pagination .= sprintf(
$link,
$target_page,
$page_string,
$lastpage,
'Last');
}
}
$pagination .= $ul_close;
}
$pagination .= $div_close;
$pagination = sprintf($div_font, $pagination);
return $pagination;
}
Again,
all credits go to the developer of the original source code. Thanks a lot for sharing.
Sound of code
Sound of Code - Desktop
Sound of Code - සටහන
