Question

我正在尝试将Twitter关注按钮集成到我的网络应用程序中。我为twitter跟随按钮创建一个DOM元素并附加到正文，它工作正常。我想在特定的div中显示twitter跟随按钮。

我像这样创建DOM元素。

    var script = document.createElement('script');
    script.src = 'https://platform.twitter.com/widgets.js';
    document.head.appendChild(script);

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

    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");
    twitter.setAttribute("data-show-screen-name", "false");
    document.getElementById("social_like").appendChild(twitter);

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

我在facebook上面临同样的问题，比如按钮，我正在使用FB.XFBML.parse(document.getElementById('fb-root'));来解决问题。

我正在使用iframe标记，而不是像div中显示的标记

<iframe
 src="https://platform.twitter.com/widgets/follow_button.html?
 screen_name=TwitterDev&show_screen_name=false&show_count=false&size=l"
 title="Follow TwitterDev on Twitter"
 width="80"
 height="30"
 style="border: 0; overflow: hidden;"
 ></iframe>

但我希望在Twitter按下按钮后点击回调。

Answer 1

通过阅读您的代码，您似乎正在尝试使用不存在的ID。 div元素的id是'social_like'而不是'social_plugin'。

也许您可以尝试更改这一行：

document.getElementById("social_plugin").appendChild(twitter);

为：

document.getElementById("social_like").appendChild(twitter);

您可以使用浏览器上的DevTools / JS控制台更轻松地调试错误。它是否显示任何错误？

twitter关注按钮未显示

1 个答案: