How to add a Facebook Like button to Flash?

This tutorial will guide you how to add a Facebook Like button to Flash.

How does it work?

Actually, it's nearly impossible to directly add a Facebook Like button to Flash. In this tutorial, we will use two CSS DIV layers to get the nearly same result.

The first DIV layer shows the Flash banner, another DIV layer contains the Facebook Like button, then we use the z-index and position CSS properties to let the second DIV layer floating on top of the first DIV layer.

An example is as following:

 

 

HTML source code and Facebook Like button

The modified HTML source code is as following:

<div style="width:560px; height:180px; position:relative;">

<div style="position:absolute; z-index:1;">
<embed src="flashbanner2.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" wmode="transparent" align="middle" width="560" height="180"></embed>
</div>

<div style="position:relative; top:8px; left:8px; z-index:2;">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/html5box" show_faces="true" width="450"></fb:like>
</div>

</div>

The DIV layer <div style="width:560px; height:180px; position:relative;"> is the whole container.

The DIV layer <div style="position:absolute; z-index:1;"> contains the Flash banner.

The property z-index defines the stack order of the DIV. We set its value to 1, and set the value of the following Facebook like button DIV to 2, so the button can be on top of the Flash banner.

The DIV layer <div style="position:relative; top:8px; left:8px; z-index:2;"> contains the Facebook Like button.

We set its property z-index to 2, so it will be on top of the Flash banner. We set its position to relative, and then use top and left to define its position related to the Flash banner.