LoudVoice Implementation

LoudVoice is a powerful comments platform that includes logging in with 30+ social networks, spam filters and automatic backups. A centralized dashboard allows you to track and monitor every interaction on your site from one location. Filter by comment, network or user, and moderate with ease. LoudVoice makes it easy to maintain high quality conversations on your content.

In this setup guide you will learn how to integrate LoudVoice on your own website so that users can easily connect using their social network accounts in order to leave comments.

1. Include our JavaScript library.

Do not include the OneAll library.js more than once. If you have already included the library in order to implement another of our services, then please skip this point.

Our JavaScript library contains the functions required by our services. The library is loaded asynchronously (in the background) and does not increase the loading time of your website.

It is compatible with pages served using both HTTP or HTTPS. The // before the path to the library is a protocol-independent absolute path, which detects whether your site uses HTTP or HTTPS. No modification of the code on secure pages is required.

Our recommendation is to paste this code snippet into your website template page so that it appears before the closing </head> tag. 

<script type="text/javascript">

		/* Replace #your_subdomain# by the subdomain of a Site in your OneAll account */		 
		var oneall_subdomain = '#your_subdomain#';

		/* The library is loaded asynchronously */ 
		var oa = document.createElement('script');
		oa.type = 'text/javascript'; oa.async = true;
		oa.src = '//' + oneall_subdomain + '.api.oneall.com/socialize/library.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(oa, s);
		    
	</script>

2. Add the comments widget.

Edit the template of your website and add the following code at the location where you would like to display the comments widget. Make sure that our library.js is included on that page too. 

<div id="loudvoice_container"></div>
	
<script type="text/javascript">

	/* Replace #discussion_reference# by the unique identifer of the page */		 
	var discussion_reference = '#discussion_reference#';
		
	var _oneall = _oneall || [];
	_oneall.push(['loudvoice', 'set_providers', ['facebook', 'twitter', 'google']]);
	_oneall.push(['loudvoice', 'set_page', document.title, window.location.href]);
	_oneall.push(['loudvoice', 'set_reference', discussion_reference]);
	_oneall.push(['loudvoice', 'do_render_ui', 'loudvoice_container']);
	
</script>
Key Description
#discussion_reference# This reference must be unique amongst all of your discussions. It helps LoudVoice distinguish the different pages and the corresponding comments. If your system provides a unique id for each page, then this id would be a good value for the reference.

This code snippets displays LoudVoice on your website, allows users to login with the specified social networks, lets them leave comments, vote for and report existing comments and recommend or share the discussion on social networks.

3. Post your first comment.

After having added the code, first open the corresponding page in your browser. Then make sure that the comments widget is displayed correctly and either login with a social network or with your name/email address to post as guest. Now leave a test comment and make sure that you can see it in the LoudVoice panel in your OneAll account.

User Contributed Notes