缺少网站的 Facebook 分享按钮

Question

我为 WordPress 构建了一个超级简单的插件，它在单个帖子上显示分享按钮。

代码如下：

<?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' );

Facebook 按钮使用的 Share Button 代码与文档中演示的完全相同。

我一直运行解决 Facebook 分享按钮根本不显示的问题，主要是 Chrome 和 Safari iOS。

您需要 Facebook 应用 ID 才能正常运行吗？托管此网站的网站每月有大约 100 万独立访问者，所以我想知道这是否与速率限制有关。

Answer 1

您确实需要一个 App ID。如果您单击 https://developers.facebook.com/docs/plugins/share-button/ 处的“获取代码”按钮，您会注意到在导入 JS SDK 时使用了 App ID。

<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>

缺少网站的 Facebook 分享按钮

Facebook share button for website missing

wordpress

facebook

facebook-graph-api

facebook-javascript-sdk

wordpress-plugin-creation