How to Add Tweet Button in WebHelp Responsive Output

It is possible to integrate X™ (formerly known as Twitter) into your WebHelp Responsive output and you can specify where you want the widget to appear in your WebHelp page.

Using a Publishing Template

To add a X™ Tweet widget to your WebHelp Responsive output using an Oxygen Publishing Template, follow this procedure:

Go to the Tweet button generator page.
Fill in the displayed form. The Preview and code area displays the code that you will need.

Copy the code snippet displayed in the Preview and code area and paste it into a <div> element inside an XML file called tweet-button.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="twitter">
  <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
  <script>
    <!-- 
      !function (d, s, id) {
      var
      js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location)
 ? 'http': 'https';
      if (! d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
      }
      }
      (document,
      'script', 'twitter-wjs');
     -->
  </script>
</div>

Open the template descriptor file associated with your publishing template.

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 tweet-button.xml file that you created earlier.

<publishing-template>
    ...
    <webhelp>
        ...                
      <html-fragments>
        <fragment 
          file="HTML-fragments/tweet-button.xml" 
          placeholder="webhelp.fragment.after.toc_or_tiles"/>
      </html-fragments>
    </webhelp>

Open the DITA Map WebHelp Responsive transformation scenario.
Click the Choose Custom Publishing Template link and select your template.
Click OK to save the changes to the transformation scenario.
Run the transformation scenario.

Using a Transformation Scenario in Oxygen XML Editor/Author

To add a X™ Tweet widget to your WebHelp Responsive output using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:

Go to the Tweet button generator page.
Fill in the displayed form. The Preview and code area displays the code that you will need.

Copy the code snippet displayed in the Preview and code area and paste it into a <div> element inside an XML file called tweet-button.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="twitter">
  <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
  <script>
    <!-- 
      !function (d, s, id) {
      var
      js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location)
 ? 'http': 'https';
      if (! d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
      }
      }
      (document,
      'script', 'twitter-wjs');
     -->
  </script>
</div>

Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
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 tweet-button.xml file that you created earlier.
Click Ok and run the transformation scenario.