WordPress facebook plugin fixed

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.


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.

/* 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;       

/* 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 …


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.

About erictummers

Working in a DevOps team is the best thing that happened to me. I like challenges and sharing the solutions with others. On my blog I’ll mostly post about my work, but expect an occasional home project, productivity tip and tooling review.
This entry was posted in Tooling and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.