- Overview
- Social Sign-in Widget
- User Registration Widget
- Social Sharing Widget
- Provider Setup Guide
- One-Click Sharing Widget
- Legacy Sign-in Widget
- Legacy Sharing Widget
Hosting Multiple Widgets
The Social Sharing Widget may be configured to work with several different links on the same web page. Instead of using several different widget instances, this implementation uses the same code for each link, but changes the widget settings as needed.
This example creates a web page hosting two links, which launch the Social Sharing Widget to share with either Facebook or LinkedIn, respectively. The script shown in Code Example 1 should be placed in the <head> of the website.
<script>
var janrainShareOnload = function() {
var anchors = document.getElementsByTagName("a");
//facebook link
anchors[0].onclick = function() {
janrain.engage.share.reset();
janrain.engage.share.setUrl('http://facebook.com/');
janrain.engage.share.showProvider('facebook');
janrain.engage.share.show();
};
//linkedin link
anchors[1].onclick = function() {
janrain.engage.share.reset();
janrain.engage.share.setUrl('http://linkedin.com/');
janrain.engage.share.showProvider('linkedin');
janrain.engage.share.show();
};
}
</script>
Code Example 1: Setting Up Multiple Setting Profiles
This script will change the widget javaScript settings depending on the link clicked on the website. Use a standard hyperlink to link to the ‘Facebook’ or ‘LinkedIn’ setting profile in the <body> of the website, as shown in Code Example 2.
<a href="#">Facebook</a> <br/> <a href="#">LinkedIn</a>
Code Example 2: Links to Different Widget Profiles
When clicked, each link will present a different interpretation of the widget to the user, effectively allowing the website to host multiple social sharing widgets.
This example is only one way to approach the behavior of multiple widgets. Using the basic concept, much more customized or specific implementations can be achieved via the Social Sharing Widget JavaScript API.