はてなブログへ TypePad Connect 設置

はてなブログにTypePad Connectのコメントシステムを入れてみたのでそのメモです

以前、FC2ブログに設置してみましたが、そのはてなブログの場合となります。

追記：　はてなブログに「記事下」のHTML編集機能が備わりましたので、そこに TypePad で登録して得たコードを設置する方法でよくなりました。

• FC2ブログのコメントにTypePad Connectを設置

なお、今のところ、はてなブログとTypePad Connect双方がベータ版運用の状態で、先のことまでこちらは予想がつきませんので、今の時点で設置してみたら出来たという程度のものです。

まずは、TypePad（TypePad Connect経由のログインでTypePadのダッシュボードになるので、普通にTypePadにログインでも同じとおもわれます。*当方は米国TypePad Microで使用しています）のほうへいき、はてなブログの登録をします（TypePadのヘルプを参照してください サービスの種類はOtherで）。

必要事項を入力のあと、サイトの登録用コードを取得します。自分がやった限りでは、始めの1.のほうのコードのみでOKです。

はてなブログへいき、「＋モジュールを追加」をクリックします。HTMLのモジュールを選択して（3月8日よりモジュールの機能強化で変更になっている）、 既に入力されているタグは一旦消して、テキストボックスに先ほどのコードをペーストします。

で、以下は任意ですが、エントリページ以外でTypePadコネクトが表示されないように制御しておきます。

取得コードの、

• var TPConnect = {};

のある最初のscript要素を以下に

var l=document.location.href;
var blog='http://<自分のはてなブログのHome URL>/entry/';
if(l.indexOf(blog)!=-1){
        var TPConnect = {};

        TPConnect.tpc_url = '';
        TPConnect.tpc_title = document.getElementById('tpc_post_title').innerHTML;
        TPConnect.tpc_message = document.getElementById('tpc_post_message').innerHTML;

}

変更後、「デザインを変更する」で確定します。

以下にコンテンツ側のほうに設置する例を示しておきますが、あくまでも仮設置用です。メンテナンスするかしないかは、こちらの気分次第ですのであしからず。

<!-- TypePad Connect -->
<script>
var l=document.location.href;
var blog='http://tsuredureweblog.hatenadiary.jp/entry/';
var blogName = ' - ' + 'maRkの';

function set_metaTitle(){
   var meta_title = document.title.replace(blogName,'');
   var postTitle = document.getElementById('tpc_post_title');
   postTitle.appendChild(document.createTextNode(meta_title));
}

if(l.indexOf(blog)!=-1){
var elm = document.getElementsByTagName('footer');
for (var i=0; i<elm.length; i++){
var c=elm[i].getAttribute("class");
   if (c='entry-footer') {
      var div=[];
         for (var j=0; j<3; j++){
                var tpcid = new Array('tpc_thread', 'tpc_post_title', 'tpc_post_message');
                div[j]= document.createElement('div');
                div[j].setAttribute('id',tpcid[j]);
                 if (j>0)  div[j].style.display='none';
                       elm[i].appendChild(div[j]);
                 }
        set_metaTitle();
        var TPConnect = {};
        TPConnect.tpc_url = l;
        TPConnect.tpc_title = document.getElementById('tpc_post_title').innerHTML;
        TPConnect.tpc_message = document.getElementById('tpc_post_message').innerHTML;

    break;
   }
 }
}
</script>

// 以降に<script type="text/javascript" src="http://profile.typepad.com/services/embed/...... のコードを入れる

最初のscript要素を上のようなものにして（var blog= ''には自分のとこのURL）、 この下に、本来のConnect 設置用コード内にある、外部 JavaScript 呼び出しの部分（<script type="text/javascript" src=......）をいれます。

以下は実際のTypePad管理画面上で受け取ったコメントのキャプチャです。

テストしたページ

• https://tsuredureweblog.hatenadiary.jp/entry/2012/03/08/224504