Home/ Questions/Q 6533441
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T10:07:33+00:00

Google+ allows developers to utilize what they call an explicit render to display the

  • 0

Google+ allows developers to utilize what they call an “explicit render” to display the Google+ button only when a particular event takes place on the page (see: http://code.google.com/apis/+1button/#example-explicit-render). This is very helpful on pages where multiple buttons are required.

Twitter, however, renders a tweet button (using an iframe) in the place of each link on the page with the class “twitter-share-button”. This causes very slow page loads (even when I load Twitter’s widget.js asynchronously after the DOM is loaded.

Does anyone know of a way to mimic the Google+ explicit render for Tweet buttons, or a way to render a Tweet button only when a certain DOM event takes place (like mouseover)?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I finally found a way to do this. It’s not nearly as clean as the Google+ button, but here it is:

    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