可以像 Google+ 按钮一样使用 Javascript 显式呈现 Tweet 按钮吗？答案

【问题标题】：Can a Tweet Button Be Rendered Explicitly With Javascript Like Google+ Buttons?可以像 Google+ 按钮一样使用 Javascript 显式呈现 Tweet 按钮吗？
【发布时间】：2012-05-16 07:22:01
【问题描述】：

Google+ 允许开发人员利用他们所谓的“显式渲染”来仅在页面上发生特定事件时显示 Google+ 按钮（请参阅：http://code.google.com/apis/+1button/#example-explicit-render）。这在需要多个按钮的页面上非常有用。

然而，Twitter 会在页面上的每个链接的位置呈现一个推文按钮（使用 iframe），并带有“twitter-share-button”类。这会导致页面加载速度非常慢（即使我在加载 DOM 后异步加载 Twitter 的 widget.js。

有谁知道模仿 Google+ 显式渲染 Tweet 按钮的方法，或者只有在发生特定 DOM 事件（如鼠标悬停）时才渲染 Tweet 按钮的方法？

【问题讨论】：

标签： javascript twitter google-plus

【解决方案1】：

你可以使用：

twttr.widgets.load();

【讨论】：

【解决方案2】：

我终于找到了一种方法来做到这一点。它不像 Google+ 按钮那么干净，但它是这样的：

首先，确保您的文档头部包含 jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

然后创建一个链接，该链接与最终的推文按钮具有相同的 URL，以及一个空的 div，您的按钮将在其中呈现：

<a href="http://www.my-site-to-tweet-about.com" id="tlink"></a>
<div id="tbutton"></div>

在页面底部，在 /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>

最后，在页面的某处添加一个链接，该链接将根据某些事件激活上述功能：

<a href="#" id="hoverlink">Hover here to render a tweet button to div#tbutton.</a>

就是这样。

如果您希望整个测试 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>

【讨论】：

虽然自己构建 iframe URL 不是一种不受支持 / 反对 TOS 生成按钮的方法吗？

【解决方案3】：

Sharrre 是您正在寻找的。它支持很多社交网络，包括 Twitter。

【讨论】：