Facebook-共享链接无法正常工作-Javascript / jQuery

Question

I have implemented a facebook share link but have noticed that what is being posted is not as its displayed in the Facebook popup. 我已经实现了一个Facebook分享链接，但是注意到正在发布的内容与在Facebook弹出窗口中所显示的不一样。 The title and the description are missing on the actual post but are displayed on the popup preview. 标题和描述在实际帖子中丢失，但显示在弹出预览中。 All that is posted is the message and a link. 所发布的只是消息和链接。 在此处输入图片说明

 $('body').on('click', '.social_media a', function(e) {

                var loc = $(this).attr('href');
                var action = $(this).attr('data-action');
                var title = $(this).attr('data-title');
                var desc = $(this).attr('data-desc');
                var img = $(this).attr('data-img');

    window.open('https://www.facebook.com/sharer/sharer.php?s=100&p[url]=' + encodeURIComponent(loc) + '&p[images][0]&p[title]=' + encodeURIComponent(title) + '&p[summary]=' + encodeURIComponent(desc), 'sharer', 'status=0,width=626,height=436, top=' + ($(window).height() / 2 - 225) + ', left=' + ($(window).width() / 2 - 313) + ', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

Can anyone see what I'm doing wrong? 谁能看到我在做什么错？

Answer 1

I would suggest you to use meta tags instead of passing parameters to the popup. 我建议您使用元标记，而不是将参数传递给弹出窗口。 Insert these tags to the head section of a page you want to share: 将这些标签插入您要共享的页面的head ：

<meta property="og:url" content="http://domain/url" />
<meta property="og:title" content="Your title" /> 
<meta property="og:description" content="Description" />
<meta property="og:image" content="http://image1" />
<meta property="og:image" content="http://image2" />

FB will parse it and show in the dialog. FB将对其进行解析并显示在对话框中。 By doing this way you can also specify multiple images. 通过这种方式，您还可以指定多个图像。

Then open this dialog window using this code: 然后使用以下代码打开此对话框窗口：

var width = 626;
var height = 436;
var yourPageToShare = $(this).attr('href');
var sharerUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(yourPageToShare);
var l = window.screenX + (window.outerWidth - width) / 2;
var t = window.screenY + (window.outerHeight - height) / 2;
var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
var win = window.open(sharerUrl, 'fbShareWin', winProps);

Here you can read more about Facebook Open Graph tags 在这里您可以阅读有关Facebook Open Graph标签的更多信息

Edit 编辑

Here is full page code that should work: 这是应该起作用的完整页面代码：

<!DOCTYPE html>
<html>
<head>
<meta property="og:title" content="Your title" /> 
<meta property="og:description" content="Your description" />
<script>
function share() {
    var width = 626;
    var height = 436;
    var yourPageToShare = location.href;
    var sharerUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(yourPageToShare);
    var l = window.screenX + (window.outerWidth - width) / 2;
    var t = window.screenY + (window.outerHeight - height) / 2;
    var winProps = ['width='+width,'height='+height,'left='+l,'top='+t,'status=no','resizable=yes','toolbar=no','menubar=no','scrollbars=yes'].join(',');
    var win = window.open(sharerUrl, 'fbShareWin', winProps);
}
</script>
</head>
<body>

    <input type="button" value="Share" onclick="share();">

</body>
</html>

It's worth to note that FB might cache this page's meta tags, so you probably will need to wait for a while. 值得注意的是，FB可能会缓存该页面的meta标签，因此您可能需要等待一段时间。

The problem in your case may be because you add meta tags to the page that contains the links, not the pages those links are pointing to. 您遇到的问题可能是因为您将元标记添加到了包含链接的页面，而不是这些链接指向的页面。

Facebook-共享链接无法正常工作-Javascript / jQuery

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-01-14 15:43:19

Facebook-共享链接无法正常工作-Javascript / jQuery

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-01-14 15:43:19

解决方案1
1 已采纳 2014-01-14 15:43:19