谁能帮我处理 Facebook 的 iframe 标签页？ [关闭]

Question

谁能帮我写代码？我真的不知道如何编写这样的代码（我完全是网络编程的菜鸟）

我想在我的 Facebook 上创建一个包含粉丝和非粉丝内容的欢迎（又名登陆）页面。

非粉丝内容将是 IMG_1.JPG 用户点击“喜欢”并看到下一张图片 (IMG_2.JPG) 几秒钟，然后我的网站出现。 IMG_2.jpg 应该只在用户点击“喜欢”按钮后出现一次。下次当他访问我的粉丝页面时，他会查看我的 Facebook 网站。

在下面查看我的图片：

http://i.imgur.com/iH8ywjz.jpg

Answer 1

您要达到的目标称为“Like-gating”或“Fan Gating”。为此，您需要插入 Facebook SDK，该 SDK 可在此处轻松获得：http://developers.facebook.com/docs/sdks/
在您开始之前，有一些重要的基础知识需要了解您的建议。正如您所说，您是一个“完全的菜鸟”，所以其中一些可能对您来说难以工作和排除故障。
1) 您需要对 PHP 有基本的工作理解。
2) 您需要对 javascript 和/或 jQuery 等 js 库有基本的了解。

我也没有得到你的一些问题，所以我将对订单做出以下假设。
1) 非粉丝会显示 IMG_1.jpg
2) 非粉丝点赞后，IMG_2.jpg会显示3秒。
3) 非粉丝将被带到您的实际网站（远离 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）。您将首先在标头之前调用 Facebook SDK（使用您的应用程序 ID 和 api 密钥）。我在标头之前执行此操作，因为有时如果我使用 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) 插入类似 Javascript 的 SDK 并使用 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>

这是基本的外线。这并不难，但它不适合一个完整的初学者。我提供的链接上有很多文档。祝你好运。