Transform a transparent PNG to white-background JPG using PHP GD

It seems like Facebook doesn’t handle transparent PNG files very well (they’re transformed into JPG without handling the transparent background, which ends up as a weird black background), so we needed to transform it ourselves to a white-background JPG to make it display well:

function imagetranstowhite($trans) {
	// Create a new true color image with the same size
	$w = imagesx($trans);
	$h = imagesy($trans);
	$white = imagecreatetruecolor($w, $h);

	// Fill the new image with white background
	$bg = imagecolorallocate($white, 255, 255, 255);
	imagefill($white, 0, 0, $bg);

	// Copy original transparent image onto the new image
	imagecopy($white, $trans, 0, 0, 0, 0, $w, $h);
	return $white;
}

Can be used like that:

// Open original PNG image
$png = imagecreatefrompng($path);
// Transform to white-background JPEG
$jpg = imagetranstowhite($png);
// Save new image
imagejpeg($jpg, $new_path);

How to hide Facebook’s Like Box social plugin border

I was trying to make my own rounded-colored-cooler-looking border for the Like Box social plugin, and Facebook’s default border was getting in the way.

That’s what I eventually used:

<div id="likebox" style="background-image: url(../images/likebg.png); width: 286px; height: 156px; padding: 7px;">
	<div id="likebox-frame" style="width: 286px; height: 156px; overflow: hidden;">
		<iframe style="width: 288px; height: 155px; margin: -1px -4px 0 -4px;" frameborder="0" border="0" src="http://www.facebook.com/plugins/likebox.php?id=185550966885&amp;width=300&amp;connections=5&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
	</div>
</div>

So – what does it do?

• We have the #likebox element that sets the background image (that has rounded borders) and some padding, so the content won’t hide the border.
• The #likebox-frame element is just a dummy container to make the negative margins on the actual iframe (see below) work while the padding of #likebox still pushes the content inside. it needs height/width of the actual likebox content after removing the borders, which should be the same as #likebox inner height/width
• And now – for the actual iframe – we have 4 borders that facebook adds inside the iframe to hide. The top/left borders are hidden with a negative margin (top margin of -1px and left margin of -4px”) and the bottom/right borders are hidden because the iframe is bigger than its container – so it pushes it outside and the #likebox-frame overflow:hidden takes care of hiding it.

That’s it. Worked out quite nicely.