Re-render Tweet Button Via Js

February 25, 2024 Post a Comment

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.twitt

Solution 1:

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

Solution 2:

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)

Solution 3:

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

Solution 4:

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

http://groups.google.com/group/twitter-development-talk/browse_thread/thread/bcda486acdf4ab42/6a557050f850ccf2?lnk=gst&q=+twttr.TweetButton#6a557050f850ccf2

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

http://dev.twitter.com/pages/tweet_button#using-an-iframe

Although note @Runningskull’s answer for updated information.

Solution 5:

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

Baca Juga

<scripttype="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:

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

functionrenderTweetButton(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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8" /><title>jQuery Twitter Button Render Test</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head><body><ahref="http://www.my-site-to-tweet-about.com"id="tlink"></a><divid="tbutton"></div><ahref="#"id="hoverlink">Hover here to render a tweet button to div#tbutton.</a><scripttype="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);
    })();

functionrenderTweetButton(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>

JavaScript Free