Dynamically Add Facebook Likes to Bootstrap Progress Bar

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:

   $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;	

And here’s the HTML code to output your likes using Twitter Bootstrap’s progress bar:

<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>