如何动态创建推文按钮？

我目前正在试图建立与动态水平计数功能鸣叫按钮：如何动态创建推文按钮？

的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

如何动态创建推文按钮？

回答

相关问题