如何在特定的div中添加像按钮这样的facebook

时间:2018-01-27 07:58:50

标签: javascript facebook-like twitter-follow

我正在尝试将类似Facebook的按钮和Twitter关注按钮集成到我的网络应用程序中。

我对此有点困惑。我为facebook创建了一个DOM元素,并按下twitter按钮并附加到html.It工作正常。

但是我想在特定的div中附加facebook和twitter跟随按钮。

  var fbroot = document.createElement('div');
    fbroot.id = 'fb-root';
    document.body.appendChild(fbroot);

    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 twitterscript = document.createElement('script');
    twitterscript.src = 'https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js';
    document.head.appendChild(twitterscript);

    var social_likes = document.createElement('div');
    social_likes.id = 'social_like';
    document.body.appendChild(social_likes);

    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");
    document.body.appendChild(facebook);


    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");
    document.body.appendChild(twitter);

    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);
   });
};
 (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 javascript 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!");
 });
});

我正在尝试将社交插件附加到这样的特定div上。

document.getElementById("demo").appendChild(social_likes);

它成功附加,但我没有看到div中的社交插件。我无法找到我错误的做法。

0 个答案:

没有答案