2

我到处搜索，但还没有找到关于这个问题的明确答案。这个问题对我的帮助最大，但我仍然无法让“赞”按钮将图像发布到用户的时间轴。

在我的网站 example.com/gallery/my-gallery 的几个页面上，有 10 张照片。我使用Fancybox作为图像查看器。我的意图是在每张幻灯片上设置一个“赞”按钮，以允许用户赞该图像并将该活动记录在他们的时间轴上。

使用带有唯一查询的编码 URL，我可以让活动记录在时间线上，但问题是图像不会显示，除非我首先使用 FB 的调试器对自定义 URL 进行 Lint。

我正在使用 iFrame Like 按钮并获取一个独特的图像 URL，如下所示：

// Inside my call to Fancybox, I am using two event listeners
beforeLoad : function(){
    var that = this

    // this/that is the absolute url to the image.
    // I split it off into a variable img that I will use as a query string.
    a = function(){
        var url = that.href
        var img = url.split("http://example.com").pop()
        return img
    }
},
afterLoad : function(e){
    // argument "e" lets me dig in and the current Gallery URL 'example.com/gallery/my-gallery' 
    var galUrl = e.parent.context.URL
    // now I have pathToImg that I can use as a query string
    var pathToImg = a()

好的，现在我使用galUrl和的组合pathToImg来构建一个唯一的 url：

var thisURL = encodeURIComponent(galUrl + '?' + pathToImg)

// still in afterLoad() at this point, so I dynamically create a Like button with the proper parameters
<iframe src="//www.facebook.com/plugins/like.php?href=' + thisURL + '&amp;send=false&amp;layout=button_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=segoe+ui&amp;height=21&amp;appId=########" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>

FWIW，appID 参数 ( ########) 链接到 FB 开发人员仪表板上的“应用程序”。应用程序域设置为 example.com，在与 Facebook 集成下，我选择了“使用 Facebook 登录的网站”，站点 URL 为http://example.com（注意添加的协议）。我没有进行其他配置更改。沙盒模式已关闭。

好的，最后一点是修改引用 url 上的 OG 标签（thisURL解析为）。您可能知道也可能不知道，FB 会将其 OG 解析器发送到 href 参数中提供的 url，它看起来像http://example.com/gallery/my-gallery?/path/to/image.jpg (但它实际上是 URL 编码的）。我在我的元标记中使用 PHP 来提供提取查询字符串并向 FB 显示我希望它看到的内容。

<meta property="og:type" content="article" />
<meta property="og:image" content="<?= "http://example.com".$_SERVER['QUERY_STRING']; ?>" />
<meta property="og:url" content="<?= "http://example.com".$_SERVER['REQUEST_URI']; ?>" />

给定一个类似 的 URL http://example.com/gallery/my-gallery?/path/to/image.jpg，og:image标签解析为http://example.com/path/to/image.jpg并且og:url标签解析为http://example.com/gallery/my-gallery?/path/to/image.jpg。

这是在 CMS（ExpressionEngine）上，因此该块实际上被包装在条件中。

我的其他元标记：

<meta property="og:title" content="WEBSITE TITLE - {embed="includes/page-title segment='{segment_1}'"}" />      
<meta property="og:description" content="WEBSITE DESCRIPTION">
<meta property="og:site_name" content="WEBSITE NAME" />
<meta property="fb:app_id" content="#########" />

现在，当我喜欢一张照片时，我会在我最近在我的 Facebook 个人资料上的活动中看到它，其中包含所有预期的 OG 标签，除了图像。当我使用 FB 的调试器检查http://example.com/gallery/my-gallery?/path/to/image.jpg时，我得到了所有的预期值，包括图像。

如果我先对那个 url 进行 lint，然后像图像一样，图像确实会出现在我的时间线上。我不知道以编程方式检查每个查询字符串 url 是一种选择。

几乎我的智慧结束了。有人可以帮忙吗？

4

0 回答 0