javascript - Sharrre - Facebook 数据文本和数据 url 未显示在多个按钮上

Question

早些时候，我只将 Sharrre 用于每页的一个按钮集，并且效果很好。但是，我不得不改变它，现在我有 4 组按钮，并且 data-text 和 data-url 值没有显示在 facebook 弹出窗口中 - 相反它从实际链接页面加载文本，这不会打扰我所以如果它不是来自显示“Contact usNameEmail..”等的 Conceal 表单，那么它就很多了。它与 twitter 一起工作，首先显示数据文本值，然后显示数据 url，就像它应该的那样。

我使用的系统几乎类似于 Sharrre 示例 2 ( http://sharrre.com/example2.html )，我的代码现在是:

HTML

<div class="share-buttons" data-url="MY URL" data-text="MY TEXT"></div>

和 jQuery

$('.share-buttons').each(function() {
    $(this).sharrre({
        share: {
            twitter: true,
            facebook: true
        },
        template: '<div class="share-icon-holder"><a href="#" class="facebook"><img src="fb.png" /></a><a href="#" class="twitter"><img src="twitter.png" /></a></div><div class="share-text"><img src="share.png" /></div>',
        enableHover: false,
        enableTracking: false,
        render: function(api, options){
            $(api.element).on('click', '.twitter', function(event) {
                event.preventDefault();
                api.openPopup('twitter');
            });
            $(api.element).on('click', '.facebook', function(event) {
                event.preventDefault();
                api.openPopup('facebook');
            });
        }
    });
});

所以我的页面上有 4 倍的 html 部分，我添加了 .each 函数试图解决这个问题，但它没有任何效果。有什么解决这个问题的提示或建议吗？

这是问题的一个 fiddle :http://jsfiddle.net/b54sc/

Answer 1

我自己找到了解决方案。但如果有任何其他想法，请分享!感谢@CBroe 指出了正确的方向。

最佳做法是使用 Open Graph 元标记，但这对我来说是不可能的，因为我的网站是单页网站，所以所有内容都在同一页面上。由于元标记需要位于 html 的头部，这不适合我，因为我需要四个不同的 url 和标题。

但是在浏览元标记解决方案时，我发现了另一个相当简单的解决方案。

因此，Sharrre 使用 Facebook 的 sharer.php，它已被弃用。虽然它已被弃用，但它仍然可以使用，而且它很常见，因为它不需要 app_id。但它已经改变了:它不接受标题 url 中的“t”参数，所以这就是我的数据文本无法正常工作的原因。并且有一个解决方案。

这是我找到的页面: http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/稍微改变一下网址就可以了。标题部分需要是“p[title]”而不是“t”。还有其他参数要使用。

Sharrre 的修复Sharrre 使用的旧方法不再有效，我只是在第 325 行更改了 sharrre.js 文件中的弹出窗口创建函数。

来自

window.open("http://www.facebook.com/sharer/sharer.php?u="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&t="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");

到

window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent((opt.buttons.facebook.url !== '' ? opt.buttons.facebook.url : opt.url))+"&p[title]="+opt.text+"", "", "toolbar=0, status=0, width=900, height=500");

我不知道这个解决方案能用多久，因为 Facebook 可以随时再次更改它，但现在就可以了!

另一种方法是使用 Facebook 对话框，但这需要 app_id。