How to add a Google+ button in WebHelp Responsive output using a transformation scenario

To add a Google+ widget to your WebHelp Responsive output using a transformation scenario, follow this procedure:

  1. Go to the Google Developers website.
  2. Fill-in the displayed form. The preview area on the right side displays the code and a preview of the widget.
  3. Copy the code snippet displayed in the preview area and paste it into a div element inside an XML file called google-plus-button.xml. Make sure that the content of the file is well-formed. The content of the XML file should look like this: 
    <div id="google-plus">
						<!-- Place this tag in your head or just before your close body tag. -->
						<script src="https://apis.google.com/js/platform.js" async defer></script>
						
						<!-- Place this tag where you want the +1 button to render. -->
						<div class="g-plusone" data-annotation="inline" data-width="300"></div>
						</div>
  4. Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
  5. Switch to the Parameters tab. Depending on where you want to display the button, edit one of the parameters that begin with webhelp.fragment. Set that parameter to reference the google-plus-button.xml file that you created earlier.
  6. Click Ok and run the transformation scenario.