如何动态创建推文按钮？

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");