An inline commenting app for Ghost: http://ouija.io
Ouija brings inline commenting to your Ghost blog. See below for install instructions.
-
Paste the Ouija CSS into the
<head>section of your theme'sdefault.hbsfile.<link rel="stylesheet" href="http://cdn.goinstant.net/external/ouija/latest/ouija.min.css"/> -
Paste the following snippet before the closing
</body>tag. ReplaceYOURACCOUNT/YOURAPPwith your GoInstant details. Need a GoInstant connect URL? Sign up here.
{{#with post}}
<script>
window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
window.ouija_identifier = {{id}};
</script>
<script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
<script src="http://cdn.goinstant.net/external/ouija/latest/ouija.min.js"></script>
{{/with}}
These instructions assume you already have a Ghost blog set up. If not, follow the Getting Started Guide for Developers from Ghost to set one up.
-
Clone this repo into the
content/appsfolder of your blog. -
Copy the
config/ouija.json.exampletoconfig/ouija.jsonand insert the name of your custom theme folder. If you're using the default theme Casper, you don't need to change anything. -
Execute
$ npm install -
Execute
$ gulp develop -
Add the CSS to the
<head>section of your blog'sdefault.hbsfile:<link rel="stylesheet" type="text/css" href="{{asset "css/ouija.css"}}" /> -
Paste the following snippet before the closing
</body>tag. ReplaceYOURACCOUNT/YOURAPPwith your GoInstant connect URL. Need a GoInstant connect URL? Sign up here.
{{#with post}}
<script>
window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
window.ouija_identifier = {{id}};
</script>
<script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
<script src="{{asset "js/ouija.js"}}"></script>
{{/with}}
GoInstant is used to sync comments in real-time. You'll need to create a new app in GoInstant in order to use Ouija.
-
If you haven't already, sign up for GoInstant. From the GoInstant dashboard, create a new app for Ouija.
-
Navigate to your new app's Authentication page.
-
Add your blog's URL as an Authorized origin. If you're working locally, you might want to add
localhost, too. -
Ouija commenters login through Twitter (for now). Turn on Twitter in the list of providers. Don't worry about the settings inside the Twitter box.
-
Copy the contents of
config/acl.jsonto your app's ACL. This gives Ouija the correct permissions to run on your blog. You can change your app's ACL under Security.
You can configure Ouija by putting vars on the window before the Ouija script loads.
| Option | Type | Default | Description |
|---|---|---|---|
window.ouija_identifier |
String | N/A | Ghost Post UID. A unique, static ID for the blog post. |
window.ouija_connect_url |
String | N/A | Your GoInstant connect URL. Used for connecting to the GoInstant platform. |
window.ouija_article_content |
String | '.post-content' |
Selector for the section elements' parent. |
window.ouija_section_elements |
String | 'p, ol, :has(img)' |
Selector for which sections in the post should have a comment block. |
<script>
window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
window.ouija_identifier = {{id}};
window.ouija_article_content = '.my-post-content' // Optional
window.ouija_section_elements = 'p, ol' // Optional
</script>
<script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
<script src="http://cdn.goinstant.net/external/ouija/latest/ouija.min.js"></script>© 2014 GoInstant Inc., a salesforce.com company. Licensed under the BSD 3-clause license.
