How to add a Google+ button in WebHelp Responsive output using a publishing template

It is possible to integrate Google into your WebHelp Responsive output and you can specify where you want the widget to appear in your WebHelp page.

To add a Google+ widget to your WebHelp Responsive using an oXygen Publishing Template, 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. 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 google-plus-button.xml file that you created earlier. 
    <publishing-template>
    ...
    <webhelp>
        ...                
      <html-fragments>
        <fragment 
          file="HTML-fragments/google-plus-button.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.