如何在WordPress短代码中集成Facebook API脚本（无需放入头部）

核心问题分析 #

你遇到的Uncaught TypeError: Cannot read properties of undefined (reading 'login')错误，本质是点击登录按钮时Facebook SDK还未加载完成，window.FB对象尚未初始化。另外直接在短代码中重复插入脚本会导致SDK多次加载，需要做防重复处理。

完整WordPress短代码实现 #

将以下代码添加到主题的functions.php文件，或自定义插件中：

function facebook_login_shortcode($atts) {
    // 短代码属性配置，支持自定义AppID和SDK版本
    $atts = shortcode_atts(array(
        'app_id' => get_option('facebook_app_id'), // 可改为从环境变量取值，比如getenv('FACEBOOK_APP_ID')
        'version' => 'v14.0'
    ), $atts);

    ob_start();
    ?>
    <div class="fb-login-wrapper">
        <button id="fb-custom-login-btn" class="fb-login-btn">Facebook登录</button>
        <script>
        // 标记SDK是否已加载，避免重复插入脚本
        if (typeof window.fbSdkLoaded === 'undefined') {
            window.fbSdkLoaded = false;
            window.fbAsyncInit = function() {
                FB.init({
                    appId      : '<?php echo esc_js($atts['app_id']); ?>',
                    cookie     : true,
                    xfbml      : true,
                    version    : '<?php echo esc_js($atts['version']); ?>'
                });
                FB.AppEvents.logPageView();
                window.fbSdkLoaded = true;
                // 如果按钮点击事件已绑定，触发初始化完成回调
                if (window.fbLoginReady) {
                    window.fbLoginReady();
                }
            };

            // 动态加载Facebook SDK
            (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'));
        }

        // 处理登录按钮点击逻辑，确保FB对象就绪
        document.getElementById('fb-custom-login-btn').addEventListener('click', function() {
            function doLogin() {
                FB.login(function(res) {
                    // 这里添加登录成功/失败后的业务逻辑
                    if (res.authResponse) {
                        console.log('登录成功:', res.authResponse);
                        // 示例：跳转后端验证接口、更新页面UI等
                    } else {
                        console.log('用户取消登录或登录失败');
                    }
                }, { scope: 'public_profile,email' }); // 根据需求设置权限范围
            }

            // 已加载则直接执行，未加载则等待初始化完成
            if (window.fbSdkLoaded) {
                doLogin();
            } else {
                window.fbLoginReady = doLogin;
            }
        });
        </script>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('facebook_login', 'facebook_login_shortcode');

使用说明 #

1. 配置App ID：可以通过短代码属性直接传入，比如[facebook_login app_id="你的FB应用ID"]，也可以在函数中设置默认值（比如从WordPress后台选项读取，方便客户配置）。
2. 样式自定义：通过.fb-login-btn类添加CSS样式，匹配你的网站设计风格。
3. 业务逻辑扩展：在FB.login的回调函数中，添加你需要的后续处理，比如将用户信息发送到后端接口。

关键优化点 #

• 防重复加载：用window.fbSdkLoaded全局变量标记SDK加载状态，避免短代码多次调用时重复插入脚本。
• 异步就绪处理：通过window.fbLoginReady回调函数，确保无论SDK是否已加载，点击按钮都能正确触发登录逻辑。
• 安全防护：用esc_js()转义输出的App ID和版本号，避免XSS安全风险。

内容的提问来源于stack exchange，提问作者Alma