Code shows up instead of beautiful little widget

I have just installed this plugin and the same is happening for me too:

src=”//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fsonnarelemusic&
width=&
height=&
colorscheme=light&
show_faces=true&
stream=true&
header=true&
border_color=%23″
scrolling=”no”
frameborder=”0″
style=”border:1px solid #; overflow:hidden; width:px; height:px;” allowTransparency=”true”>

I fixed this (it’s an issue with the <iframe> tag not being formatted correctly with whitespaces) and then updated the plugin and it broke again. I will post the fix in a moment.

Warning: Back your wordpress site up before you make any changes to source code no matter what. For our purposes we are just modifying the source code of this plugin.

This is a temporary fix until the developer changes the plugin to reflect these changes. So know that if that doesn’t happen and another upgrade occurs that these changes will be lost and you will need to implement them again. Please only attempt this if you understand the instructions. Broken PHP code can whitescreen your site.

Workflow:
Go to plugins page -> find Facebook Like Box -> find the ‘edit’ link under it -> opens a WYSIWYG editor to some php/html code (the file that it should of opened to was “cardoza-facebook-like-box/cardoza_facebook_like_box.php”)

Search (command+f in OSX) for: iframe
There are several of them throughout the file but you will be looking for 2 blocks of code.

First one will look like: (Important: actually the way this code renders in this forum is not the way it looks like in the source, so you’ll need to do some eyeballing to find this code)

<iframe
	src="//www.facebook.com/plugins/likebox.php?href=<?php echo $option_value['fb_url'];?>&width=<?php echo $option_value['width'];?>&height=<?php echo $option_value['height'];?>&colorscheme=<?php echo $option_value['color_scheme'];?>&show_faces=<?php echo $option_value['show_faces'];?>&stream=<?php echo $option_value['stream'];?>&header=<?php echo $option_value['header'];?>&border_color=%23<?php echo $option_value['fb_border_color'];?>"
        scrolling="no" frameborder="0" style="border:1px solid #<?php echo $option_value['fb_border_color'];?>; overflow:hidden; width:<?php echo $option_value['width'];?>px; height:<?php echo $option_value['height'];?>px;" allowTransparency="true">
	</iframe>

You need to reformat this block this way: (same issue as above, the code doesn’t render correctly in this forum. What you need to do is just copy/paste this code over the above block of code. This code is devoid of whitespace which is what was breaking the plugin functionallity)

<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo $option_value['fb_url'];?>&width=<?php echo $option_value['width'];?>&height=<?php echo $option_value['height'];?>&colorscheme=<?php echo $option_value['color_scheme'];?>&show_faces=<?php echo $option_value['show_faces'];?>&stream=<?php echo $option_value['stream'];?>&header=<?php echo $option_value['header'];?>&border_color=%23<?php echo $option_value['fb_border_color'];?>" scrolling="no" frameborder="0" style="border:1px solid #<?php echo $option_value['fb_border_color'];?>; overflow:hidden; width:<?php echo $option_value['width'];?>px; height:<?php echo $option_value['height'];?>px;" allowTransparency="true"></iframe>

The Second one (which is almost directly under the above block of code looks like: (this code actually renders really well. It looks a lot like you see it here)

<iframe
    src="//www.facebook.com/plugins/likebox.php?href=<?php echo $option_value['fb_url'];?>&
    width=<?php echo $option_value['width'];?>&
    height=<?php echo $option_value['height'];?>&
    colorscheme=<?php echo $option_value['color_scheme'];?>&
    show_faces=<?php echo $option_value['show_faces'];?>&
    stream=<?php echo $option_value['stream'];?>&
    header=<?php echo $option_value['header'];?>&
    border_color=%23<?php echo $option_value['fb_border_color'];?>"
    scrolling="no"
    frameborder="0"
    style="border:1px solid #<?php echo $option_value['fb_border_color'];?>; overflow:hidden; width:<?php echo $option_value['width'];?>px; height:<?php echo $option_value['height'];?>px;" allowTransparency="true">
    </iframe>

It should look like this: (copy/paste the below code over the above code block, again, this is devoid of whitespace)

<iframe src="//www.facebook.com/plugins/likebox.php?href=<?php echo $option_value['fb_url'];?>&width=<?php echo $option_value['width'];?>&height=<?php echo $option_value['height'];?>&colorscheme=<?php echo $option_value['color_scheme'];?>&show_faces=<?php echo $option_value['show_faces'];?>&stream=<?php echo $option_value['stream'];?>&header=<?php echo $option_value['header'];?>&border_color=%23<?php echo $option_value['fb_border_color'];?>" scrolling="no" frameborder="0" style="border:1px solid #<?php echo $option_value['fb_border_color'];?>; overflow:hidden; width:<?php echo $option_value['width'];?>px; height:<?php echo $option_value['height'];?>px;" allowTransparency="true"></iframe>

Click the ‘Update File’ button afterwards.

Thanks Sjourney!

I don’t understand why the author doesn’t fix this issue :\

I believe the author might be unavailable or have abandoned/forgotten about this plugin.

(BTW, I have posted a fix in case someone interested – [Patch] Enqueue style and script only when used in Dashboard)