Monday, April 8, 2013

Embedding a Moot Forum in Google Blogger

Moot is a re-imagined forum application introduced as a beta version in April 2013. In the developers' own words, "Moot is a radically different discussion platform, unencumbered by the weight of unnecessary features and distractions. It places the conversation back to the forefront. Clean user interface, persistent content and deep integration into the site will allow a more natural and meaningful discussion to take place. People will focus on topics they care about."

You can read more about Moot at their website. The neat thing is that you can use the Moot application to provide full forum capability, or to provide a simple comment system for blog posts, photos, articles, or whatever you choose.

If you have found this blog post, you probably already know all about Moot. You have likely created a forum to test and now you are interested in embedding the product into your Google Blogger site. This task is actually very easy to accomplish, and I believe the following guides will prove helpful in getting the basic functionality working on your own Blogger site.


To install Moot as a forum.

1) Create a Moot forum at Moot.it

2) Configure your blog to properly host the Moot forum application. Log-on to your Google Blogger account and navigate to the blog's admin menu; select "Template" and then select "Edit HTML"


After the <head> tag, enter the following HTML code (i.e. that code shown below in red characters):

     <head>

     <!-- 1. Moot style -->
     <link href='http://cdn.moot.it/1/moot.css' rel='stylesheet' type='text/css'/>

     <!-- 2. jQuery library (v1.7+ required) -->
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

     <!-- 3. Moot application -->
     <script src='http://cdn.moot.it/1/moot.min.js'/>

     <!-- 4. Moot mobile optimization -->
     <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

     <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>


Select "Save Template" and "Close"

3) Create a new page on your blog to display the forum. From the blog's admin menu; select "Pages," "New Page," and "Blank Page"


Enter a descriptive name for the new page (i.e. Forum) and in the page edit dialog, select "HTML"


Enter the following HTML code to place your Moot forum in this Blogger page.

     <a class="moot" href="http://api.moot.it/[forumname]"></a>

Where [forumname] is the name used when you registered the new forum at Moot.it. Do not include the square brackets.

Select "Update" and "Close"

That's it. You have successfully added a Moot forum to your Google Blogger site. For more information, please refer to the Moot documentation.



To install Moot as a Comments system.

1) Create a Moot forum at Moot.it

2) Configure your blog to properly host the Moot forum application (Please note that this is the same first step as used to install Moot as a forum. If you have already done that, you can skip to the next step). Log-on to your Google Blogger account and navigate to the blog's admin menu; select "Template" and then select "Edit HTML"


After the <head> tag, enter the following HTML code (i.e. that code shown below in red characters):

     <head>

     <!-- 1. Moot style -->
     <link href='http://cdn.moot.it/1/moot.css' rel='stylesheet' type='text/css'/>

     <!-- 2. jQuery library (v1.7+ required) -->
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

     <!-- 3. Moot application -->
     <script src='http://cdn.moot.it/1/moot.min.js'/>

     <!-- 4. Moot mobile optimization -->
     <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

     <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>


Select "Save Template" and "Close"

3) Create a comments feature for your content. From the blog's admin menu; select the existing page or post where you would like to add the comments feature. In the page edit dialog, select "HTML"


Enter the following HTML code where you would like the Moot comments feature to display.

     <a class="moot" href="http://api.moot.it/[forumname]/[pagename]"></a>

Where [forumname] is the name used when you registered the new forum at Moot.it, and [pagename] is a unique name for this comments feature. Each comments feature you add to the Blogger site must have a unique [pagename] to manage the users' comments. Do not include the square brackets.

Select "Update" and "Close"

To be most effective as a comment system, you should consider changing your Blogger site settings to hide Blogger hosted comments (Admin Menu, Settings, Posts and Comments, Comment Location - Hide) and (Admin Menu, Layout, Blog Posts - Edit, Comments - uncheck).

That's it. You have successfully added a Moot comments feature to your Google Blogger site. For more information, please refer to the Moot documentation.


Customizing the Moot application look and feel.

The Moot application automatically inherits the style of your Blogger template. However, if you need to fine-tune the look, you can override the CSS to customize the Moot forum or comments feature as you wish. This may be a more advanced task for some users.

1) Log-on to your Google Blogger account and navigate to the blog's admin menu; select "Template" and then select "Edit HTML"


After the lines of HTML you added to configure your blog for Moot, enter the following HTML code (i.e. that code shown below in red characters):

     <head>

     <!-- 1. Moot style -->
     <link href='http://cdn.moot.it/1/moot.css' rel='stylesheet' type='text/css'/>

     <!-- 2. jQuery library (v1.7+ required) -->
     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

     <!-- 3. Moot application -->
     <script src='http://cdn.moot.it/1.0/moot.min.js'/>

     <!-- 4. Moot mobile optimization -->
     <meta content='width=device-width, initial-scale=1.0' name='viewport'/>

     <!-- 5. Moot Custom CSS -->
     <style>
     .moot {
         font-size: 14px;
         font-color: #666666;
     }

     </style>


     <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>


Select "Save Template" and "Close"

In the example above, the CSS customization sets the Moot font size to 14 pixels tall, and the font color to dark gray (#666666). You would enter your own custom CSS here. The Moot CSS reference provides the information used for their application. Use caution changing these values and keep good document on the changes you made. Some edits can render your Blogger site unusable.

I hope that this brief tutorial helps you enjoy the Moot application on your own Google Blogger site.