CODEWITHSUNDEEP
javascriptajaxtwitter
Koes Bong
Koes Bong

Reputation: 1113

Re-render Tweet button via JS

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?

Upvotes: 19

Views: 14059

Answers (7)

madoke
madoke

Reputation: 873

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

Upvotes: 10

Jamie
Jamie

Reputation: 3051

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

$.getScript('http://platform.twitter.com/widgets.js');

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98816

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.

Upvotes: 4

Juan P
Juan P

Reputation: 330

For anyone stumbling onto this, there's a new, easier way to do it (as of 5/28/12 if not before). A quick glance didn't find it in the documentation, but you can do twttr.widgets.load(). That'll [re]load all the widgets on the page.

EDIT: It is documented, after all. Check out this page's "Optimization" section (which you can't link to directly)

Upvotes: 23

ChiCgi
ChiCgi

Reputation: 755

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>

Upvotes: 1

Aurimas
Aurimas

Reputation: 2493

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});

Upvotes: 45

Teddy
Teddy

Reputation: 18572

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"
});

Upvotes: 0

Related Questions