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’.
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:
- Go to https://twitter.com/about/resources/buttons
- Choose a tweet button
- Select the type of tweet button that you want to insert. In these steps I will use the Share a link button.
- For Share URL, choose to use the page URL.
- In the field Via add the username that is mentioned in the tweet from the tweet button.
- In the field Recommended add the username that you want Twitter to suggest to the person who uses the tweet button.
- In the field Hashtag add the hashtag you want to appear in the tweet.
- Fill the other fields as you see fit.
- In the right sight of the screen, below Preview and code, select the code and copy it.
Add Twitter 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 Twitter button to.
- Select the location where you want to add the Twitter button. (The most logical location is directly above your topic contents.)
- Switch to HTML view.
- Paste the code from the Twitter site into the layout. When you place it before the topic contents.
- Save the layout page.
- Repeat step 2 to 6 for every page in the layout you want to use the Tweet button.
- Generate your help.
Add Twitter Button to WebHelp
- Go to the Master Page you use for your output.
- Select the header and switch to HTML mode.
- Paste the code from the Twitter site into the header.
- Save the Master Page and generate your help.