あなたが達成しようとしていることは、「Like-gating」または「FanGating」と呼ばれます。これを行うには、ここからすぐに利用できるFacebook SDKにプラグインする必要があります。http://developers.facebook.com/docs/sdks/
始める前に、提案した内容について知っておくべき重要な基本事項がいくつかあります。 。あなたが言ったように、あなたは「完全な初心者」なので、これのいくつかはあなたが仕事をしたりトラブルを起こしたりするのが難しいかもしれません。
1)PHPの基本的な実用的な理解が必要です。
2)javascriptやjQueryなどのjsライブラリの基本を理解している必要があります。
私もあなたの質問のいくつかを受け取らなかったので、私は注文に関して以下の仮定をするつもりです。
1)ファン以外の人にはIMG_1.jpgが表示されます
2)ファン以外の人がページを高く評価すると、IMG_2.jpgが3秒間表示されます。
3)ファン以外の人は、実際のWebサイト(Facebookから離れた場所)に移動します。
4)ファンは自動的にあなたのウェブサイトに誘導されます(Facebookから離れて)。
ウェブサイトをタブに表示する場合は、もちろん幅が810ピクセル未満である必要があり、以下のelseステートメントのコンテンツを読み込むだけです。
まず、同様のゲートを作成します
。https://developers.facebook.com/apps
にアクセスし、手順に従ってタブを作成する方法を既に知っていると思います。それは質問の範囲外なので、私はそれには入りません。
タブを作成すると、アプリID/APIキーとアプリシークレットが作成されます。
1)アプリケーションがホストされているサーバーにFacebook PHP SDKをインストールする必要があります。これは、Facebook SDK Githubから入手できます:https ://github.com/facebook/facebook-php-sdk-インストールする必要がありますSRCフォルダー全体。
2)アプリケーション(phpベースになります)。ヘッダーの前に(アプリIDとAPIキーを使用して)FacebookSDKを呼び出すことから始めます。CMSを使用している場合と同じように、ヘッダーの前でこれを行います。Cookie/ヘッダーの問題が発生します。そして、署名されたリクエストを取得します。これは、その人がFacebookページを気に入ったかどうかです。
これは次のように行われます。
<?php
require 'facebook-php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId' => 'xxxYourAppIdInHerexxx',
'secret' => 'xxxYourSecretInHerexxx',
));
$signed_request = $facebook->getSignedRequest();
?>
これで、ページを作成するために必要なすべての情報が得られました。したがって、そこからphp ifステートメントを使用して、その人がそのページを気に入っているかどうかを確認し、それに応じて指示することができます。
<?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
}
?>
これが基本的な設定です。
二つ目は、一時的にいいねをしてから画像を切り替えることです
ユーザーがページを高く評価すると、親ウィンドウ全体が更新されるため、これは少し難しくなります。
画像を交換するには、いくつかのオプションがあります
。1)セッションやCookieを使用して訪問をカウントし、最初の訪問時にのみ画像を表示します。
2)SDKのようなJavascriptにプラグインし、ユーザーがアプリケーションの「いいね」ボタンをクリックするためのonClick関数を使用します。関数は次のようになります。
<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>
それが基本的なアウトラインです。難しいことではありませんが、完全な初心者向けではありません。私が提供したリンクにはたくさんのドキュメントがあります。幸運を祈ります。