Javascript 通过JS重新呈现Tweet按钮_Javascript_Ajax_Twitter

Javascript 通过JS重新呈现Tweet按钮

javascript ajax twitter

Javascript 通过JS重新呈现Tweet按钮,javascript,ajax,twitter,Javascript,Ajax,Twitter,我曾经使用重新渲染一个Tweet按钮 var tweetButton = new twttr.TweetButton(twitterScript); twttr.render(); 但看起来widgets.js（）已被修改，因此twttr.TweetButton不再是构造函数有人能帮忙解决这个问题吗？试试@Anywhere库。示例js代码： twttr.anywhere(function (T) { T("#tweetbox").tweetBox({ coun

我曾经使用重新渲染一个Tweet按钮

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

但看起来widgets.js（）已被修改，因此twttr.TweetButton不再是构造函数

有人能帮忙解决这个问题吗？

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

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

看起来

twttr.TweetButton

构造函数从未受支持，在上次API更新后不再工作：

支持的方法是动态创建基于

iframe

的Tweet按钮：

尽管需要更新信息。

我在网站上找到了答案。其想法是重新请求twitterjavascript文件。由于它是缓存的，因此没有下载开销

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

首先，确保文档的标题中包含jQuery：

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

然后创建一个链接，该链接与最终的tweet按钮具有相同的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>


//异步脚本，twitter按钮fashiolista.com风格
（功能（）{
var s=document.createElement（'SCRIPT'）；
var c=document.getElementsByTagName（'script'）[0]；
s、 类型='text/javascript'；
s、 defer=“defer”；
s、 异步=真；
s、 src='1〕http://platform.twitter.com/widgets.js';
c、 parentNode.insertBefore（s，c）；
})();
函数renderWeetButton（tbutton，tlink）{
var href=$（“#”+tlink）.attr（'href'），
$target=$（“#”+t按钮），
qstring=$.param（{url:href，count:“vertical”}），
toinsert=''；
$target.html（toinsert）；
}
$（“#hoverlink”）.mouseenter（函数（）{
RenderWeetButton（“tbutton”、“tlink”）；
});

最后，在页面的某个位置添加一个链接，该链接将根据某些事件激活上述功能：

<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>


jquerytwitter按钮呈现测试
//异步脚本，twitter按钮fashiolista.com风格
（功能（）{
var s=document.createElement（'SCRIPT'）；
var c=document.getElementsByTagName（'script'）[0]；
s、 类型='text/javascript'；
s、 defer=“defer”；
s、 异步=真；
s、 src='1〕http://platform.twitter.com/widgets.js';
c、 parentNode.insertBefore（s，c）；
})();
函数renderWeetButton（tbutton，tlink）{
var href=$（“#”+tlink）.attr（'href'），
$target=$（“#”+t按钮），
qstring=$.param（{url:href，count:“vertical”}），
toinsert=''；
$target.html（toinsert）；
}
$（“#hoverlink”）.mouseenter（函数（）{
RenderWeetButton（“tbutton”、“tlink”）；
});

对于任何遇到这种情况的人来说，有一种新的更简单的方法可以做到这一点（从2012年5月28日开始，如果不是以前的话）。快速浏览文档中没有找到它，但是您可以执行

twttr.widgets.load（）

。这将[重新]加载页面上的所有小部件

编辑：毕竟，它是文档化的。查看“优化”部分（您无法直接链接到该部分）

我也遇到了同样的问题，这在JQuery中有效：

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

在ajax调用之后，只需调用

twttr.widgets.load（）

。无需重新加载已加载的脚本。

我已经查看了@Anywhere，但我需要使用Tweet按钮而不是Tweet框。这里也有同样的问题！它在过去的24小时内就停止工作了！很好。首先，我担心我会得到多个冲突和开销的脚本，但我觉得jQuery可以处理这些！如果我的页面上有很多twitter按钮怎么办？我怎样才能只重新渲染一个（例如，在一个div中有and id的那一个）@MartinSchaer我认为你不能用这个方法。您将需要依赖基于iframe的方法或其他方法。这肯定是当前的答案。添加twttr.widgets.load（）将刷新加载twitter脚本后创建的div的所有twitter内容。谢谢！