2011-06-01 59 views

回答

0

試試@Anywhere庫。樣品的js代碼:

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

我已經看過@Anywhere,但我需要使用Tweet按鈕而不是Tweet框。 – 2011-06-01 19:36:48

45

我在web找到答案。這個想法是重新請求Twitter的JavaScript文件。由於它被緩存,所以沒有下載開銷。

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

工作正常。首先我擔心我會得到多個衝突和開銷的腳本,但我似乎jQuery處理它! – snobojohan 2011-08-24 12:00:50

+0

如果我的網頁上有很多twitter按鈕,該怎麼辦?我怎麼才能重新渲染只有一個(例如一個div內的一個和ID) – 2012-07-17 20:50:03

+0

@MartinSchaer我不認爲你可以用這種方法。您需要依靠基於iframe的方法或其他方法。 – Aurimas 2012-07-18 22:13:08

1

首先,確保你有包含在文檔的頭部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> 
23

對於任何磕磕絆絆到這一點,有一個新的,更簡單的方式做到這一點(截至2012年5月28日,如果不是之前)。快速瀏覽沒有在文檔中找到它,但你可以做twttr.widgets.load()。這將[加載]頁面上的所有小部件。

編輯:它被記錄在案,畢竟。退房this page的‘優化’部分(你不能鏈接到直接)

+0

這絕對是當前的答案。添加twttr.widgets.load()將刷新Twitter腳本加載後創建的div的所有twitter內容。非常感謝! – knutole 2013-12-18 05:50:14

+0

使用Rails應用程序。此解決方案工作。 – 2016-06-18 17:32:20

1

我有同樣的問題,這部作品在JQuery的:

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

你只需要後調用twttr.widgets.load()您阿賈克斯呼籲。無需重新加載已加載的腳本。