像时间线页面选项卡中的详细页面

时间:2012-04-17 11:10:13

标签: facebook-graph-api redirect facebook-like facebook-apps facebook-timeline

我有一个Facebook时间线页面标签应用程序,它在粉丝页面上的IFRAME中运行。

在应用程序的主页面上,我们会显示10个作业,用户可以点击进入一本书的详细信息页面。

我们希望在这些详细信息页面上添加一个LIKE按钮,以便facebook上的用户可以在他们的流中喜欢并分享该作业。

该应用程序非常动态,因此不同的客户可以在其粉丝页面上安装该应用并列出自己的工作。 (例如,可口可乐将它安装在他的可口可乐页面上,并在公司内部列出工作。然后微软安装它并做同样的事情)

问题涉及og:metatags和重定向喜欢的详细信息页面链接,正确的facebook公司页面和显示作业的相对右侧详细信息页面。

我可以完成这两件事,但不能同时工作:

一个。 Facebook使用以下类似按钮的实现(没有“data-href”额外属性)正确地获取头部中的og:metatags,图像,标题,描述

    <div class="fb-like"  
             data-send="false" 
             data-layout="button_count" 
             data-show-faces="false" 
             data-action="like" 
             data-font="arial">
    </div>

问题是没有指定data-href属性(并且og:url meta被完全忽略),这将创建一个指向当前页面的链接=&gt; iframe中的当前页面=&gt;因此,结果将是当您单击Facebook上的共享作业时,您将被重定向,而不是在facebook app -right page -right详细信息页面内,而是重定向到托管应用程序的服务器上的详细信息页面。

B中。如果我改为指定data-href属性

   <div class="fb-like"  
             data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{@job_details.job_id}" %> 
             data-send="false" 
             data-layout="button_count" 
             data-show-faces="false" 
             data-action="like" 
             data-font="arial">
    </div>

这样做我可以在Facebook上发布正确的链接(然后使用&amp; app_data属性)我可以获得完美的重定向工作。 但是在缺点方面,og:metatags完全被忽略,而facebook则选择页面选项卡metatags(托管页面框应用程序的顶级iframe),因此我在facebook上发布了一个废话链接,告诉Facebook页面应用程序的页面图片。更大的缺点是,当你喜欢应用程序上的工作时,所有工作似乎也都很受欢迎(基本上iFrame应用程序成为喜欢的页面......而不是选择作为喜欢页面的工作细节页面)< / p>

有没有天才知道如何解决这个问题?我需要让A和B同时工作以获得所要求的结果!!!!

请帮忙!!! :(

1 个答案:

答案 0 :(得分:2)

我自己找到了解决方案。

  • 赞按钮=&gt;使用href和ref属性,特别是在你的facebook粉丝页面的id上加上ref。传递当前页面URL也将正确加载和共享og:元标记。

        <div class="fb-like" 
              data-send="false"
              data-show-faces="false"
              data-layout="button_count"
              data-font="arial"
              data-action="recommend"
              href=<%= "https://app.com/jobs/job_details.job_id" %>
              ref=<%= FB_PAGE_ID %>>
        </div>
    

一旦你将ref属性传递给facebook,你的墙上就会发布一个链接,并附上额外的查询字符串,特别是“fb_ref”参数:

例如带参数的按钮: href =&lt;%=“https://app.com/jobs/job_details.job_id”%&gt; 和 ref =&lt;%= 332325142248470%&gt;

变为: https://app.com/jobs/a0Ed000000a54bkEAA?fb_ref=332325142248470&fb_source=profile_multiline

  • 当用户点击我们想要在正确的页面标签应用程序和正确的作业详细信息页面内重定向的链接时。为了实现这一点,我们设置了一个控制器/ show动作(在ruby corrisponds到controller_name / id)一个新的重定向,记住ref将放在我们的href链接之后的查询字符串中:

     if params[:fb_ref]
        redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
     end
    

正如您所看到的,我们创建了一个新的动态网址,它将使用facebook“signed_riquest”(http://developers.facebook.com/docs/authentication/signed_request/)的“app_data”参数传递给我们的应用程序可以显示正确的详细信息页面,并将我们重定向到正确的Facebook页面。

  • 完成此操作后,我们只需正确管理signed_request现在出现的新app_data参数。在我的情况下,我使用了一个主控制器:

          if fb_signed_request[:app_data]             
            redirect_to "/jobs/#{session[:app_data]}"
          end
    

我们将看到我们的应用加载了正确的页面和正确的工作明细页面!

希望会帮助其他人!

相关问题