FB.ui is not Defined

Question

Using BugSnag, I can see that some of our users on our website are runnning into this error:

FB.ui is not a function

When I visit the site and get to the page that this error is appearing, I have no issues.

Here is our script to share to fb:

<div id="fb-root"></div>
<script>
    (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#xfbml=1&version=v2.12&appId=1365705806909063&autoLogAppEvents=1';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

<div class="x-custom-col" id="share-fb-btn">
    <a class="x-fb x-btn" data-social-type="fb-share" data-eventlabel="inlineshare">
        <i class="ico-facebook"></i>
        <span>Share to Facebook!</span>
    </a>
</div>

<script>
    document.getElementById('share-fb-btn').onclick = function() {
        FB.ui({
            method: 'share_open_graph',
            action_type: 'og.shares',
            action_properties: JSON.stringify({
                object: {
                    'og:url':"http://www.example.com/",
                    'og:title': "Here is some info to share!".",
                    'og:description': "Decribe it!",
                    'og:image': "https://www.example.com/image"
                }
            })
        },
        function (response) {
            // Action after response
        });
    }
</script>

It seems this is only happening on our mobile layout. Any suggestions?

Answer 1

This can happen if someone uses a tool to block external scripts for social media and analytics. It blocks loading the script, so FB will not get initialized and FB.ui will not exist.

You can solve this by checking if FB exists, or by adding the click listener in the window.fbAsyncInit callback of the JavaScript SDK.