Facebook SDK 分享按钮未显示

Question

所以，我正在尝试实现用于在 fb 按钮上分享的插件，但它没有显示。按钮在那里，但它自动有一个 class 隐藏它，它来自 facebook SDK 而不是我，我不知道如何将其取出。

html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        </head>
    <body>
        <div id="fb-root"></div>
        <script>
            $(document).ready(function () {
                window.fbAsyncInit = function() {
                    FB.init({
                        appId      : '1633098193720369',
                        cookie     : true,
                        xfbml      : true,
                        version    : 'v13.0',
                    });
    
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                };
    
                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {return;}
                    js = d.createElement(s); js.id = id;
                    js.src = "https://connect.facebook.net/en_US/sdk.js";
                    fjs.parentNode.insertBefore(js, fjs);
                } (document, 'script', 'facebook-jssdk'));
    
                function statusChangeCallback(response) {
                    if(response.status === 'connected') {
                        console.log('Logged in and anthenticated');
                    } else {
                        console.log('Not authenticated');
                    }
                }
    
                function checkLoginState() {
                    FB.getLoginStatus(function(response) {
                        statusChangeCallback(response);
                    });
                }

                window.logout = function () {
                    FB.logout(function () {
                        window.location.reload(true);
                    });
                };
            });
        </script>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div id="#share-on-fb"></div>
    </body>
    </html>

然后我从 javascript 文件中添加 fb 按钮以及我要显示的内容：

$('head').append('<meta property="og:image" content="https://encuentrame.org.xelar.tech/static/images/' + post.foto + '" />');
let shareOnFb = $('#share-on-fb');
shareOnFb.append('<div class="fb-share-button" data-href="' + url + '" data-layout="button" data-size="small"></div>');

看一下页面，按钮div是有的，但是高度自动为0 https://imgur.com/gallery/pGh46er

Answer 1

Facebook 在页面加载时解析所有标签。如果您之后添加标签，则必须使用 https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ 重新解析特定标签或整个页面。

另请注意，在 javascript 中动态设置 og:image 将不起作用。 Facebook 将抓取 URL 并寻找 og:image。所以当用户点击分享按钮时 og:image 是什么并不重要。

Facebook SDK 分享按钮未显示

Facebook SDK Share button not showing up

javascript

facebook

plugins

share