How to create a Social Sharing Widget in DXM

[RichardHamlyn]

• Create the widget styles
• Create the widget template
• Create your widget asset
• Special consideration
• Final view of a widget added to a Blog Post in Surety

You can use a widget to create a single piece of content that is centrally controlled and re-used across a site. The example on this page implements a social sharing widget; however, you could also apply this technique to any fixed content asset.

Note: The specific social sharing buttons can be switch on/off.

Create the widget styles

1. In your site root, navigate to the folder where you store your CSS assets.
2. Create a new developerCS asset.
3. Name the asset social.css and add the following:

#container{
text-align: center;
}
.social-links a {
    margin: 5px;
    display: inline-block;
text-align: center;
  }
  .social-links .fa-facebook { color: #3b5998; font-size: 42px; }
  .social-links .fa-twitter-square { color: #55acee; font-size: 42px; }
  .social-links .fa-linkedin { color: #0e76a8; font-size: 42px; }
  .social-links .fa-pinterest-square { color: #bd081c; font-size: 42px; }

/* Add new CSS corresponding to additional Social Sharing requirements */

Create the widget template

1. In your Project > Templates folder, create a new template and name it input.aspx.
2. Add the fields to manage each social sharing button, as shown in the example below.

<%
	Input.StartTabbedPanel("Facebook", "LinkedIn", "Twitter", "Pintrest", "Others");
    Input.ShowHeader("Facebook");
	Input.ShowCheckBox("", "facebook_active", "y", "Facebook Active");
	
	Input.NextTabbedPanel();
	Input.ShowHeader("LinkedIn");
	Input.ShowCheckBox("", "linkedin_active", "y", "LinkedIn Active");

	Input.NextTabbedPanel();
	Input.ShowHeader("Twitter");
	Input.ShowCheckBox("", "twitter_active", "y", "Twitter Active");
	Input.ShowTextBox("Twitter Username", "twitter_username");

	Input.NextTabbedPanel();
	Input.ShowHeader("Pintrest");
	Input.ShowCheckBox("", "pintrest_active", "y", "Pintrest Active");

    Input.NextTabbedPanel();
	Input.ShowHeader("Others");
	Input.ShowMessage("Add others as required!", MessageType.Warning);
%>

The output.aspx should look like the following:

<!-- Include your CSS and also font awesome for the social buttons -->
<%= ServicesOutput.RenderCSSLink("<your_path_to_your_css>/social.css") %>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<!-- HTML Form -->

<div id="container">
<h2><i class="fas fa-share-alt-square fa-1x" style="color:silver"></i></h2>
<p>
Share with others
</p>
<!-- Adjust the link variables if you want to use in other content types -->
<div id="social-links" class="social-links">
<a href="https://www.facebook.com/sharer/sharer.php?u=<%= asset.GetLink(true, ProtocolType.Https) %>&t=<%= asset["header_headline"] %>" target="_blank" title="Share on Facebook" style="display: none;" id="fb_link"><i class="fab fa-facebook"></i></a>
<a href="https://twitter.com/intent/tweet?source=<%= asset.GetLink(true, ProtocolType.Https) %>&text=<%= asset["header_headline"] %>:<%= asset.GetLink(true, ProtocolType.Https) %>&via=<%= asset["twitter_username"] %>" target="_blank" title="Tweet" style="display: none;" id="tw_link"><i class="fab fa-twitter-square"></i></a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= asset.GetLink(true, ProtocolType.Https) %>&title=<%= asset["header_headline"] %>summary=<%= asset["blog_headline"] %>&source=<%= asset["page_source"] %>" target="_blank" title="Share on LinkedIn" style="display: none;" id="li_link"><i class="fab fa-linkedin"></i></a>
<a href="http://pinterest.com/pin/create/button/?url=<%= asset.GetLink(true, ProtocolType.Https) %>&description=<%= asset["blog_headline"] %>" target="_blank" title="Pin it" style="display: none;" id="pn_link"><i class="fab fa-pinterest-square"></i></a>
</div>
</div>

Script 
**Note, you can add this inline or in a separate .js

<script>
	//Get the setting from show social button from the form
	var fb_status = "<%= asset["facebook_active"] %>";
	var tw_status = "<%= asset["twitter_active"] %>";
	var li_status = "<%= asset["linkedin_active"] %>";
	var pn_status = "<%= asset["pintrest_active"] %>";
	
	//Get document element (social link)
	var social_facebook = document.getElementById("fb_link");
	var social_twitter = document.getElementById("tw_link");
	var social_linkedin = document.getElementById("li_link");
	var social_pintrest = document.getElementById("pn_link");
		
		//Check status of social sharing icons
		if (fb_status == "y"){ //Facebook
		social_facebook.style.display = "inline-block"; //Switch on widget if user has set to true in Form Mode
		} else{
		social_facebook.style.display ="none"; //Switch off for anything else
		}
		if (tw_status == "y"){ //Twitter
		social_twitter.style.display = "inline-block"; 
		} else{
		social_twitter.style.display ="none"; 
		}
		if (li_status == "y"){ //LinkedIn
		social_linkedin.style.display = "inline-block"; 
		} else{
		social_linkedin.style.display ="none"; 
		}
		if (li_status == "y"){ //Pintrest
		social_pintrest.style.display = "inline-block"; 
		} else{
		social_pintrest.style.display ="none"; 
		}
</script>

Create your widget asset

1. Navigate to the location where you want to store your widget.
2. Create a new asset using the template you created above.
3. Open the asset in Forms editing mode:
   
   
   Notice that the Twitter social sharing function requires a username, while the others only require you to switch them on or off.
   
   
4. You can now add the widget to other content types by adding a link to the Template like the following:
   

   //Load Social Sharing Widget
   Asset socialWidget = Asset.Load("<path_to_your_social_sharing_widget>/Social Sharing Widget");
   string showSocialWidget = socialWidget.Show();

Special consideration

If you look at the JavaScript code in the output.aspx file, you'll see that the href element for each social button contains the asset.GetLink() method, which will provide the URL of the published page that you are sharing. This makes the function dynamic so that it applies to each page of a content type that you publish, which makes sense in this scenario.

However, it does means that the function won't work in Preview (inside the CMS), which also makes sense because there is no page to share there.

The Template tags <%= asset["header_headline"]%> and <%= asset["blog_headline"]%> and <%= asset["page_source"]%> are all fields loaded from the specific asset that the social sharing widget is loaded inside. This also makes the content dynamic and relevant to a specific asset (page).

Note: You must map these tags to fields in your own content type where you are deploying the widget.

Final view of a widget added to a Blog Post in Surety