Facebook Share Dialog Not Showing Correct Content

Question

UPDATE: I fixed the https and http protocal mismatch error by using https://github.com/kennethreitz/flask-sslify/ but I still get this error:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin " https://infinite-brushlands-3960.herokuapp.com " from accessing a frame with origin " https://www.facebook.com ". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access.

The error message is unique to chrome, but the behavior of the popup message not matching what is shown in the debugger is consistent in all browsers.

I'm trying to get my website's Facebook share button plugin to prompt the user with the right sharing window properties. I have a button on my website (staging version that I'm currently working with can be found here: http://infinite-brushlands-3960.herokuapp.com/ ) that says "Share This Schedule" and once that's clicked, a unique share button is generated.

Here's the code for my FB javascript SDK that I need, which is placed right after the opening body tag as instructed:

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'myAppIDGoesHere',
            xfbml      : true,
            version    : 'v2.5'
        });
    };

    (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 = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

And here's the code for the 'Share This Schedule' button:

// When 'Share This Schedule' is clicked:
$('#share_schedule').click(function(){
    html2canvas(document.body).then(function(canvas) {
        //document.body.appendChild(canvas);
        var imgDataUrl = canvas.toDataURL();
        $('head').append("<meta property='og:image' content='" + imgDataUrl + "' />");
    });

    // If it is not the first time being clicked:
    if ($('#share_url_ul').children().length >= 1){
        $('#share_url_ul').empty();
    }
    $.ajax({
        method: "POST",
        url: "/share/",
        data: JSON.stringify(localStorage),
        contentType: "application/json; charset=utf-8",
        dataType: "text",
        success: function(response){
            var shared_url = document.createElement('a');
            $(shared_url).css('display', 'block');
            $(shared_url).attr('href', window.location.href + 'shared/' + response);
            $(shared_url).attr('id', 'share_link');
            shared_url.innerHTML = window.location.href + 'shared/' + response;
            $('#share_url_ul').append(shared_url);

            $('#fb_share_btn').attr('data-href', window.location.href + 'shared/' + response);

            FB.XFBML.parse();
        },
        error: function(error){
            console.log(error);
        }
    });
});

And my html:

<head>
  .
  .
  .
    <!-- Facebook -->
    <meta property="og:url"                content="http://infinite-brushlands-3960.herokuapp.com/" />
    <meta property="og:type"               content="website" />
    <meta property="og:title"              content="My Schedule on Serif" />
</head>

When I go to the URL Debugger as instructed by this article , I see exactly what I want to see, with the correct prompt properties:

But on the actual site, that's not what I see:

Why does this discrepancy exist?

Additional Info:

I had a feeling it may have something to do with the fact that I get this message in the console on load:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin " http://infinite-brushlands-3960.herokuapp.com " from accessing a frame with origin " https://www.facebook.com ". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

I have also tried using FB.ui Share Dialog instead of the share plugin, but it just opens up a popup window with the above error in it.

Answer 1

If I understand your use case correctly, you want to share each schedule individually, right?

Currently, the og:url value points to your home site ( https://infinite-brushlands-3960.herokuapp.com/ ). This will cause the Open Graph scraper (and Share dialog scraping) to follow that url, since it's considered to be the canonical url. I would advise to use the url for each schedule there.

Combine this with manual rescrapes and your Open Graph data should always be up-to-date.

Facebook Share Dialog Not Showing Correct Content

Question

1 answers

solution1
0 2015-12-14 11:46:57

Facebook Share Dialog Not Showing Correct Content

Question

1 answers

solution1 0 2015-12-14 11:46:57

solution1
0 2015-12-14 11:46:57