How to add a Facebook Like button in WebHelp Responsive output using a publishing template

It is possible to integrate Facebook™ into your WebHelp Responsive output and the widget will appear in the footer sections of your WebHelp page.

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

  1. Go to the Facebook Developers website.
  2. Fill-in the displayed form, then click the Get Code button.
  3. 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>
  4. Open the template descriptor file associated with your publishing template.
  5. Use one of the parameters that begin with webhelp.fragment in the html-fragments section of the descriptor file. Set the value of that parameter to reference the facebook-widget.xml file that you created earlier.
    <publishing-template>
    ...
    <webhelp>
    ...                
    <html-fragments>
    <fragment 
    file="HTML-fragments/facebook-widget.xml" 
    placeholder="webhelp.fragment.after.toc_or_tiles"/>
    </html-fragments>
    </webhelp>
  6. Open the DITA Map WebHelp Responsive transformation scenario.
  7. Click the Choose Custom Publishing Template link and select your template.
  8. Click OK to save the changes to the transformation scenario.
  9. Run the transformation scenario.