Facebook SDK Share button not showing up-CodePudding

So, I'm trying to implement the plugin for share on fb button but it's not showing up. The button is there but it automatically has a class that hides it that comes from facebook SDK not me and I don't know how to take it out.

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>

Then I add the fb button from a javascript file along with the content I want to show:

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

Take a look at the page, the button div is there but height is 0 automatically https://imgur.com/gallery/pGh46er

CodePudding user response：

Facebook parses all tags when the page loads. If you add tags afterwards you have to use https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/ to reparse the specific tag or the whole page.

Also be aware that dynamically setting og:image in javascript will not work. Facebook will scrape the URL and look for og:image. So what the og:image is when the user clicks the share button doesn't matter.