如何動態創建推文按鈕？

我目前正在試圖建立與動態水平計數功能鳴叫按鈕：如何動態創建推文按鈕？

的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按鈕時，它可以正常工作。我包括我的索引頁中的以下腳本，鳴叫按鈕應該是動態創建：

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

如果你能看到我在做什麼錯誤，請告訴我！

下面的屏幕截圖給出了一個視覺解釋鳴叫按鈕出了什麼問題！ Tweet button not displaying correctly.

解決方案：

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

使用以下jQuery正常工作！

$ .getScript（「http://platform.twitter.com/widgets.js」）;

來源

2011-08-08 Jack

你應該把解決方案作爲答案，並關閉問題 – Chamilyan

這是值得注意的是，截至日前，你可以使用下面的Twitter的插件功能：

twttr.widgets.load();

假設您已經加載的部件。js文件：

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

這會動態地爲您重新創建推文按鈕。

來源

2012-04-02 21:16:27 dougajmcdonald

這實際上是一個更好的解決方案，如果您只是希望腳本（重新）創建按鈕，而不是強制重新加載。 –

您只是使用了錯誤的代碼。要指定網址，請使用網址，而不是數據網址。這工作：

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

來源

2011-08-08 13:30:15

感謝您的網址信息，但我遇到的主要問題是與鳴叫按鈕顯示爲文本。我已經做了一個截圖來向你展示我的意思。 http://i.imgur.com/J1qoA.png – Jack

您正在使用哪種瀏覽器？這適用於我在Chrome 編輯：只是在Firefox中試過。我明白你的意思了。我會看看我能否幫忙。 –

@Jack你可以嘗試啓動Firefox控制檯嗎？我從Twitter的twimg.com域中收到了一些CSS樣式表錯誤。編輯：突然，我沒有得到更多的警告，但問題依然存在。：/ –

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

使用以下jQuery正常工作！

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

來源

2011-08-08 21:04:59 Jack

如何動態創建推文按鈕？

回答

相關問題