如何将Facebook点赞与Twitter关注按钮添加至指定div并解决显示异常

我帮你梳理下代码里的问题，咱们一步步来修复，让社交按钮能正常显示在指定容器里：

1. 先修正元素挂载的目标错误 #

你创建了social_likes这个容器，但目前代码里是把Facebook和Twitter按钮直接加到了document.body，而不是social_likes里。这就导致你移动social_likes的时候，容器里根本没有按钮元素。

修复方式：把创建好的按钮元素挂载到social_likes，再把这个容器加到你指定的目标div（比如你提到的demo）：

// 把Facebook按钮加到social_likes容器
social_likes.appendChild(facebook);
// 把Twitter按钮加到social_likes容器
social_likes.appendChild(twitter);
// 最后把social_likes放到指定的demo容器里
document.getElementById("demo").appendChild(social_likes);

2. 让社交SDK重新解析动态元素 #

Facebook和Twitter的SDK只会在初始化时扫描页面已有的插件元素并渲染。如果你是动态创建或移动元素，SDK不会自动识别新元素，需要手动触发重新渲染。

针对Facebook的修复 #

Facebook SDK提供了FB.XFBML.parse()方法，可以重新解析指定容器内的插件元素。你可以在元素挂载完成后调用：

// 确保FB对象已初始化后调用
window.fbAsyncInit = function() {
  // 保留你原有的事件订阅代码
  FB.Event.subscribe('edge.create', function(response) {
    alert('You liked the URL: ' + response);
  });
  FB.Event.subscribe('edge.remove', function(response) {
    alert('You unliked the URL: ' + response);
  });
  // 解析social_likes容器里的Facebook插件
  FB.XFBML.parse(document.getElementById('social_like'));
};

针对Twitter的修复 #

Twitter Widgets SDK提供了twttr.widgets.load()方法，用来重新渲染指定容器内的按钮：

twttr.ready(function(twttr) {
  // 保留你原有的follow事件绑定
  twttr.events.bind('follow', function(e) {
    alert("FOLLOW!");
  });
  // 加载social_likes容器里的Twitter插件
  twttr.widgets.load(document.getElementById('social_like'));
});

3. 额外优化：移除重复的jQuery引入 #

你的代码里引入了两个不同CDN的jQuery，完全没必要，删掉其中一个即可，比如去掉这个：

// var twitterscript = document.createElement('script');
// twitterscript.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js';
// document.head.appendChild(twitterscript);

完整修正后的代码示例 #

// 创建fb-root并添加到body
var fbroot = document.createElement('div');
fbroot.id = 'fb-root';
document.body.appendChild(fbroot);

// 只引入一次jQuery
var fbscript = document.createElement('script');
fbscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js';
document.head.appendChild(fbscript);

// 创建社交插件容器
var social_likes = document.createElement('div');
social_likes.id = 'social_like';

// 创建Facebook点赞按钮并挂载到容器
var facebook = document.createElement('div');
facebook.setAttribute("class", "fb-like");
facebook.setAttribute("data-href", "https://developers.facebook.com/docs/plugins/");
facebook.setAttribute("data-layout", "button");
facebook.setAttribute("data-action", "like");
facebook.setAttribute("data-size", "large");
facebook.setAttribute("data-show-faces", "true");
facebook.setAttribute("data-share", "false");
social_likes.appendChild(facebook);

// 创建Twitter关注按钮并挂载到容器
var twitter = document.createElement('a');
twitter.setAttribute("href", "http://twitter.com/TwitterDev");
twitter.setAttribute("class", "twitter-follow-button");
twitter.setAttribute("data-size", "large");
twitter.setAttribute("data-show-count", "false");
social_likes.appendChild(twitter);

// 将社交容器添加到指定的demo div
document.getElementById("demo").appendChild(social_likes);

// Facebook SDK初始化及插件解析
window.fbAsyncInit = function() {
  FB.Event.subscribe('edge.create', function(response) {
    alert('You liked the URL: ' + response);
  });
  FB.Event.subscribe('edge.remove', function(response) {
    alert('You unliked the URL: ' + response);
  });
  FB.XFBML.parse(document.getElementById('social_like'));
};

(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_GB/sdk.js#xfbml=1&version=v2.10&appId=115700475727068";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

// Twitter SDK初始化及插件加载
window.twttr = (function(d, s, id) {
  var t, js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s);
  js.id = id;
  js.src = "//platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);
  return window.twttr || (t = { _e: [], ready: function(f) { t._e.push(f) } });
}(document, "script", "twitter-wjs"));

twttr.ready(function(twttr) {
  twttr.events.bind('follow', function(e) {
    alert("FOLLOW!");
  });
  twttr.widgets.load(document.getElementById('social_like'));
});

这样修改后，你的Facebook点赞和Twitter关注按钮应该就能正常显示在指定的div里了。

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