【问题标题】:Re-render Tweet button via JS通过 JS 重新渲染推文按钮
【发布时间】:2011-09-06 13:56:50
【问题描述】:

我曾经使用this snippet 重新渲染一个推文按钮。

var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();

但看起来 widgets.js (http://platform.twitter.com/widgets.js) 已被修改,因此 twttr.TweetButton 不再是构造函数。

谁能帮忙解决这个问题?

【问题讨论】:

  • 同样的问题!它刚刚在过去 24 小时内停止工作!

标签: javascript ajax twitter


【解决方案1】:

我在web 上找到了答案。这个想法是重新请求 Twitter javascript 文件。因为它是缓存的,所以没有下载开销。

$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});

【讨论】:

  • 工作正常。首先我担心我会得到多个有冲突和开销的脚本,但我似乎 jQuery 处理了这个!
  • 如果我的页面上有很多推特按钮怎么办?我怎样才能只重新渲染一个(例如,一个带有和 id 的 div 内的那个)
  • @MartinSchaer 我不认为你可以用这种方法。您需要依赖基于 iframe 的方法或其他方法。
【解决方案2】:

对于遇到此问题的任何人,有一种新的、更简单的方法(如果不是之前的话,截至 2012 年 5 月 28 日)。快速浏览一下文档中没有找到,但您可以使用twttr.widgets.load()。这将[重新]加载页面上的所有小部件。

编辑:毕竟它是有记录的。查看this page 的“优化”部分(您无法直接链接到该部分)

【讨论】:

  • 这绝对是当前的答案。添加 twttr.widgets.load() 将刷新 twitter 脚本加载后创建的 div 的所有 twitter 内容。非常感谢!
【解决方案3】:

你只需要在你的 ajax 调用之后调用twttr.widgets.load()。无需重新加载已加载的脚本。

【讨论】:

    【解决方案4】:

    似乎从未支持 twttr.TweetButton 构造函数,并且在上次 API 更新后不再工作:

    支持的方法是动态创建一个基于iframe的推文按钮:

    尽管请注意@Runningskull’s answer 以获取更新信息。

    【讨论】:

      【解决方案5】:

      首先,确保您的文档头部包含 jQuery:

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      

      然后创建一个链接,该链接与最终的推文按钮具有相同的 URL,以及一个空的 div,您的按钮将在其中呈现:

      <a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
      <div id="tbutton"></div>
      

      在页面底部,在 /body 标签的正上方,包括来自 Twitter 的 javascript 和将呈现按钮的函数,以及将在所需事件发生时激活该函数的侦听器:

      <script type="text/javascript">
      //async script, twitter button fashiolista.com style
          (function() {
          var s = document.createElement('SCRIPT');
          var c = document.getElementsByTagName('script')[0];
          s.type = 'text/javascript';
          s.defer = "defer";
          s.async = true;
          s.src = 'http://platform.twitter.com/widgets.js';
          c.parentNode.insertBefore(s, c);
          })();
      
      function renderTweetButton(tbutton,tlink){
          var href = $("#"+tlink).attr('href'),
              $target = $("#"+tbutton),
              qstring = $.param({ url: href, count: "vertical" }),
              toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
          $target.html(toinsert);
      }
      
      $("#hoverlink").mouseenter(function() {
          renderTweetButton("tbutton","tlink");
      });
      </script>
      

      最后,在页面的某处添加一个链接,该链接将根据某些事件激活上述功能:

      <a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
      

      就是这样。

      如果您希望整个测试 HTML 页面查看我是如何工作的,请参见此处:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>jQuery Twitter Button Render Test</title>
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      
      </head>
      
      <body>
      
      <a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
      <div id="tbutton"></div>
      
      <a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
      
      
      <script type="text/javascript">
      //async script, twitter button fashiolista.com style
          (function() {
          var s = document.createElement('SCRIPT');
          var c = document.getElementsByTagName('script')[0];
          s.type = 'text/javascript';
          s.defer = "defer";
          s.async = true;
          s.src = 'http://platform.twitter.com/widgets.js';
          c.parentNode.insertBefore(s, c);
          })();
      
      function renderTweetButton(tbutton,tlink){
          var href = $("#"+tlink).attr('href'),
              $target = $("#"+tbutton),
              qstring = $.param({ url: href, count: "vertical" }),
              toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
          $target.html(toinsert);
      }
      
      $("#hoverlink").mouseenter(function() {
          renderTweetButton("tbutton","tlink");
      });
      
      </script>
      
      </body>
      </html>
      

      【讨论】:

        【解决方案6】:

        我刚遇到同样的问题,这在 JQuery 中有效:

        $.getScript('http://platform.twitter.com/widgets.js');
        

        【讨论】:

          【解决方案7】:

          试试@Anywhere 库。示例js代码:

          twttr.anywhere(function (T) {
                  T("#tweetbox").tweetBox({
                  counter: false,
                  defaultContent: "Default text in a Tweet box...",
                  label: "Share this page on Twitter"
          });
          

          【讨论】:

          • 我查看了@Anywhere,但我需要使用推文按钮而不是推文框。
          猜你喜欢
          • 1970-01-01
          • 2020-04-15
          • 2021-12-29
          • 1970-01-01
          • 2017-06-25
          • 1970-01-01
          • 2020-11-17
          • 2020-08-08
          • 2021-09-16
          相关资源
          最近更新 更多