Add 3rd Party Commenting Systems Using Custom HTML

Vidcaster has a built in commenting system that enters comments into the Vidcaster database. Admins can then moderate comments within the Vidcaster admin area. By default, comments are enabled on the video playback page of every Vidcaster theme. If you have the Custom HTML feature enabled in your Vidcaster account (available for Gold plans and above), you can remove the Vidcaster commenting system and replace it with any 3rd party commenting system of your choice.

Remove Vidcaster Comments

  1. Navigate to the Custom HTML settings in your admin area – Site > Custom HTML.
  2. Click on the Video Playback page.
  3. Search for the comments area, cut it out, paste it on a separate document and save it for later (in case you want to put it back).

Depending on the theme you are using, the comments code might look a bit different. The HTML could change, but the Django code that wraps the comments area will be the same. Search for

{% if current_site.siteprofile.allow_comments and preview = "False" %} 

and find where the code block ends by looking for the end of the if statement:

{% endif %}

Here is an example of the Vidcaster comments code from the Lightyear theme:


	
	{% if current_site.siteprofile.allow_comments and preview = "False" %}

				{% comments_for_object item as comments %}

				<div id="comments">

					<div class="block simple-form{% if user.is_authenticated %} authenticated{% else %} unauthenticated{% endif %}">

						<div class="block-header">

							<h3>Post a Comment</h3>

						</div>

						{% comment_form_for_object item %}

					</div>

					{% if comments %}

 					<div class="block comment-list">

						<ol>

							{% for comment in comments %}

							<li id="comment{{ comment.id }}" class="{% if comment.poster_is_registered %}registered{% else %}unregistered{% endif %}">

								<div class="text">
									{{ comment.comment|urlize|linebreaks }}
								</div>
								<div class="meta">
									<p><strong>{{ comment.get_poster_html_tag|safe }}</strong> {{ comment.date|timesince }} ago.</p>
								</div>

							</li>

							{% endfor %}

						</ol>

					</div>

					{% endif %}

	

 

On some themes, there may also be recent comments feeds on the index or category landing page. You can also remove these, and later replace with a 3rd party comment feed. The Vidcaster comment feed code will look like this:


		{% if current_site.siteprofile.allow_comments %}{% ifnotequal item.comments_count 0 %}
			[SOME HTML IS IN HERE]
		{% endifnotequal %}{% endif %}
	

 

Replace with 3rd Party Commenting System Code

Disqus

Log into your Disqus account – settings > install and choose 'universal code'. Copy the code, or customize it using advanced options.


			<div id="disqus_thread"></div>
			<script type="text/javascript">
				/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
				var disqus_shortname = 'your-name'; // required: replace example with your forum shortname
	
				/* * * DON'T EDIT BELOW THIS LINE * * */
				(function() {
					var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
					dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
					(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
				})();
			</script>
			<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
			<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
		
	

 

In your Vidcaster admin area, navigate to Site > Custom HTML > Video Playback and paste this code in, replacing the Vidcaster default comments.

Livefyre

Sign in to your Livefyre account and get the embed code. Paste the code into your video playback page, replacing the Vidcaster comments code. Here is an example of a Livefyre embed code used on a Vidcaster site:


		<!--start livefyre comments -->	
		<div id="livefyre"></div>
		<!-- START: Livefyre Embed -->
		<script type='text/javascript' src='http://zor.livefyre.com/wjs/v1.0/javascripts/livefyre_init.js'></script>
		<script type='text/javascript'>
			var fyre = LF({
				site_id: 336499,
				article_id: 'http://{{ current_site.domain }}/{{ item.code }}/'
			});
		</script>
		<!-- END: Livefyre Embed -->
	

 

Notice the setting on article_id, this is set to use Vidcaster Django code to automatically show the URL of the specific video playback page the user is commenting on. You can copy the article_id code exactly as it shows in the example above.

Facebook

1. Go the Facebook developer area and create your comments widget. Adjust the settings of your widget the way you like. Leave the URL field to the default, because you can fill this out later to automatically update with the current video page URL. Click 'get code', and choose the HTML5 option. Cut the top portion of the code that says to include in your page once right after the opening <body> tag.


		<div id="fb-root"></div>
		<script>(function(d, s, id) {
		  var js, fjs = d.getElementsByTagName(s)[0];
		  if (d.getElementById(id)) return;
		  js = d.createElement(s); js.id = id;
		  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
		  fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>
	

 

2. Navigate to your CUSTOM HTML settings and click on the Base Template. Locate the opening of the body tag and paste in the code that you just cut out from the Facebook widget.

3. Cut out the bottom portion of your Facebook comments widget code. Paste the code into your video playback page, replacing the Vidcaster comments code.


	
	<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
	
	

 

If you would like the URL to automatically update with the current video URL page the user is commenting on, adjust the code like so:


	
	<div class="fb-comments" data-href="http://{{ current_site.domain }}/{{ item.code }}/" data-num-posts="2" data-width="470"></div>
	
	

 

Still not Working? Need More Help?

We're happy to help, just use our contact form, file a support ticket, give us a call or live chat us and we'll get you going!