是否可以通过JavaScript按钮明确呈现推文按钮？
[英]Can a Tweet Button Be Rendered Explicitly With Javascript Like Google+ Buttons?
问题描述
Google+ allows developers to utilize what they call an "explicit render" to display the Google+ button only when a particular event takes place on the page (see: http://code.google.com/apis/+1button/#example-explicit-render ). 
Google+允许开发人员利用他们称之为“显式呈现”的内容，仅在页面上发生特定事件时才显示Google+按钮（请参阅： http ： //code.google.com/apis/+1button/#example-explicit - 渲染 ）。 This is very helpful on pages where multiple buttons are required. 这在需要多个按钮的页面上非常有用。
Twitter, however, renders a tweet button (using an iframe) in the place of each link on the page with the class "twitter-share-button". 然而，Twitter在页面上的每个链接的位置使用类“twitter-share-button”呈现推文按钮（使用iframe）。 This causes very slow page loads (even when I load Twitter's widget.js asynchronously after the DOM is loaded. 这会导致非常慢的页面加载（即使我在加载DOM后异步加载Twitter的widget.js）。
Does anyone know of a way to mimic the Google+ explicit render for Tweet buttons, or a way to render a Tweet button only when a certain DOM event takes place (like mouseover)? 有没有人知道模仿用于Tweet按钮的Google+显式渲染的方法，或仅在发生某个DOM事件时呈现Tweet按钮的方式（如鼠标悬停）？
3 个解决方案
解决方案1
5 2012-05-15 17:52:49
你可以使用：
twttr.widgets.load();
解决方案2
1 已采纳 2011-09-07 18:24:40
I finally found a way to do this. 我终于找到了办法。 It's not nearly as clean as the Google+ button, but here it is: 它不像Google+按钮那么干净，但它是：
First, make sure you have jQuery included in your document's head: 首先，确保您的文档头部中包含jQuery：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Then create a link that has the same URL as the eventual tweet button, along with an empty div where your button will be rendered: 然后创建一个与最终推文按钮具有相同URL的链接，以及一个用于呈现按钮的空div：
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
At the bottom of your page, right above the /body tag, include the javascript from Twitter and the function that will render the button, as well as the listener that will activate the function when the desired event takes place: 在页面底部，在/ body标记的正上方，包括来自Twitter的javascript以及将呈现按钮的函数，以及在所需事件发生时将激活该函数的侦听器：
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
Lastly, add a link to your page somewhere that will activate the function above based on some event: 最后，根据某些事件添加一个链接到您的页面，该链接将激活上面的功能：
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
That's it. 而已。
If you want the entire test HTML page to see how I've got it working, see here: 如果您希望整个测试HTML页面看到我如何工作，请看这里：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Twitter Button Render Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>
<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>
<script type="text/javascript">
//async script, twitter button fashiolista.com style
(function() {
var s = document.createElement('SCRIPT');
var c = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.defer = "defer";
s.async = true;
s.src = 'http://platform.twitter.com/widgets.js';
c.parentNode.insertBefore(s, c);
})();
function renderTweetButton(tbutton,tlink){
var href = $("#"+tlink).attr('href'),
$target = $("#"+tbutton),
qstring = $.param({ url: href, count: "vertical" }),
toinsert = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?'+qstring+'" style="width:57px; height:70px;"></iframe>';
$target.html(toinsert);
}
$("#hoverlink").mouseenter(function() {
renderTweetButton("tbutton","tlink");
});
</script>
</body>
</html>
解决方案3
1 2012-01-25 20:32:43
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.