Custom User Interface
The Code
The social sharing widget can be stripped down to simply the JavaScript API, meaning an entirely custom interface can be crafted for any purpose. By changing the “custom” setting to true, the widget will not render and instead expose three new functions for use within a custom GUI: “login”, “send”, “loginAndSend”.
By combining these functions with the Janrain JavaScript event system, the social sharing widget can take on limitless forms. Below is a very simple example of how to set up buttons that will automatically share a predefined messaged.
<!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.custom = true;
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/test-app/share_beta.js?minify=false&4034576187';
} else {
e.src = 'http://rpxnow.com/js/lib/test-app/share_beta.js?minify=false&4034576187';
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
})();
var janrainShareOnload = function() {
var facebookShare = document.getElementById("facebookShare");
// Let's use an onclick event for the button
facebookShare.onclick = function() {
// The "loginAndSend" function is available when "custom" is set to true
janrain.engage.share.loginAndSend({
// This needs to be an object with the relevant
// data to be posted.
"provider":"facebook",
// We want to broadcast this to our friends, not
// send to individuals specifically
"mode":"broadcast",
// We can leave this blank because we are broadcasting
"contacts":[],
// This URL will be shortened by Janrain to provide
// extensive analytic capabilities
"url":"http://janrain.com",
"title":"Janrain is awesome!",
"description":"Janrain is awesome and then some",
"message":"I love Janrain! Check it out everyone!",
// Any of these settings will be ignored if the
// provider does not support them. Fortunately
// Facebook supports a lot
"image":"http://janrain.com/thumbnail.png",
"media":"http://janrain.com/video.swf",
"actionLink":{
"name":"Login!",
"link":"http://janrain.com"
}
});
};
};
</script>
</head>
<body>
<button id="facebookShare">Post on your Wall</button>
</body>
</html>