Adobe RoboHelp: Add Google +1 Button
In this post I list the steps for adding a Google +1 button to both Multiscreen HTML5 and WebHelp outputs. This will allow users to share links to your help via Google Plus. The instructions for WebHelp will work on FlashHelp and Browser Based AIR Help as well.
Note: The Google +1 button will only work on help that is placed on a web server.
Get the Google +1 button code
The first step in adding a Google +1 button is to get the required code. Follow these steps to get the code:
- Go to https://developers.google.com/+/plugins/+1button/
- Scroll down untill you see the section +1 tag.
- Copy the code of the HTML5-valid tag.
Add Google +1 Button to Multiscreen HTML5 Layout
- Go to the layout in the Project Set-up pod.
- Open the page of the layout that you want to add the Google +1 button to.
- Switch to HTML mode.
- Select the location where you want to add the Google +1 button. (The most logical location is directly above your topic contents.)
- Paste the code into the Multiscreen layout. (Make sure you remove the dots from the div.)
- Change the value tall into medium to make the button the same size as Tweet/LinkedIn/Facebook buttons.
- Go back to the Google plus developer page and copy the JavaScript from the section Asynchronous JavaScript loading.
- Paste this code below the code of the Google +1 button:
- Save the Layout.
- Repeat step 5 to 15 for every page that you want to use the Google Plus button.
- Generate your help.
Add Google +1 button to WebHelp
- Go to the Master Page you use for your output.
- Select the header and switch to HTML mode.
- Paste the code into the Master Page. (Make sure you remove the dots from the div.)
- Change the value tall into medium to make the button the same size as Tweet/LinkedIn/Facebook buttons.
- Go back to the Google plus developer page and copy the JavaScript from the section Asynchronous JavaScript loading.
- Paste this code below the code of the Google +1 button:
- Save the Master Page and generate your help.