如何在Flutter应用中嵌入社交媒体帖子与视频？

解决Facebook嵌入报错问题 #

直接使用webview_flutter配合Facebook官方嵌入代码，替代第三方封装的webview包：

• 先在Meta开发者平台创建应用，获取App ID并完成域名配置（确保webview允许加载Facebook相关域名）。
• 在webview中加载包含嵌入代码的HTML字符串，示例：

  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v18.0&appId=你的APP_ID&autoLogAppEvents=1"></script>
  <div class="fb-post" data-href="你的Facebook帖子链接" data-width="400"></div>
  

• 排查“帖子可能已被删除”错误：确认帖子为公开状态，App ID配置正确，webview已启用JavaScript，且允许第三方Cookie。

Twitter/X嵌入方案 #

同样用webview_flutter加载官方嵌入代码：

<blockquote class="twitter-tweet"><a href="你的推文链接"></a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

确保webview开启JavaScript权限，允许加载Twitter的脚本资源。

Instagram嵌入方案 #

通过Meta开发者平台配置Instagram应用权限后，用webview_flutter加载官方嵌入代码：

<blockquote class="instagram-media" data-instgrm-permalink="你的Ins帖子链接" data-instgrm-version="14"></blockquote>
<script async src="//www.instagram.com/embed.js"></script>

注意开启webview的JavaScript、图片加载权限，配置允许访问Instagram相关域名。

进阶替代：flutter_inappwebview #

如果webview_flutter满足不了需求，试试功能更全面的flutter_inappwebview，它支持自定义Cookie、User-Agent等，更容易适配社交平台的嵌入规则：

InAppWebView(
  initialData: InAppWebViewInitialData(
    data: '''
      <!-- 替换为对应社交平台的嵌入代码 -->
    ''',
  ),
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
      useShouldOverrideUrlLoading: true,
    ),
  ),
)

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