How to Add a Facebook Like Button in WebHelp Responsive Output
It is possible to integrate Facebook™ 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 Facebook™
Like widget to your WebHelp output using an Oxygen Publishing Template, follow this procedure:
- Go to the Facebook Developers website.
- Fill in the displayed form, then click the Get Code button.
- 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>
- 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 facebook-widget.xml file that you created
earlier.
<publishing-template> ... <webhelp> ... <html-fragments> <fragment file="HTML-fragments/facebook-widget.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 Facebook™
Like widget to your WebHelp output using a transformation scenario from within
Oxygen XML Editor/Author, follow this procedure:
- Go to the Facebook Developers website.
- Fill in the displayed form, then click the Get Code button.
- 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>
- 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 facebook-widget.xml file that you created earlier.
- Click Ok and run the transformation scenario.