3

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

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

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

4

3 回答 3

5

你可以使用：

twttr.widgets.load();
于 2012-05-15T17:52:49.623 回答
1

我终于找到了一种方法来做到这一点。它不像 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>
于 2011-09-07T18:24:40.000 回答
1

Sharrre就是您要找的。它支持很多社交网络，包括 Twitter。

于 2012-01-25T20:32:43.427 回答