Blazor Server项目中Facebook Page插件加载异常求助

新建了一个Blazor Server项目，想要添加Facebook（Meta）官方的Page插件，但插件无法正常加载，仅显示文本链接（截图：插件显示文本链接截图）。怀疑问题与OnAfterRender生命周期有关，已尝试数小时仍未解决。

当前代码配置 #

_Layout.cshtml中的代码： #

@using Microsoft.AspNetCore.Components.Web
@namespace fbpage.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="~/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="fbpage.styles.css" rel="stylesheet" />
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0" nonce="EvlRPiZT"></script>
    
    @RenderBody()

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.server.js"></script>
</body>

Index.cshtml中的代码： #

@page "/"

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

疑问：是否需要将代码放置在_Host.cshtml等其他页面，或如何正确使用JSRuntime.InvokeAsync来使插件正常加载？

问题根源 #

Blazor Server默认使用ServerPrerendered渲染模式，页面先预渲染静态内容，Facebook SDK在初始加载时仅解析一次页面中的XFBML标签。当Blazor完成交互式渲染后，预渲染的XFBML标签不会被SDK自动重新解析，因此仅显示文本链接。

解决步骤 #

1. 保留现有脚本位置，验证nonce有效性

无需将SDK脚本移动到_Host.cshtml，当前_Layout.cshtml中的位置可正常工作。开发环境可先移除nonce="EvlRPiZT"测试（生产环境需配置匹配的内容安全策略）。

2. 通过JSRuntime手动触发XFBML解析

在Blazor组件中，利用OnAfterRenderAsync生命周期方法，调用Facebook SDK的FB.XFBML.parse()方法重新解析标签。修改Index.cshtml：

@page "/"
@inject IJSRuntime JSRuntime

<PageTitle>Index</PageTitle>

<h1>Hello, world!</h1>

<div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("eval", @"
                // 确保SDK加载完成后解析XFBML
                if (window.FB) {
                    FB.XFBML.parse();
                } else {
                    window.fbAsyncInit = function() {
                        FB.XFBML.parse();
                    };
                }
            ");
        }
    }
}

3. 可选：指定解析目标元素

若仅需解析特定元素，可给插件容器添加ID，缩小解析范围：

<div id="fb-page-container" class="fb-page" data-href="https://www.facebook.com/facebook" ...></div>

修改JS调用部分：

FB.XFBML.parse(document.getElementById('fb-page-container'));

关键注意事项 #

• 仅在firstRender时执行解析逻辑，避免重复调用。
• ServerPrerendered模式下，预渲染阶段不会执行JS，必须等待交互式渲染完成后触发解析。
• 生产环境需配置内容安全策略（CSP），允许加载Facebook的SDK脚本及相关iframe资源。

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