如何動態創建推文按鈕？

Question

我目前正在嘗試動態創建具有水平計數功能的推文按鈕：

JavaScript的

var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";

我遇到的問題是該按鈕顯示為文本鏈接，而不是帶有水平計數框的按鈕。

我以相同的方式創建了一個facebook按鈕，它可以正常工作，但為了使它工作，我使用以下內容：

JavaScript的

var facebook = document.createElement('fb:like');
facebook.setAttribute('id', 'like'+this.id);
facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id);    
facebook.setAttribute('layout', 'button_count');
facebook.setAttribute('send', 'false');        
facebook.setAttribute('width' , '300');
facebook.setAttribute('font', '');
facebook.setAttribute('show_faces', 'true');
facebook.style.top = '0px';
facebook.style.left = '300px';

使用以下內容：

FB.XFBML.parse();

解析並繪制按鈕。 FB.XFBML.parse()來自http://connect.facebook.net/en_US/all.js

當我在.html文件中靜態創建Tweet按鈕時，它可以正常工作。 我在索引頁面中包含以下腳本，其中應該動態創建tweet按鈕：

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

如果你能看到我做錯了什么，請通知我！

以下屏幕截圖給出了推文按鈕出現問題的可視化解釋！

解：

我現在設法解決了這個問題。 我想象的問題是twitter腳本在加載時運行，而不是在創建元素時重新運行。

使用以下jQuery正常工作！

$ .getScript（“ http://platform.twitter.com/widgets.js ”）;

Answer 1

值得注意的是，截至最近，您可以使用以下twitter小部件功能：

twttr.widgets.load();

假設您已加載widgets.js文件：

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

這將動態地為您重新創建推文按鈕。

Answer 2

我現在設法解決了這個問題。 我想象的問題是twitter腳本在加載時運行，而不是在創建元素時重新運行。

使用以下jQuery正常工作！

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

Answer 3

你只是使用了錯誤的代碼。 要指定URL，請使用url，而不是data-url。 這有效：

var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";

有關更多詳細信息，請訪問https://dev.twitter.com/docs/tweet-button#properties查看Twitter的文檔。