BloggerへのDISQUS導入メモ

このブログにDISQUSコメントを導入した手順のメモです。

DISQUSの方でウィジェットとして簡単に追加する手順が用意されているのですが、以下の対応を追加しています。

モバイルテンプレートにも対応
ページにも対応
編集中のプレビューでの発動を抑止

まずはウィジェットの追加の手順を、次にカスタマイズの手順を説明します。

1. ウィジェットの追加

ずばり、以下のページで「Add site "◯◯◯" to Blogger」というボタンを押すだけで、ウィジェットが追加されます。
Install Disqus on Blogger

ブログを表示して確認してみます。このブログでは右サイドバーに追加されていたので、ダッシュボードの「レイアウト」で、「Disqus for ◯◯◯」というウィジェットを記事の下に移動しました。

2. モバイルテンプレート対応

単にウィジェットを追加した状態では、PCでしかDISQUSコメント欄が表示されませんので（モバイルではBloggerのコメント欄のまま）、手動でテンプレートを書き換えました。

ダッシュボードの「テンプレート」から「HTMLの編集」に進み、「ウィジェットのテンプレートを展開」のチェックボックスをONにしして、「Disqus for ◯◯◯」という箇所を探します。

<b:widget id='HTML1' locked='false' title='Disqus for ◯◯◯' type='HTML'>

この行に、以下の青字部分を追加します。

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>

以上でモバイル対応は完了です。テンプレートを保存して、記事ページにコメント欄が表示されるか確認しましょう。

なお、普通に記事ページでコメント欄が表示できればよくて後は気にしないという場合は、ここまでの対応で十分かと思います。

3. 編集中のプレビューでの発動を抑止

編集中のプレビューでDISQUSコメントが発動すると、余計なスレッドが作成されてしまうので、それを抑止します。テンプレートで抑止する方法もあると思いますが、ここでは以下の青字部分のように、JavaScriptで抑止しています。（インデント少し変えています）

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>
<b:includable id='main'>
...
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>
...
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
          var bloggerjs = document.createElement(&#39;script&#39;);
          bloggerjs.type = &#39;text/javascript&#39;;
          bloggerjs.async = true;
          bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
          (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
        })();
        </script>
    </b:includable>
</b:widget>

4. ページ対応

次に、記事だけでなく、固定ページでもDISQUSコメントを使うようにします。blog.pageTypeがitemの場合のみ実行されているところが該当部分ですので、static_pageに対しても適用します（青字部分）。

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <style type='text/css'>
          #comments {display:none;}
        </style>
        <script type='text/javascript'>
          location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
            var bloggerjs = document.createElement(&#39;script&#39;);
            bloggerjs.type = &#39;text/javascript&#39;;
            bloggerjs.async = true;
            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
          })();
        </script>
      </b:if>

5. 課題

ページ対応で、次のように||(or)を使って書いてみたのですが、動作せず、正しい書き方が分かりませんでした。

<b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.pageType == &quot;static_page&quot;'>

次に、以下のように書いてみたところ、PCでは動作したのですが、モバイルではBloggerのコメント欄が出てしまいました。

<b:widget id='HTML1' locked='false' mobile='yes' title='Disqus for ◯◯◯' type='HTML'>
<b:includable id='disqus_item_js'>
  <style type='text/css'>
    #comments {display:none;}
  </style>
  <script type='text/javascript'>
    location.pathname !== &#39;/b/post-preview&#39; &amp;&amp; (function() {
      var bloggerjs = document.createElement(&#39;script&#39;);
      bloggerjs.type = &#39;text/javascript&#39;;
      bloggerjs.async = true;
      bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
      (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
    })();
  </script>
</b:includable>
<b:includable id='main'>
...
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include name='disqus_item_js'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include name='disqus_item_js'/>
      </b:if>
...
</b:includable>
</b:widget>

ということで、残念ながら、非常に冗長な記述になっています。

@ovreneli (tech)

2012年2月21日火曜日