WordPress facebook plugin fixed

wordpress-logo-stacked-rgb
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.

About erictummers

My work as a recruited developer changes almost every month. 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s