Facebookページで「いいね！」が押されたら画像を切り替える！画像の上にログイン名を出す！

今回、Facebookページを作る機会があって色々といじってみました。

作る機会があったというか、興味が当ていじりまくってた感じですがｗ

私がやりたかった事として、以下の2点です。

• 「いいね！」ボタンを押されたら画像を切り替える
• ログインしている人の名前が出せるようなので名前の表示

名前の表示は、まともに使えるようであれば使おうと思っていました。「いいね！」ボタンをおしたら画像が切り替わるってのは他の方が既にやっていたりしたので参考にしました。

まず、画像の切り替え方ですが、FMBLを利用していきます。

なお、こんなニュースが有りましたが、あえて今のうちに作成してみました。

フェイスブック、「FBML」を廃止へ: インターネット広告のひみつ – ブログ

まず、ファンのみの表示と全員に表示と切り替えるには以下のタグを使います。

<fb:fbml version="1.1">
<fb:visible-to-connection>
あなたはファンのかたですね？どうぞこれからもよろしく！
<fb:else>
こんにちわ。ファンになって貰えれば最新情報が受け取れますよ！
</fb:else>
</fb:visible-to-connection>
</fb:fbml>

タグの中の文字を書き換えたり、すればそれで速攻完了です。

ただ、よく読んでください。「ファンのみ」と「全員」です。実はコレ、ファンになったとしても「全員」のほうは表示されてしまいます。（elseとか書いてあるので、どちらかしか出ないかと思いきやそうでは無いのですね…）

文章の代わりに画像タグを入れてやれば、「いいね！」を押したときに表示される画像は再現できます。ただ、「全員」のほうも表示されてしまいますので、そこはCSSを使って、ファンのみに表示される画像を「position:absolute;」にして、全員の画像の上に重ねるように表示します。

これをするだけで、「いいね！」を押したときに画像が入れ替わる処理は対応完了です。

次に画像の上に名前を表示したいので、名前表示タグを設置します。

<fb:fbml version="1.1">
<fb:visible-to-connection>
<fb:userlink uid="loggedinuser" ifcantsee="GUEST" />
<fb:else>
<fb:userlink uid="loggedinuser" lastnameonly="true" ifcantsee="GUEST" />
<fb:if-is-app-user><fb:else>Guest</fb:else></fb:if-is-app-user>
</fb:else>
</fb:visible-to-connection>
</fb:fbml>

まず、ファンのみの場合のほうですが、“ファンの人”という判断できるのはログインされてる場合のみなので、そのまま名前の表示をしてあげます「<fb:userlink uid=”loggedinuser” />」ですぐ表示が出来ます。

ただ、全員が見えるページで名前の表示をしたい場合ですが、ログインしていない可能性もあり、その場合空白の名前となってしまいます。なので、その場合は「GUEST」として表示されるようにしていきます。

（「fb:userlink」に「ifcantsee=”GUEST” 」という要素を持たせていますが、これは現状うまく機能していないようです？よくわかりません。。。誰か教えてください！）

もしログインしていない人の名前は「<fb:if-is-app-user><fb:else>Guest</fb:else></fb:if-is-app-user>」と記述することで再現することが出来ました。

以上のことを踏まえて、作成したページがこのファンページです。

▼クチコミBeautyのFacebookページ（ファンページ）

※是非とも「いいね！」を押してみてください。