Add Facebook Like Button to RoboHelp Output
In this post I list the steps for adding a Facebook Like button to both Multiscreen HTML5 and WebHelp outputs. This will allow users to share links to your help via Facebook. The instructions for WebHelp will work on HTML5, FlashHelp and Browser Based AIR Help as well.
Note: The Facebook Like button will only work on help that is placed on a web server. When you view the output locally, you will not see the Facebook Like button.
Add Facebook Like button to Multiscreen HTML5 layout
Follow these steps to add the Facebook like button to your Multiscreen HTML5 layout:
- Go to https://developers.facebook.com/docs/reference/plugins/like/
- Make sure the field URL to Like is empty.
- Uncheck the field Send Button.
- Click Get Code.
- On the page HTML5, copy the first code below the 1.
- Go to the layout in the Project Set-up pod.
- Open the page of the layout that you want to add the Facebook Like button to.
- Switch to HTML mode.
- Find the <body> tag and paste the code directly after this tag.
- In the script tag, add the text if(_isHTTPUrl(document.location.href)){ before the script code.
- Before the script end tag, add a right curly bracket (}).
- Go back to the browser and copy the second line of code beneath the 2.
- Select the location where you want to add the Facebook Like button. (The most logical location is directly above your topic contents.)
- Paste the code into the Multiscreen layout.
- Save the layout.
- Repeat step 5 to 15 for every page that you want to use the Facebook like button.
- Generate your help.
Troubleshooting the Facebook Like button
Even if you follow all these steps, the Facebook like button sometimes doesn’t show on the web server. This is because the Facebook code is very picky.
The most probable cause is that the RoboHelp editor has inserted empty paragraphs into the Facebook code (the div fb-root and fb-like). Follow these steps to fix this:
- Open your layout and switch to HTML mode.
- Find the div with id fb-root.
- Select the empty paragraph and delete it. (Stay in HTML mode!)
- Now find the div with the class fb-like
- Select the empty paragraph and delete it. (Stay in HTML mode!)
- Save your layout but stay in HTML mode.
- Close the layout page without leaving HTML mode. As soon as you switch to WYSIWYG, RoboHelp may insert the empty paragraph again.
- Repeat step 1 to 7 for every page you use the Facebook Like button.
- Go to the Adobe bug report form and report a bug: RoboHelp Screen Layout Editor inserts empty paragraphs in empty DIV-elements.
If the Facebook Like button still won’t work, consider using the WebHelp method for your Multiscreen HTML5 layout.
Add Facebook Like button to WebHelp
Follow these steps to add the Facebook like button to your WebHelp output:
- Go to the Master Page you use for your output.
- Select the header and switch to HTML mode.
- Paste the following code into the header.
<script type=”text/javascript”>
- Save the Master Page and generate your help.