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

早些时候，我使用Sharre只为每页设置一个按钮，效果很好。然而，我不得不改变这一点，现在我有4组按钮，数据文本和数据url值没有显示在facebook弹出窗口中-相反，它从实际链接页面加载文本，如果它不是来自显示“Contact UsnameMail…”的隐藏表单，这不会让我太烦恼它与twitter一起工作，首先显示数据文本值，然后显示数据url，就像它应该显示的那样

我使用的系统几乎与Sharre示例2（）类似，我的代码如下：

HTML

还有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');
            });
        }
    });
});

$（'.share按钮'）。每个（函数（）{
$（这个）({
分享：{
推特：没错，
脸谱网：没错
},
模板：“”，
enablehaver:false，
enableTracking:错误，
渲染：函数（api、选项）{
$（api.element）.on（'click'，'twitter'，函数（事件）{
event.preventDefault（）；
openPopup（'twitter'）；
});
$（api.element）.on（'click'，'facebook'，函数（事件）{
event.preventDefault（）；
api.openPopup（“facebook”）；
});
}
});
});

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

---

这里有一个小问题：

试试这个：我在你的代码中添加了标题和url

$('.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');
            });
        }
    });
});

$（'.share按钮'）。每个（函数（）{
$（这个）({
分享：{
推特：没错，
脸谱网：没错
},
标题：$（this.attr（'data-href'），
url:$（this.attr（'data-url'），
模板：“”，
enablehaver:false，
enableTracking:错误，
渲染：函数（api、选项）{
$（api.element）.on（'click'，'twitter'，函数（事件）{
event.preventDefault（）；
openPopup（'twitter'）；
});
$（api.element）.on（'click'，'facebook'，函数（事件）{
event.preventDefault（）；
api.openPopup（“facebook”）；
});
}
});
});

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

最佳实践是使用开放图元标记，但这对我来说是不可能的，因为我的站点是一个页面站点，所以所有内容都在同一页面上。由于元标记需要在html的头部，这不适合我，因为我需要四个不同的URL和标题

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

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

这是我找到的页面： 稍微更改一下url就可以了。标题部分必须是“p[title]”，而不仅仅是“t”。还有其他参数可以使用

对夏瑞的修复 Sharre使用的旧方法不再有效，我只是在第325行修改了sharre.js文件中的弹出创建函数

从

到

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

---

另一种方法是使用Facebook对话框，但需要应用程序id。

共享对话框不再需要URL以外的任何其他参数。标题、描述、缩略图都是从后台的URL获取的。所以，如果您想影响自己URL的值，请查看开放图元标记。感谢您为@CBroe指明了正确的方向！Open Graph确实是最好的解决方案，但我将其应用于一个单页网站，因此所有内容都在同一页上，带有水平和垂直滑块，看起来您只能在页面标题中使用这些元标记，我需要四个不同的URL和文本。但我找到了一个解决办法，现在可以了。我会更新我原来的帖子。不幸的是，这并没有做到，但我发现这是Sharre的错误。看起来Facebook不再像以前那样接受sharer.php参数了，Sharre正在使用旧方法。我会将修复发布到原始帖子。您在那里输入了一个错误：title:$（this.attr（'data-href'），attr应该是数据文本：P

$('.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');
            });
        }
    });
});

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");