我曾經使用this snippet重新呈現鳴叫按鈕。通過JS重新呈現鳴叫按鈕
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
但它看起來像widgets.js(http://platform.twitter.com/widgets.js)進行了修改,twttr.TweetButton不再是一個構造函數。
任何人都可以幫助解決這個問題嗎?
我曾經使用this snippet重新呈現鳴叫按鈕。通過JS重新呈現鳴叫按鈕
var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();
但它看起來像widgets.js(http://platform.twitter.com/widgets.js)進行了修改,twttr.TweetButton不再是一個構造函數。
任何人都可以幫助解決這個問題嗎?
貌似twttr.TweetButton
構造從未支持,最後API更新後現在已經不再適用:
支持的方法是創建基於iframe
的動態按鈕:
雖然注意@Runningskull’s answer獲取更新的信息。
試試@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,但我需要使用Tweet按鈕而不是Tweet框。 – 2011-06-01 19:36:48
我在web找到答案。這個想法是重新請求Twitter的JavaScript文件。由於它被緩存,所以沒有下載開銷。
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
工作正常。首先我擔心我會得到多個衝突和開銷的腳本,但我似乎jQuery處理它! – snobojohan 2011-08-24 12:00:50
如果我的網頁上有很多twitter按鈕,該怎麼辦?我怎麼才能重新渲染只有一個(例如一個div內的一個和ID) – 2012-07-17 20:50:03
@MartinSchaer我不認爲你可以用這種方法。您需要依靠基於iframe的方法或其他方法。 – Aurimas 2012-07-18 22:13:08
首先,確保你有包含在文檔的頭部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>
對於任何磕磕絆絆到這一點,有一個新的,更簡單的方式做到這一點(截至2012年5月28日,如果不是之前)。快速瀏覽沒有在文檔中找到它,但你可以做twttr.widgets.load()
。這將[加載]頁面上的所有小部件。
編輯:它被記錄在案,畢竟。退房this page的‘優化’部分(你不能鏈接到直接)
這絕對是當前的答案。添加twttr.widgets.load()將刷新Twitter腳本加載後創建的div的所有twitter內容。非常感謝! – knutole 2013-12-18 05:50:14
使用Rails應用程序。此解決方案工作。 – 2016-06-18 17:32:20
我有同樣的問題,這部作品在JQuery的:
$.getScript('http://platform.twitter.com/widgets.js');
你只需要後調用twttr.widgets.load()
您阿賈克斯呼籲。無需重新加載已加載的腳本。
同樣的問題在這裏!它在過去24小時內停止工作! – 2011-06-02 05:54:23