Multiple Widgets

The Widget
The Code

Sometimes a page might need to contain multiple social sharing links, in which case the usual “janrainEngageShare” ID will not work. In these circumstances, we can use the social sharing JavaScript API to launch the widget from different elements and/or events.

<!doctype html>
<head>
<script type="text/javascript">
(function() {
    if (typeof window.janrain !== 'object') window.janrain = {};
    if (typeof window.janrain.settings !== 'object') window.janrain.settings = {};
    if (typeof window.janrain.settings.share !== 'object') window.janrain.settings.share = {};
    if (typeof window.janrain.settings.packages !== 'object') janrain.settings.packages = [];
    janrain.settings.packages.push('share');

    /* _______________ can edit below this line _______________ */

    janrain.settings.share.message = "Janrain is really amazing.";
    janrain.settings.share.title = "Janrain is awesome!";
    janrain.settings.share.url = "http://janrain.com/";
    janrain.settings.share.description = "Janrain is more awesome than ever before.";

    /* _______________ can edit above this line _______________ */

    function isReady() { janrain.ready = true; };
    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", isReady, false);
    } else {
        window.attachEvent('onload', isReady);
    }

    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.id = 'janrainWidgets';

    if (document.location.protocol === 'https:') {
        e.src = 'https://rpxnow.com/js/lib/widget-examples-pro/share_beta.js';
    } else {
        e.src = 'http://widget-cdn.rpxnow.com/js/lib/widget-examples-pro/share_beta.js';
    }

    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(e, s);
})();

// Use the share widget loaded event to ensure that the share widget is loaded completely
var janrainShareOnload = function() {
    var facebookShare = document.getElementById("facebookShare");
    var twitterShare = document.getElementById("twitterShare");

    // Let's use the onclick event to bring up the widget
    facebookShare.onclick = function() {
        // Reset the widget
        janrain.engage.share.reset();
        // Preselect the desired provider
        janrain.engage.share.showProvider("facebook");
        // Show the widget
        janrain.engage.share.show();
    };
    twitterShare.onclick = function() {
        janrain.engage.share.reset();
        janrain.engage.share.showProvider("twitter");
        janrain.engage.share.show();
    };
};
</script>
</head>
<body>
<a id="facebookShare" href="#">Share on Facebook</a>
<a id="twitterShare" href="#">Share on Twitter</a>
</body>
</html>

Help Us Improve!

Give us your feedback