喜欢时间轴页面选项卡内的详细信息页面答案

【问题标题】：like detail page inside timeline page tab喜欢时间轴页面选项卡内的详细信息页面
【发布时间】：2012-04-28 17:23:41
【问题描述】：

我有一个 Facebook 时间线页面选项卡应用程序，它在粉丝页面的 IFRAME 中运行。

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

我们希望在这些详细信息页面上添加一个 LIKE 按钮，以便 Facebook 上的用户可以在他们的信息流中点赞和分享该工作。

该应用程序是完全动态的，因此不同的客户可以在他们的粉丝页面上安装该应用程序并列出他们自己的工作。（例如，可口可乐将它安装在他的可口可乐页面上并列出公司内的工作。然后微软也安装它并做同样的事情）

问题涉及 og:metatags 和点赞详情页面链接的重定向，位于右侧 facebook 公司页面和显示工作的相关右侧详情页面内。

我可以完成这两项工作，但不能同时完成：

A.当我使用类似按钮的以下实现（没有“data-href”额外属性）时，Facebook 正确获取了头部部分中的 og:metatags，包括图像、标题、描述（没有“data-href”额外属性）

    <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 元被完全忽略）这将创建一个指向当前页面的链接 => iframe 内的预期当前页面 => 所以结果将是当您在 facebook 上单击共享作业时，您将不会被重定向到 facebook 应用程序 - 右页面 - 右详细信息页面内，而是重定向到托管应用程序的服务器上的详细信息页面。

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 上发布正确的链接（然后使用 &app_data 属性）我可以获得完美的重定向工作。但不利的一面是， og:metatags 完全被忽略了，而是 facebook 选择了页面选项卡元标记（托管 pagetab 应用程序的顶部 iframe），所以我在 facebook 上发布了一个废话链接，该链接讲述了 facebook 上带有页面应用程序的页面图片。更大的缺点是，当您喜欢应用程序上的工作时，所有工作似乎也都被喜欢（基本上 iFrame 应用程序成为喜欢页面......而不是被选为喜欢页面的工作详细信息页面）

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

请帮忙！！！ :(

【问题讨论】：

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

【解决方案1】：

我自己找到了解决方案。

点赞按钮 => 使用 href 和 ref 属性，尤其是在 ref 上放上你的 facebook 粉丝页面的 id。传递当前页面 url 也将正确加载和共享 og:metatags。

    <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，该链接将由 facebook 在您的墙上发布，并附加一个额外的查询字符串，特别是“fb_ref”参数：

例如一个带有参数的按钮： href= 和参考=

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

当用户单击我们想要重定向回正确页面选项卡应用程序和正确工作详细信息页面内的链接时。为了实现这一点，我们在 controller/show 操作（在 ruby 中对应于 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
```

如您所见，我们创建了一个新的动态 url，它将使用 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
```

我们将看到我们的应用正在加载正确的页面和正确的工作详细信息页面！

希望能帮助其他人！

【讨论】：