FC2ブログにTypePad Connect設置したときのメモ

FC2ブログにTypePad Connectのコメントのユニットを埋め込んでみました。そのときの設置メモです。

参考ページ等

• TypePad Connect Beta を開始 | MovableType.jp
• 新しく TypePad Connect のアカウントを作成する | Movable Type 4 ドキュメント
• TypePad - Connect Beta - Home（英語）

設置のおおまかな流れ

手順としては以下のとおり

• TypePad Connectにログインして新規にサービスを登録。サービスの種類はOtherに
• TypePad Connect側でスレッド表示等の設定を済ませておく
• 「1.コメントスレッド表示用」と「2.コメント数表示用」のコードをFC2ブログのテンプレートのコメント部分に埋め込む
• 埋め込みが終わったら、TypePad Connectの画面で完了ボタンを押下しておく
• テンプレートを更新して表示を確認し、旧コメントフォームを削除して更新する

Movable Type 4 ドキュメントのTypePad Connect にブログを登録 (コネクト) しブログのコメントを管理するを参考に「サービス（Service）」のところから「Other...」を選択することで、その他のサーヴィス用の貼り付けコードを入手できます。入手できるコードは、「コメントスレッド表示用」と「コメント数表示用」の2種類となっています。

ここでは、FC2のテンプレートのFC2 Vicuna Bazooka（共有テンプレートの検索で「bazooka」）の例で示していきます。コメントのフォーム周りの変更が主な作業ですので、同様な部分を探せば他のテンプレートでも利用可能と思います。FC2の管理ページでテンプレート設定画面をだしておきます。

はじめにTypePad Connectで提供される「コメントスレッド表示用」ですが、<h2>Comments:</h2>の下附近に貼り付ければいいでしょう。

その後、vicunaテンプレートのid、commentsFormを持つform要素を削除します。表示を確認するまでこれまでのコメントフォームは残しておいても構わないですのでその辺はお好みの方法で。

次にコメントのカウントを表示させるコードです。これを使う場合はテンプレートの</body>より上に設置しておけばいいでしょう。コメントのカウントの表示については後述します。

設置作業としてはこれで完了です(TypePad Connect側の完了ボタンを押し忘れないように)。以下はTypePad Connect導入後のスクリーンショットです。コメントのサイズはウィンドウ幅にあわせて変化するようです。

TypePad ナレッジベースにおいてコメントスレッドのCSS クラス構造が掲載されています。参考まで。

• TypePad Connect CSS（コメントスレッド） - TypePad ナレッジベース

表示用コードの微調整

設置の難易度はそれ程高くはないのですが、細かな部分で気になるところがありましたのでメモとして書いておきます。仕様にもとづくものがありますので、変更などがあった場合はご容赦ください。気になったのは3点あります

1. TPConnectに入るリンクの値について
2. 記事ページのタイトルを入れる要素の件
3. コメントのカウント表示用コード

最初に、貼り付けコード内のTPConnect.tpc_urlに固定リンクの値がはいるようです。Movable Typeでいうと、MTEntryPermalinkに該当すると思います。しかしOther...を選択した時は値として設定されていません。これはFC2ブログの場合ですと以下のような形になるでしょう。

        TPConnect.tpc_url = '<%topentry_link>';

次に記事ページのタイトルをいれるdisplay:none;の要素がありますが（div id=tpc_post_title）、FC2ブログでは以下のようにしておけば記事タイトルを埋め込むことが出来ます。

<div style="display:none;" id="tpc_post_title"><%topentry_title></div>

最後に、コメントのカウント表示の件ですが、counts_embed.jsというファイルを読むと、<a href="#comments">の部分を探してそのトピックのコメント数に置き換えた形の表示に切り替わるというものです。

Vicunaテンプレートでは、Comments: 0 のような形になってますので、このスクリプトが働くと、例えば、3Comments :0のような表示になってしまいます。これが気になるようならばレスポンスの部分は以下のように書き換えをおこないます。

 <!--allow_comment-->
 
...  Comments</a>: <span class="count"><%topentry_comment_num></span></li>

とあるものを、%topentry_comment_numを以下のようにa要素内に移動しておきます。

<a href= ...<%topentry_title>へのコメント" rel="nofollow"><%topentry_comment_num> Comments</a></li>

以下の画像はPetBasketのトップページにおいて、counts_embed.jsによりコメント数が表示された状態です。

個別エントリー内のCommentsの部分を書き換える例は以下です。ちょっと無理矢理な感じではありますが

<h2>Comments: <span class="count"><%topentry_comment_num></span></h2>

とあるものをh2要素配下にp要素を追加して、

<h2>Comments</h2>
<p>This post has <a href="#comments"><%topentry_comment_num> comments</a></p> 

また、コメント数は個別記事には要らない、という場合はcounts_embed.jsの呼び出しを分岐させることもできます。分岐には<!--not_permanent_area-->を利用しました。

<!--not_permanent_area-->
<script type="text/javascript" src="http://profile.typepad.com/services/embed/tpc/ID( 34桁 )/counts_embed.js"></script>
<!--/not_permanent_area-->
</body>