如何动态创建推文按钮？

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

当我创建Tweet 按钮静态地位于 .html 文件内，它可以正常工作。我在我的索引页面中包含以下脚本，其中应动态创建推文按钮：

<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>

这将为您动态地重新创建 tweet 按钮。

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

有关更多详细信息，请查看 Twitter 的文档 https://dev.twitter.com /docs/tweet-button#properties