How to add a Tweet Button in WebHelp Responsive output using a transformation scenario

To add a Twitter™ Tweet widget to your WebHelp Responsive output using a transformation scenario, follow this procedure:

Go to the Tweet button generator page.
Fill-in the displayed form. The Preview and code area displays the code that you will need.

Copy the code snippet displayed in the Preview and code area and paste it into a div element inside an XML file called tweet-button.xml. Make sure you follow these rules:

The file must be well-formed.
The code for each script element must be included in an XML comment.
The start and end tags for the XML comment must be on a separate line.

The content of the XML file should look like this:

<div id="twitter">
  <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
  <script>
    <!-- 
    !function (d, s, id) {
    var
    js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location)
? 'http': 'https';
    if (! d.getElementById(id)) {
    js = d.createElement(s);
    js.id = id;
    js.src = p + '://platform.twitter.com/widgets.js';
    fjs.parentNode.insertBefore(js, fjs);
    }
    }
    (document,
    'script', 'twitter-wjs');
     -->
  </script>
</div>

Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
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 tweet-button.xml file that you created earlier.
Click Ok and run the transformation scenario.