How to add a Facebook Like button in WebHelp Responsive output using a transformation scenario

To add a Facebook™ Like widget to your WebHelp output using a transformation scenario, follow this procedure:

Go to the Facebook Developers website.
Fill-in the displayed form, then click the Get Code button.

Copy the two code snippets and paste them into a <div> element inside an XML file called facebook-widget.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="facebook">
    <div id="fb-root"/>
    <script>
        <!-- 
            (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
        fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk')); 
        -->
    </script>
    <div class="fb-like" data-layout="standard" data-action="like"
        data-show-faces="true" data-share="true"/>
</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 facebook-widget.xml file that you created earlier.
Click Ok and run the transformation scenario.