【Facebook】「いいね！」ボタンを押した後の画像の切り替え方法

浅沼 (2011年7月 1日 10:00)
Webｺﾝｻﾙﾃｨﾝｸﾞ部

今回は「いいね！」ボタンを押したユーザーにのみ、別の画像を見せる方法を紹介します。
Facebookでは、多数の企業がFacebookページで「いいね！」を押す前と、押した後で表示する画像を切り替えています。

今回は、FBMLを使っている場合の画像切り替え方法をご紹介します。

1.画面右上の「Facebookページを編集」から「アプリ」をクリック。
「Facebookページを編集」をクリック

2.アプリケーションの一覧が表示されるので、画像を表示させているアプリの「アプリケーションへ移動」をクリック。
「アプリケーションへ移動」をクリック<br />

3.「FBML」の中のソースを変更し、「変更を保存」をクリック。
「FBML」の中を編集

・変更前のソースがこちら

・以下のように変更します。

変更後のソースは、「いいね！」を押した場合、押していない場合に表示させる画像を指定しています。

この時の注意点は、2点あります。
・「いいね！」を押した場合、押していない場合の画像は同じサイズに合わせること。
・「いいね！」を押した場合の画像のスタイルに"position:absolute;"をつけること。

これで、「いいね！」を押した場合と、押していない場合の画像が切り替わるようになります。

最後に「いいね！」を押す前と、押した後の画像を切り替えているFacebookページを紹介します。

◇Crystal Ball Japanさん
・「いいね！」を押す前

・「いいね！」を押した後

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。