facebookファンページのいいね！を押してファンになった人にだけ画像を見せる方法

facebookファンページのいいね！を押してファンになった人にだけ画像を見せることを以前からやりたかったのでやってみました。

どこのサイトもFBMLのタグの記載はあるのですが、

肝心のCSSを使って画像を重ねて表示させるとこが書いてなかったので、自力で作ってみました。

CSS使って、画像を重ねて、

いいね！を押してファンになった人に画像２を見せてあげます！

<div class="iine">
<fb:visible-to-connection>
<img class="iine-comp" alt="画像２の画像名" src="画像２の画像URL">
<fb:else>
<img class="iine-ready" alt="画像１の画像名" src="画像１の画像URL">
</fb:else>
</fb:visible-to-connection>
</div>

<style type="text/css">
.iine {
 position: relative;
 width: 520px;
 height: 530px;
}
.iine-ready {
 width: 520px;
 height: 530px;
}
.iine-comp {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 520px;
 height: 530px;
}
</style>

IEだとなぜかいいね押す前の画像が下にいくバグがあります。。

 

今後もフェースブックのファンページに関しては勉強していこうと思います！