Facebook share button for website missing

Question

I've built a super simple plugin for WordPress which displays share buttons on single posts.

Here's the code:

<?php
/**
 * Social buttons
 */
function zss_share_buttons() {
$post_url = esc_url( get_the_permalink() ); // Facebook native button doesn't play well with encoded URLs
$encoded_post_url = urlencode( esc_url( get_the_permalink() ) );
$encoded_post_title = htmlspecialchars( rawurlencode( html_entity_decode( esc_html( get_the_title() ), ENT_COMPAT, 'UTF-8' ) ), ENT_COMPAT, 'UTF-8' );
?>
    <div class="zss">
        <!-- Facebook -->
        <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=v3.0";
                fjs.parentNode.insertBefore(js, fjs);
            }
            (document, 'script', 'facebook-jssdk'));
        </script>
        <div class="fb-share-button" data-href="<?php echo $post_url; ?>" data-layout="button_count"></div>
        <!-- Twitter -->
        <a href="https://twitter.com/intent/tweet?url=<?php echo $encoded_post_url; ?>&amp;text=<?php echo $encoded_post_title; ?>" title="Share on Twitter" target="_blank" rel="nofollow noopener noreferrer" class="zss-button zss-button--twitter"><span>Twitter</span></a>
        <!-- LinkedIn -->
        <a href="https://www.linkedin.com/sharing/share-offsite/?url=<?php echo $encoded_post_url; ?>" title="Share on LinkedIn" target="_blank" rel="nofollow noopener noreferrer" class="zss-button zss-button--linkedin"><span>LinkedIn</span></a>
        <!-- Email -->
        <?php if ( class_exists( 'GFCommon' ) ) : ?>
            <button title="Share by Email" class="zss-button zss-button--email" id="triggerModal"><span>Email</span></button>
            <div id="zssModal" class="zss-modal">
                <div class="zss-modal__content">
                    <span class="zss-modal__close">&times;</span>
                    <?php gravity_form( 1, false, false, false, '', true); ?>
                </div>
            </div>
        <?php endif; ?>
    </div>
<?php }

/**
 * Insert share buttons
 */ 
function zss_insert_share_buttons( $content ) {
    /**
     * If AMP
     */ 
    if ( function_exists( 'ampforwp_is_amp_endpoint' ) && ampforwp_is_amp_endpoint() ) {
        return $content;
    }
    if ( is_single() && 'post' == get_post_type() ) {
        ob_start();
        zss_share_buttons();
        $content .= ob_get_clean();
    }
    return $content;
}
add_filter( 'the_content', 'zss_insert_share_buttons' );

The Facebook button uses the Share Button code exactly as demonstrated in the documentation.

I keep running into issues where the Facebook share button doesn't show up at all, mainly on Chrome and Safari iOS.

Do you require a Facebook app ID for this to correctly work? The site where this is hosted gets around 1 million unique visitors a month, so I'm wondering if it has something to do with rate limiting.

Answer 1

You do need an App ID. If you click the Get Code button at https://developers.facebook.com/docs/plugins/share-button/ you'll notice the App ID is used when importing the JS SDK.

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v10.0&appId=<app_id>&autoLogAppEvents=1" nonce="U86MbFL2"></script>