Download & Install SezWho Plug-in (Movable Type 4.2)

 

Detalied steps to Install (with pictures)

  • Download the plugin source.
  • Unzip or copy the files into Movable Type plugins directory {MT_INSTALL_DIR}/plugins/. This should create a folder in {MT_INSTALL_DIR}/plugins/SezWho. (see Figure 1 below)

    (Figure 1)

  • Make sure that {MT_INSTALL_DIR}/plugins/SezWho/SezWho.cgi file has execute permission.

  • Go to Plugins configuration page and click on the links highlighted in following image.

    (Figure 2)

  • Enter your blog key (Get your blog key here) in the input box provided on the configuration page. (see Figure 3 below)

    (Figure 3)

  • We are almost there. You plugin should be active and working now. So let's add some widgets. Follow these steps for Red Carpet widget.
    • Copy the {MT_INSTALL_DIR}/plugins/SezWho/tmpl/sezwho_rc.tmpl file to {MT_INSTALL_DIR}/plugins/WidgetManager/default_widgets/ directory.
    • Edit the {MT_INSTALL_DIR}/plugins/WidgetManager/default_widgets/widgets.cfg file and add following lines to this file.
    •           {template => 'sezwho_rc.tmpl', label => 'SezWho Red Carpet',},
    • Now go to Design -> Widget Sets -> Create Widget Set from Admin UI like shown in figure 4.
    • You will notice that there is SezWho Red Carpet Widget in the Available Widgets column. Please drag this widget to the Installed Column and give your preferrable name in the Set Name Input box. (We will assume 'SezWho Red Carpet' as Name for the instructions below.). Now click on Save Changes
    • (Figure 4)

    • Go to Design -> Templates -> Archive Templates -> Entry -> Footer. Add <$MTWidgetManager name="SezWho Red Carpet"$> to your template and click on save. Rebuild your Entry templates and we are done.
  • SezWho Badge Widget:
    • Go to Run SEZWHO plugin configuration page as shown in the snapshot below. You will see a drop down for number of badge widgets to be shown on your blog. Please select a number from drop down and click on Submit. You will get some input boxes depending upon the numbers selected by you. Enter the email address of the people whose profiles you would like to show on your blog as shown in figure 5.
    • (Figure 5)

    • Go to Design -> Templates -> Archive Templates -> Entry -> Footer. Add lines like <$MTSZ_Badge id="1"$><$MTSZ_Badge id="2"$> depending upon the number of badge widgets you chose above. Rebuild your Entry templates and we are done.

 

In the Badge widget, please make sure that you enter an email address for a user who has at least one comment in the system (add a comment if the user does not have one), otherwise the Badge will not show up. Finally the Badge and RedCarpet should show up in the page as follows (Figure 6):

(Figure 8)

 

After the installation is complete, access an entry that has comments and make sure that the filter bar, comment score and comment ratings bar is showing as in this screenshot.


If you are still having problems or you want more control over the automatic layout, you should check out how to manually modify your theme template.


 

 

Configuring SezWho by modifying your Individual Entry Archive

The SezWho plugin can be added to a blog by modifying the Individual Entry Archive. The SezWho template tags allow bloggers full control over the look and feel of their entry archives. Since SezWho if focused on improving comments functionality, the only template that needs to be modified is the Individual Entry Archive.

SezWho template modification example

Following is an example of the Tags insertion in Comments Template. Go to Design -> Templates -> Archive Templates -> Entry -> Comments. SezWho Tags are highlighted in Blue color.


<MTIfCommentsActive>
<div id="comments" class="comments">
<MTIf name="comment_preview_template">
<$MTInclude module="Comment Form"$>
</MTIf>

<$MTSZ_CommentFilterBar$>

<MTComments>
<MTCommentsHeader>
<h2 class="comments-header"><$MTEntryCommentCount$> Comments</h2>
<div class="comments-content">
</MTCommentsHeader>

<$MTSZ_CommentHeader$>

<$MTInclude module="Comment Detail"$>

<$MTSZ_CommentFooter$>

<MTCommentsFooter>
</div>
</MTCommentsFooter>
</MTComments>
<MTUnless name="comment_preview_template">
<$MTInclude module="Comment Form"$>
</MTUnless>
</div>
</MTIfCommentsActive>

 

SezWho template tag details

  • <$MTSZ_CommentFilterBar$>: This tag adds the header bar for the comments. The header bar looks as follows:

     

    This template tag generates the following markup:

    <table id="cpEmbedPageTableid" class="cpEmbedPageTable cpEmbedPageFilterBarCustom">

    <tbody>

    <tr>

    <td class="cpEmbedPageTableCell cpEmbedPageFilterBarCellCustom">

    <p class="cpEmbedSelectParagraph cpEmbedSelectParagraphCustom">Highlight: <select onchange="..."><option value="0">All Comments</option><option value="5.5">Good Comment(3+)</option> <option value="7.5">Great Comments(4+)</option></select> <a href="...">What is this?</a> </p>

    </td>

    <td class="cpEmbedPageTableCellBranding cpEmbedPageFilterBranindingCellCustom"><a class="cpEmbedPageTableCellBrandingLink" href="javascript:void SezWho.Utils.openPage('home');"/></td>

    </tr>

    </tbody>

    </table>

    This tag should be placed at the beginning of the comments section of a page. This tag should be placed outside the main comment block so place it appropriately based on your formatting. (See an example above)

     

  • <$MTSZ_CommentHeader$>: This tag adds the comment score and comment plus/minus button along with the profile link:

     

    This template tag generates the following markup:

    <table class="cpEmbedPageTable cpEmbedPageCommentHeaderCustom">

    <tbody>

    <tr>

    <td class="cpEmbedPageTablePMCell cpEmbedPageHeaderBarPMCellCustom"><input type="button" class="cpEmbedCommentImgMinus cpEmbedCommentImgMinusCustom" onclick="..." id="sz_comment_collapse:id"/></td>

    <td class="cpEmbedPageTableCell cpEmbedPageProfileCellCustom"><a rel="nofollow" href="..." class="cpEmbedPageCommentHeaderAuthorLinkCustom">Name</a> (<a id="sz_profile_link:id" class="cpEmbedPageProfileLinkCustom">Profile</a>)</td>

    <td class="cpEmbedPageTableScoreCell cpEmbedPageTableScoreCellCustom">

    <div id="sz_comment_score:id" class="cpEmbedPageCommentHeaderScoreDivCustom">

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgon cpEmbedScoreSquareImgonCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgoff cpEmbedScoreSquareImgoffCustom" title="Comment Score : 3.2"/>

    <input type="button" class="cpEmbedScoreSquareImgoff cpEmbedScoreSquareImgoffCustom" title="Comment Score : 3.2"/>

    </div>

    </td>

    </tr>

    </tbody>

    </table>

    This tag should be placed at the beginning of an individual comment block. This tag marks the beginning of collapsible boundary of a comment, so place it appropriately based on your formatting. (See an example above)

     

  • <$MTSZ_CommentFooter$>: This tag adds the comment footer bar along with comment rating UI. The footer bar looks as follows:

     

    This template tag generates the following markup:

    <div>

    <p class="cpEmbedPageCommentFooterCustom">Was this comment useful to you ?

    <input type="button" value="yes" id="sz_rating_button:yes:id" class="cpEmbedYesNoButtonClassCustom"/>

    <input type="button" value="no" id="sz_rating_button:no:id1" class="cpEmbedYesNoButtonClassCustom"/>

    </p>

    </div>

    This tag should be placed towards the end of and individual comment block. This tag marks the end of collapsible boundary of a comment, so place it appropriately based on your formatting. (See an example above)

     

Configuring the Look & Feel with CSS

If you want to change the look and feel of the SezWho tags you can do that my adding CSS rules for the following elements:

 

    Comment Filter Bar
  • cpEmbedPageFilterBarCustom
  • cpEmbedPageFilterBarCellCustom
  • cpEmbedSelectParagraphCustom
  • cpEmbedPageFilterBranindingCellCustom

 

    Comment Header Bar
  • cpEmbedPageCommentHeaderCustom
  • cpEmbedPageHeaderBarPMCellCustom
  • cpEmbedCommentImgMinusCustom
  • cpEmbedCommentImgPlusCustom
  • cpEmbedPageProfileCellCustom
  • cpEmbedPageCommentHeaderAuthorLinkCustom
  • cpEmbedPageProfileCellCustom
  • cpEmbedPageTableScoreCellCustom
  • cpEmbedPageCommentHeaderScoreDivCustom
  • cpEmbedScoreSquareImgonCustom
  • cpEmbedScoreSquareImgoffCustom
  • cpEmbedScoreSquareImghalfCustom

 

    Comment Body
  • cpEmbedPageCommentBodyCollapseDivCustom

 

    Comment Footer Bar
  • cpEmbedPageCommentFooterCustom
  • cpEmbedYesNoButtonClassCustom

 

    Red Carpet Widget
  • szRCEmbedTableClassCustom
  • szRCEmbedImageCustom
  • szEmbedCommeterNameCustom
  • szEmbedCommetLinkCustom
  • szRCStarImgonCustom
  • szRCStarImgoffCustom
  • szRCStarImghalfCustom