Question

之前我使用Sharrre只是每页一个按钮设置，它工作得很好。但是，我不得不改变它，现在我有4组按钮，并且在facebook弹出窗口中没有显示数据文本和数据url值 - 而是从实际的链接页面加载文本，这不会打扰我如果它不是来自显示“联系usNameEmail ..”等隐藏形式，那么它可以与twitter一起使用，首先显示数据文本值，然后显示数据网址，就像它应该的那样。

我使用的系统几乎就像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函数试图解决这个问题，但它没有任何效果。有任何提示或建议来解决这个问题吗？

这是问题的一个小提琴：http://jsfiddle.net/b54sc/

Answer 1

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

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

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

所以，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。

Answer 2

试试这个：我在您的代码中添加了标题，网址

$('.share-buttons').each(function() {
    $(this).sharrre({
        share: {
            twitter: true,
            facebook: true
        },
        title: $(this).attr('data-href'),
        url: $(this).attr('data-url'),
        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');
            });
        }
    });
});

Sharrre - Facebook数据文本和数据网址没有显示在多个按钮上

2 个答案: