My kids’ school has a website created in WordPress. It is maintained by a teacher and one volunteer. The position of volunteer became vacant and I offered to help.

Earlier I fixed some issues described in this post. Now it was time for the Facebook sidetab plugin. It showed a button, when pressed the panel slides in, but no Facebook page is displayed. Time to dive in.

TLDR

Facebook deprecated the Like-Box so I changed the plugin to use the Page Plugin.

PHP (again)

No, I’m not changing my profession to PHP developer. But being a developer I’m curious about other languages and solving problems. A WordPress plugin is mostly a PHP file that is included in the execution stack as is the case with the Facebook plugin.

In the Facebook developer documentation I read that the Like-Box plugin is deprecated. The best alternative is the Page Plugin. It offered a working customizable sample. I combined the new code with the existing PHP and ended up with the changes described below. Complete script for download at the end of this post.

<?php
/* Add v2.3 Facebook script */
echo '<div id="fb-root"></div>
 <script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, \'script\', \'facebook-jssdk\'));</script>';
?>

/* changed class from like-box to fb-page */
<style type="text/css">
	#be-it-sidetab .fb-page {
	    background: #<?php echo $fb_bg_color; ?>;
	  	width: <?php echo $WPlize->get_option('fb_width'); ?>px;
	  	height: <?php echo $WPlize->get_option('fb_height'); ?>px;	
	  	overflow: hidden;       
	} 
</style>

/* changed from like-box to fb-page */
<div class="fb-page" 
     data-href="<?php echo $WPlize->get_option('fb_data_href'); ?>" 
     data-width="<?php echo $WPlize->get_option('fb_width'); ?>" 
     data-height="<?php echo $WPlize->get_option('fb_height'); ?>" 
     data-hide-cover="<?php echo $WPlize->get_option('fb_show_header'); ?>"
     data-show-facepile="<?php echo $WPlize->get_option('fb_show_faces'); ?>" 
     data-show-posts="<?php echo $WPlize->get_option('fb_show_stream'); ?>">

A little note about the code above. The previous implementation used the “Show Header” option which is now used to set the “Hide Cover” option. I could negate the value …

References

Facebook page plugin developer documentation and working samples
frontend.php with all the changes. I’ve also send this to the developers at be-it.se for updating the plugin.