Adobe RoboHelp: Add Twitter Button

In the webinar on the new Multiscreen HTML5 layouts in RoboHelp 10, I have shown how you can add a tweet button to your screen layout. In this post I list the steps for adding a Tweet button for both Multiscreen HTML5 and WebHelp. The instructions for WebHelp will work on HTML5, FlashHelp and Browser Based AIR Help as well.

Note: The Tweet button will only work correctly on help that is placed on a web server. In local help you will only see a hyperlink with the text ‘Tweet’.

• View Multiscreen HTML5 example.
• View WebHelp example.

Get the Tweet Button Code

The first step in adding a Tweet button is to get the required code. Follow these steps to get the code:

1. Go to https://twitter.com/about/resources/buttons
2. Choose a tweet button

3. Select the type of tweet button that you want to insert. In these steps I will use the Share a link button.
4. For Share URL, choose to use the page URL.
5. In the field Via add the username that is mentioned in the tweet from the tweet button.
6. In the field Recommended add the username that you want Twitter to suggest to the person who uses the tweet button.
7. In the field Hashtag add the hashtag you want to appear in the tweet.
8. Fill the other fields as you see fit.
9. In the right sight of the screen, below Preview and code, select the code and copy it.

 

Add Twitter Button to Multiscreen HTML5 Layout

1. Go to the layout in the Project Set-up pod.
2. Open the page of the layout that you want to add the Twitter button to.
3. Select the location where you want to add the Twitter button. (The most logical location is directly above your topic contents.)
4. Switch to HTML view.
5. Paste the code from the Twitter site into the layout. When you place it before the topic contents.

6. Save the layout page.
7. Repeat step 2 to 6 for every page in the layout you want to use the Tweet button.
8. Generate your help.

Add Twitter Button to WebHelp

1. Go to the Master Page you use for your output.
2. Select the header and switch to HTML mode.
3. Paste the code from the Twitter site into the header.

4. Save the Master Page and generate your help.