Here’s a neat little tutorial on how to dynamically show your Facebook likes within Twitter Bootstrap’s progress bar. This is what we’ll be creating:
Here’s the PHP code needed to extract the number of Facebook likes:
<div class="wp-block-codemirror-blocks code-block alignfull">
<pre class="CodeMirror" data-setting="{"mode":"php","mime":"text/x-php","theme":"material","lineNumbers":true,"lineWrapping":true,"styleActiveLine":true,"readOnly":true,"align":"full"}">$fc = file_get_contents('http://graph.facebook.com/http://www.facebook.com/ADD_YOUR_PAGE_URL_HERE');
$pagedata = json_decode($fc);
$currentVal = $pagedata->likes;
$maxVal = 1000;
$percentageVal = ($currentVal/$maxVal)*100;</pre>
</div>
And here’s the HTML code to output your likes using Twitter Bootstrap’s progress bar:
<div class="wp-block-codemirror-blocks code-block alignfull">
<pre class="CodeMirror" data-setting="{"mode":"htmlmixed","mime":"text/html","theme":"material","lineNumbers":true,"lineWrapping":true,"styleActiveLine":true,"readOnly":true,"align":"full"}"><div class="progress">
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="<?php echo $currentVal; ?>" aria-valuemin="0" aria-valuemax="<?php echo $maxVal; ?>" style="width:<?php echo $percentageVal; ?>%;">
<?php echo $currentVal; ?> Facebook Likes
</div>
</div></pre>
</div>