How to Add a Google+ Button in WebHelp Responsive Output

See how you can add a Google+ widget into your WebHelp Responsive output.

To add a Google+ widget to your WebHelp Responsive output, follow these steps:

  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. In Oxygen XML Author, click the Configure Transformation Scenario(s) action from the toolbar (or the Document > Transformation menu.
  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 google-plus-button.xml file that you created earlier.
  7. Click Ok.
  8. Run the transformation scenario.