任何人都可以帮助我使用Facebook的Iframe标签吗?

时间:2013-02-21 09:06:42

标签: facebook iframe facebook-page

任何人都可以帮我编码吗?我真的不知道如何编写这样的东西(我是网络编程的完整菜鸟)

我想在我的脸书上用粉丝和非粉丝内容创建一个welocome(又名登陆)页面。

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

检查下面的图片:

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

1 个答案:

答案 0 :(得分:3)

您要实现的目标称为“喜欢门控”或“粉丝选通”。要做到这一点,你需要插入Facebook SDK,这些都可以在这里找到:http://developers.facebook.com/docs/sdks/
在开始之前,您需要了解一些重要的基础知识。正如你所说的那样,你是一个'完整的菜鸟',所以有些事情可能很难让你工作和麻烦拍摄。
1)您需要对PHP有基本的工作理解 2)您需要对javascript和/或js库(如jQuery)有基本的了解。

我也没有得到你的一些问题,所以我将对订单做出以下假设。
1)非粉丝将显示IMG_1.jpg 2)一旦非粉丝喜欢页面,IMG_2.jpg将显示3秒钟 3)非粉丝将被带到您的实际网站(远离Facebook) 4)粉丝将自动转到您的网站(远离Facebook)
如果您打算将您的网站显示在选项卡中,那么它当然必须小于810px宽,您只需在下面的else语句中加载内容。

首先是创建类似的门:
我假设您已经知道如何通过转到https://developers.facebook.com/apps并按照步骤创建标签。这超出了问题的范围,所以我不会进入它。

创建选项卡后,您将获得app id / api密钥和app secret。

1)您需要在您的应用程序所在的服务器上安装Facebook PHP SDK,这可以从Facebook SDK Github获得:https://github.com/facebook/facebook-php-sdk - 您需要安装整个SRC文件夹。

2)在您的应用程序(将基于PHP)。您将首先在标题之前调用Facebook SDK(使用您的app 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)插入像SDK这样的Javascript,并使用onClick函数让用户单击应用程序中的like按钮。该功能可能会是这样的。

   <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>

这是基本的出线。这并不困难,但并不是一个完整的初学者。关于我提供的链接有很多文档。祝你好运。