Add Facebook Commenting to RoboHelp Output
One of the missing features of RoboHelp output is the ability for readers to comment your topics. There are several free commenting systems available you can use on any website, including RoboHelp output. In this post I will show you how to add Facebook commenting to Responsive HTML5 output.
Facebook enables commenting through the URL of topics. That means that if you ever rename a topic or change the URL of your help, the comments will be lost. Make sure that you are happy with your current naming convention before you begin.
View Responsive HTML5 output example
Add Facebook Commenting to Output
To add Facebook Commenting, you must update the HTML5 Layout. In this post I will use the Responsive HTML5 Theme1 layout, but these instructions apply to all Responsive HTML5 and Multiscreen HTML5 output.
Note that the Facebook Commenting widget will only work for a specific output location. When creating the widget, you use the URL of the output to configure the widget. If you have multiple outputs, you must create a new layout for every output location.
Note: For this widget, we will modify the layout using HTML mode in RoboHelp. When making these change, always stay in HTML mode. If you switch to Design view at any point, the widgets will not work. If this happens, see Fix Broken Commenting on how to restore this.
- Go to the Facebook Comments Plugin page.
- Make sure the field URL to comment on is empty.
- In the field Number of Posts, fill in how many comments are shown by default.
- Click Get Code to get the code for your output. Facebook will open a popup.
- Keep your browser open and start RoboHelp.
- Open the Project Set-up pod and expand the layout you want to add commenting to.
- Open the page Topic.
- Switch to HTML mode.
Note: Stay in HTML mode and follow the instructions precisely! If you switch to Design mode, the widget will not work. If this happens, see Fix Broken Commenting on how to restore this.
- In the page, find the tag
<body>. - Go to your browser and find the plugin code popup. Copy the code from the top code fragment.
- Go to RoboHelp and paste the code directly behind the <body> tag:
- In the HTML find the following text:
<?rh-msp-topic class="wTopic" widgettype="topic" ?> - Copy the following code after the text you found in step 10:
<script type="text/javascript">document.write('<div class="fb-comments" data-href="'+document.location.toString()+'" data-numposts="5" data-colorscheme="light"></div>');</script>
- Save your changes.
- Close the topic while staying in HTML mode. Do NOT switch to Design view.
Generate your help and place the help on a web server. Your comments are available instantly.
Add Comment Moderation
Now that you’ve added commenting to your output, all readers (with a Facebook account) can leave comments. But you may also want to moderate comments. Facebook makes it really easy to add moderation to commenting.
The only prerequisite for content moderation that you have a Facebook account. There is a simple and advanced content moderation option. I will here show you how you enable the simple content moderation. This method is useful for testing, but not for large help systems. If you would like help setting up Facebook commenting for a large site, I am available for consulting.
- Go to Facebook and log in with the account you want to use for moderation.
- Go to your profile page. You get there by clicking your name in the menu bar.
- Copy the URL of your profile.
- Go to http://findmyfacebookid.com/.
- Paste your profile URL and press Lookup numeric ID.
- Copy the ID and leave your browser open.
- Start RoboHelp.
- Open the Project Set-up pod and expand the layout you want to add comment moderation to.
- Open the page Topic.
- Switch to HTML mode.
- In the page, find the tag </head>.
- Paste the following code directly before
</head>: <meta property="fb:admins" content="your_facebook_id" />
- Change the text your_facebook_id with the numeric ID you retrieved in step 6.
- Save the topic.
- Repeat steps 1 to 14 for every moderator you want to add for this output.
If you closed the topic when adding the comments and opened the topic for adding moderation, the commenting is broken. Continue with the section Fix Broken Commenting.
Fix Broken Commenting
If your comments stop working at one point, the most probable cause is that the RoboHelp editor has inserted empty paragraphs into the Facebook code Follow these steps to fix this:
- Open your layout and switch to HTML mode.
- Find the text
fb-root. - 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.
The layout is fixed. Generate and place the layout on a web server.