QR code for this page

Powered by Titania Delivery

How to Add a Facebook Like Button in WebHelp Responsive Output

To add a Facebook™ Like widget to your WebHelp output, follow these steps:

  1. Go to the Facebook Developers website.
  2. Fill-in the displayed form, then click the Get Code button.
    A dialog box that contains code snippets is displayed.
  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. In Oxygen XML Developer plugin, click the Configure Transformation Scenario(s) action from the toolbar.
  5. Select an existing WebHelp Responsive transformation scenario (depending on your needs, it may be with or without feedback) and click the Duplicate button to open the Edit Scenario dialog box.
  6. 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.
  7. Click Ok.
  8. Run the transformation scenario.
Parent topic: Integrating Social Media and Google Tools in WebHelp Output

Was this helpful?