Question

我已经搜索了这个问题，但还没有找到关于这个问题的明确答案。 This question helped me the most，但我仍然无法使用“赞”按钮将图片发布到用户的时间轴。

在我的网站的几个页面上，例如：/ apple / my-gallery，共有10张照片。我正在使用Fancybox作为图片查看器。我的目的是在每张幻灯片上添加一个Like按钮，以允许用户喜欢图像，并将该活动记录在他们的时间轴上。

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

我正在使用iFrame Like按钮，并抓住一个像这样的唯一图片网址：

// 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的组合来构建一个唯一的网址：

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开发者仪表板上的“app”。应用程序域设置为example.com，在“与Facebook集成”下，我选择了“具有Facebook登录的网站”，站点URL为http://example.com（请注意添加协议）。我没有进行任何其他配置更改。沙箱模式已关闭。

好的，最后一点是修改引用网址上的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']; ?>" />

根据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的调试器来检查{{3我得到了所有预期的值，包含图像。

如果我首先抓住该网址，然后像图片一样，图片会出现在我的时间轴上。我不知道以编程方式linting每个查询字符的URL是一个选项。

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

Fancybox Gallery中的独特按钮

0 个答案: