I have been busy preparing for HealthCampDC on 2010-11-12. To host pages about the event I decided to try out Google Sites (http://bit.ly/hcdc10site). We find Google Docs really useful for creating an online version of the wall at a HealthCamp event so I wanted to test the integration between Google Docs and Google Sites.
One thing I wanted to add was a comment feature to the site. It seems that Google Sites have comments but you have to be a collaborator to be able to post a comment. We wanted something more open than that but still be protected from Spam comments. I have used Disqus on my http://ekive.blogspot.com blog for a number of years. It works quite well. I therefore thought about using Disqus to power a more open Comments feature on the HealthCamp pages. There was one problem. Google Sites disables Javascript embedding. This makes it difficult to incorporate third party widgets.
In setting up the HealthCamp site (http://healthca.mp)I had already attempted to integrate a UserVoice forum. The only downside was having to pre-define a space on the page for the widget. The problem with uservoice is that the at rest widget is a small tab. When clicked it opens a much larger page. I therefore resorted to just using a hyperlink to the Uservoice forum to allow people to post suggestions for HealthCampDC.
One thing I did learn from reading up about UserVoice and Google Sites is the suggestion to incorporate javascript in to a widget using Google Gadget Editor. The Gadget Editor allows you to produce a custom gadget and host it at Google. One word of warning. On my Mac I found that the Google Gadget Editor didn't run correctly in Safari or Chrome. I therefore had to use Firefox to edit my gadget.
When looking at the Disqus problem I managed to add Disqus commenting to my Google Sites pages by doing the following.
- Goto Disqus and setup your site
- Grab the generic Javascript code (Disqus Universal code)
- Goto the Google Gadget Editor and open the Hello World! example Gadget.
- Replace the Hello World code (between the CDATA[[ ]] sections) with the code in sections 1 and 2 of the Universal Code from Disqus.
- Use Save As to save the Gadget with a different name e.g. Disqus.xml
- Click on the file name you used in the top right of the editor. It will open the xml in a separate window or tab in your browser.
- Copy the URL of the Gadget from the browser window.
- Go to the page on your site where you want to add Comments.
- Edit the page and go to the bottom of the page.
- Choose Insert...More Gadgets
- Click on Add gadget by URL and paste the Gadget URL in to the address box.
- Set the height of the gadget to approximately 650 pixels and choose "include scrollbars on gadget when necessary"
- Save the configuration
- Save your page
This is not perfect but at 650 pixels any dialog boxes used by Disqus appear inside the gadget. With the right configuration this combination of Disqus and Google Sites lets you allow comments from anyone. Visitors can even use their facebook, twitter, Disqus, OpenID or Yahoo accounts to identify themselves when leaving comments.
If Disqus would tweak the layout in their code slightly this is not a bad solution. Some of the prompts for the settings and other menus that appear to the top right hand section of the Disqus layout get cutoff but that is really a minor niggle.
