EverWeb Widgets HTML5


Website Comments Feature

A website comments feature helps to engage visitors and gets them returning to your site.
Disqus is easy to set up and is free!
Sign up, add your info and you will receive an email with some code which looks like this...

<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'your-shortname'; // required: replace example with your forum shortname
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
<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>

Copy the code from the email and paste it into a plain text document in Text Edit.app.
The items marked in green are comments and can be deleted.
The item marked in blue can be deleted unless you think your website visitors are stupid enough to have Javascript turned off in their browser!
The code marked in magenta can also be delete unless you really want the "Powered by Disqus" link on your site.
The code is now ready to copy and paste into EverWeb.

Comments Page

Create a blank "Comments" page and insert an empty text box at the bottom so that the page content height can be quickly adjusted by dragging it.
Drag an HTML Snippet onto the page and paste the Disqus code into the box in the widget settings panel.
Now set the widget box width to about 20px less than the page content width and center it on the page.
Drag the box down so that there is about 1000px height to start with.
The snippet box and the page heights can be increased whenever sufficient comments have been added. Either that or they can be left at a fixed height and the comments will automatically generate a vertical scrollbar.
NOTE: Nothing will appear on the page until it is published to the server!

Adding Styles

The Comments page on this website has a few extra styles added to make the Disqus insert look a little better.

<style type="text/css">
font-family:Verdana, sans-serif;
border:2px solid #000;

The selectors are for web safe font family, font color, background color, padding to move the content away from the container edges, border width, style and color and the border corner radius.
These styles can be modified to suit and then pasted into the Head Code box in the Page inspector.