Re-render Tweet button via JS

2019-02-02 06:39发布

站内问答 / JavaScript
1037 7 5

I used to use this snippet to re-render a Tweet button.

var tweetButton = new twttr.TweetButton(twitterScript);
twttr.render();

But it looks like widgets.js (http://platform.twitter.com/widgets.js) has been modified so twttr.TweetButton is no longer a constructor.

Can anyone help with this issue?

7条回答
手持菜刀，她持情操
2楼-- · 2019-02-02 07:10

First, make sure you have jQuery included in your document's head:

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

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

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

<!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>
查看更多
0人赞 添加讨论(0) 举报
不美不萌又怎样
3楼-- · 2019-02-02 07:11

Try the @Anywhere library. Sample js code:

twttr.anywhere(function (T) {
        T("#tweetbox").tweetBox({
        counter: false,
        defaultContent: "Default text in a Tweet box...",
        label: "Share this page on Twitter"
});
查看更多
0人赞 添加讨论(0) 举报
放我归山
4楼-- · 2019-02-02 07:15

I found the answer on the web. The idea is to re-request the Twitter javascript file. As it is cached, there is no download overhead.

$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
查看更多
0人赞 添加讨论(0) 举报
狗以群分
5楼-- · 2019-02-02 07:19

Looks like the twttr.TweetButton constructor was never supported, and now no longer works after the last API update:

The supported method is to create an iframe-based Tweet button dynamically:

Although note @Runningskull’s answer for updated information.

查看更多
0人赞 添加讨论(0) 举报
The star\"
6楼-- · 2019-02-02 07:20

you just need to call twttr.widgets.load() after your ajax call. no need to reload a script that is already loaded.

查看更多
0人赞 添加讨论(0) 举报
傲
7楼-- · 2019-02-02 07:20

I just had the same problem, this works in JQuery:

$.getScript('http://platform.twitter.com/widgets.js');
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)