What you are trying to achieve is called 'Like-gating' or 'Fan Gating'. To do this you need to plug into the Facebook SDK's which are readily available here: http://developers.facebook.com/docs/sdks/
Before you get started there are a few important base things to know with what you've proposed. As you've said you're a 'complete noob' so some of this may be difficult for you to work and trouble shoot.
1) You will need to have a basic working understanding of PHP.
2) You will need to have a basic understanding of javascript and/or a js library such as jQuery.
I also didn't get some of your question so I'm going to make the following assumptions on the order.
1) A non fan will have IMG_1.jpg shown
2) Once the non fan likes the page, IMG_2.jpg will be shown for 3 seconds.
3) The non fan will be then taken to your actual website (away from facebook).
4) Fans will automatically be directed to your website (away from facebook).
If you intended for your website to be shown in the tab, then of course it will have to be less than 810px wide and you would just load the content in the else statement below.
First is creating the like gate:
I assume you already know how to create a tab by going to https://developers.facebook.com/apps and following the steps. That's outside of the scope of the question so I won't go into it.
Once you've created your tab you will have your app id/api key and app secret.
1) You will need to install the Facebook PHP SDK on the server where your application is being hosts which is available from the Facebook SDK Github here: https://github.com/facebook/facebook-php-sdk - you need to install the entire SRC folder.
2) In your application (which will be php based). You will start by calling the Facebook SDK (using your app id and api key) before the header. I do it before the header as sometimes if I'm using a CMS I run into cookie/headers issues. And get the signed request. This is if the person has liked the facebook page or not.
This is done like so:
<?php
require 'facebook-php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId' => 'xxxYourAppIdInHerexxx',
'secret' => 'xxxYourSecretInHerexxx',
));
$signed_request = $facebook->getSignedRequest();
?>
We now have all of the information we need to build the page. So from there we can use a php if statement to see if the person likes the page or not like so and direct them accordingly.
<?php
if ( $signed_request['page']['liked'] ) //The user likes your page then:
{
header( 'Location: http://www.yoursite.com/' ) ;
//If you wanted the site to appear in the iframe then you would just call your index.html or load the content in here.
}
else //The user doesn't like your page then:
{
echo '<img src="IMG_1.jpg">';
//This will show IMG_1 on the page
}
?>
This is the basic setup.
Second is switching the image after a like temporarily
This is slightly more difficult because once the user has liked your page then the whole parent window is refreshed.
To swap the image you have a couple of options:
1) Use sessions and/or cookies to count visits and only show the image on the 1st visit.
2) Plug into the Javascript like SDK and use an onClick function for the user to click a like button in your application. The function could go something like this.
<img src="IMG_1.jpg" class="img1">
<img src="LikeMe.jpg class="likeme">
<img src="IMG_2.jpg" class="img2">
.img1 {position:relative; display:block; z-index:0}
.img2 {position:relative; display:none;}
.likeme {position:relative; display:block; z-index:10;}
/* img 2 is hidden, img 1 is shown, like image is over the top of image 1 */
<script type="text/javascript"> // Using jQuery here
$('likeme').click(function(){
$(this).hide(); // Hide the likeme img
$('.img1').hide(); // Hide img 1
$('.img2').show(); // Show img 2
setTimeout(function(){
//Run your script to like the page
},3000); //Run the like script after 3 seconds.
});
</script>
That's the basic out line. It's not difficult, but it's not for a complete beginner. There's lots of documentation on the links I've provided. Best of luck.
