How to Add a Google+ Button in WebHelp Classic Output
Edit online

It is possible to integrate Google into your WebHelp Classic output and the widget will appear in the footer section of your WebHelp page.

Using Oxygen XML Editor/Author

To add a Google+ widget to your WebHelp Classic output using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:
  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 Editor/Author, 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 and edit the webhelp.footer.file parameter to reference the google-plus-button.xml file that you created earlier.
  7. Click Ok and run the transformation scenario.

Using a Script Outside of Oxygen XML Editor/Author

Important: Running WebHelp transformations from a script outside of Oxygen XML Editor/Author requires an additional license and some additional setup:
To add a Google+ widget to your WebHelp Classic output using a script outside of Oxygen XML Editor/Author, follow this procedure:
  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. Use the webhelp.footer.file parameter in your transformation script and set its value to reference the google-plus-button.xml file that you created earlier.
  5. Execute the transformation script.
    For example:
    • Windows:

      dita.bat -i c:\mySample.ditamap -f webhelp -Dwebhelp.footer.file=c:\google-plus-button.xml

    • Mac OS X/ Linux:

      dita -i /mySample.ditamap -f webhelp -Dwebhelp.footer.file=/google-plus-button.xml