javascript 如何动态创建推文按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6981905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I dynamically create a tweet button?
提问by Hyman
I'm currently trying to create a tweet button with the horizontal count feature dynamically:
我目前正在尝试动态创建具有水平计数功能的推文按钮：
JavaScript
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";
The problem i'm having is that the button is being displayed as a text link, not as a button with the horizontal count box.
我遇到的问题是该按钮显示为文本链接，而不是带有水平计数框的按钮。
I've created a facebook button in the same way, which works correctly, however to make it work I use the following:
我以相同的方式创建了一个 facebook 按钮，它可以正常工作，但是为了使其工作，我使用以下内容：
JavaScript
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';
using the following:
使用以下内容：
FB.XFBML.parse();
to parse and draw the button. FB.XFBML.parse()comes from
http://connect.facebook.net/en_US/all.js
解析和绘制按钮。FB.XFBML.parse()来自
http://connect.facebook.net/en_US/all.js
When I create the Tweet button statically inside a .html file it works correctly. I'm including the following script within my index page where the tweet button should be created dynamically:
当我在 .html 文件中静态创建 Tweet 按钮时，它可以正常工作。我在我的索引页面中包含以下脚本，其中应动态创建推文按钮：
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
If you can see what i'm doing incorrectly please inform me!
如果你能看到我做错了什么，请告诉我！
The following screenshot gives a visual explanation to what is going wrong with the tweet button!
以下屏幕截图直观地解释了推文按钮出了什么问题！
Solution:
解决方案：
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
我现在已经设法解决了这个问题。我想象的问题是 twitter 脚本在加载时运行，而不是在创建元素时重新运行。
using the following jQuery works correctly!
使用以下 jQuery 可以正常工作！
$.getScript("http://platform.twitter.com/widgets.js");
$.getScript(" http://platform.twitter.com/widgets.js");
回答by dougajmcdonald
It's worth noting that as of recently you can use the following twitter widget function:
值得注意的是，最近您可以使用以下 twitter 小部件功能：
twttr.widgets.load();
Assuming you've loaded the widgets.js file:
假设您已经加载了 widgets.js 文件：
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
This will dynamically re-create the tweet button for you.
这将为您动态地重新创建推文按钮。
回答by Hyman
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
我现在已经设法解决了这个问题。我想象的问题是 twitter 脚本在加载时运行，而不是在创建元素时重新运行。
using the following jQuery works correctly!
使用以下 jQuery 可以正常工作！
$.getScript("http://platform.twitter.com/widgets.js");
回答by Some Guy
You're just using the wrong code. To specify the URL, you use url, not data-url. This works:
你只是使用了错误的代码。要指定 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";
For more details, check out Twitter's documentation at https://dev.twitter.com/docs/tweet-button#properties
有关更多详细信息，请在https://dev.twitter.com/docs/tweet-button#properties查看 Twitter 的文档
