Facebook共享:预览窗口为空，第一次单击共享

Question

我的网站上有一个分享按钮(图片)。单击它时，以下js将创建共享预览：

window.open('https://www.facebook.com/sharer/sharer.php?u=www.mysite.com/thepage/', 'facebook-share-dialog', 'width=626,height=436');

第一次单击页面上的“共享”按钮时，预览为空白。它甚至不显示网址。如果已关闭共享窗口，并且第二次单击“共享”按钮，则可以正常工作。

页面是用户生成的，因此不可能遍历每个页面并确保每个共享按钮被单击一次，也不能通过linter放置每个页面。

Answer 1

我也遇到了同样的问题，并在Facebook的文档中找到了解决方案：

使用og:image:width和og:image:高度 使用这些标记将指定图像到爬虫，以便它可以立即呈现它，而不必异步。

只需确保您打开的图形标签包括宽度和高度，以及图像源。您的元标记应该如下所示：

<meta property="og:image" content="...image.jpg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="600" />

Answer 2

因为sharer.php有点浮躁和不受欢迎。我建议使用FB.ui。当然，您必须在上创建一个developers.facebook.com应用程序

window.fbAsyncInit = function() {
        FB.init({
            appId      : "xxxxxxx", // App ID
            channelUrl : "YOURDOMAIN/channel.html", // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
        });
};
function isEmpty(obj) {
    for(var prop in obj) {
        if(obj.hasOwnProperty(prop))
            return false;
    }
    return true;
}

// Load the SDK Asynchronously
(function(d){
        var js, id = "facebook-jssdk", ref = d.getElementsByTagName("script")[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement("script"); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
}(document));

function shareOnWall()
{   
    FB.ui({
        method: "feed",
        link: "www.mysite.com/thepage/", //your site
        picture: "www.mysite.com/thepage/images/someimage.png",
        name: "Some Name",
        caption: "blah blah",
        description: "Message"
    }, shareCallback);
}

function shareCallback(response)
{
    //share was successful
}

这是密码，祝你好运。;)