Angular实现Facebook/Twitter分享及按钮不显示问题

Facebook JS SDK默认在初始化完成时全量扫描DOM树，识别带fb-*类名的社交插件节点做渲染。Angular组件为动态加载，SDK初始化扫描时组件模板还未挂载到DOM，自然无法渲染出按钮。另外你把模板DOM片段写在了.component.ts文件中，Angular默认不会解析ts文件里的DOM结构，这部分代码根本不会被渲染到页面上。

1. 修正index.html配置 #

你原有og元标签配置正确，只需要调整SDK初始化逻辑，关闭初始化阶段的自动DOM扫描，避免无效扫描：

<!-- 保留你原有的og元标签、viewport标签不变 -->
<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml: false,
      version: 'v3.0'
    });
  };

  (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');
</script>

2. 编写组件模板 #

把分享按钮的DOM结构移到对应组件的.component.html模板文件中，不要写在ts文件里。Twitter分享不需要提前加载全量SDK，直接用官方分享跳转链接即可：

<!-- Facebook分享按钮 -->
<div
  class="fb-share-button"
  data-href="http://anything/index.html"
  data-layout="button_count"
  data-size="small">
</div>

<!-- Twitter分享按钮 -->
<a 
  class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=自定义分享文案&url=http://anything/index.html"
  data-show-count="false">
  推特分享
</a>

3. 组件内手动触发渲染 #

在组件视图完全挂载的生命周期钩子中，通知Facebook SDK扫描当前DOM渲染按钮，同时动态加载Twitter的widget脚本即可。打开对应的.component.ts文件：

import { AfterViewInit, Component } from '@angular/core';

// 声明全局FB对象，规避TS类型校验报错
declare const FB: any;

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 渲染Facebook分享按钮
    if (typeof FB !== 'undefined' && FB.XFBML) {
      FB.XFBML.parse();
    }

    // 加载Twitter按钮样式脚本，避免重复加载
    if (!document.getElementById('twitter-wjs')) {
      const twttrScript = document.createElement('script');
      twttrScript.id = 'twitter-wjs';
      twttrScript.src = 'https://platform.twitter.com/widgets.js';
      document.body.appendChild(twttrScript);
    }
  }
}

• 本地localhost调试时Facebook按钮可能出现安全域提示，部署到已配置的正式域名后可正常使用
• 如果分享时og标签内容抓取异常，是平台爬虫缓存问题，和前端代码逻辑无关
• 如果出现FB未定义的报错，可加个简单的轮询逻辑，等SDK加载完成后再执行FB.XFBML.parse()即可
• 必须等组件DOM完全挂载后再触发SDK解析，顺序颠倒会导致按钮无法渲染

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