@ovreneli (tech)

このブログに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>

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

設定方法など、解説エントリーは後で追加していきたいと考えていますが、今回はひとまず、カスタマイズした内容をまとめておきます。

1. タイムラインに追加

FacebookのOpen Graph活用事例です。

ブログの右側にある「タイムラインに追加」ボタンを押すと、以後、このブログの記事を読んだというアクティビティが、タイムラインに表示されるようになります。

今のところ控えめに、15秒以上読んでいただいた場合に限定しています（笑）

ぜひ「タイムラインに追加」を押して、15秒以上読んでいただければと思います。

2. DISQUSコメントシステム

どうしてFacebookのコメント使わないの？って言われそうですが、Facebook以外のアカウントでもコメントできる方がいいと考えて、DISQUSを選択しました。

Twitter、Facebook、Googleなどのアカウントでコメントできます。

また、モバイルでも利用可能です。

3. ソーシャルボタン

共有ボタン類

Blogger標準の共有ボタンは挙動も含めイマイチなので、自分で設置しました。

技術的な内容を書いていくつもりなので、LinkedInも含めています。

フォローボタン類

右側に各種SNSのフォロー系ボタンをまとめてみました。

どれもフォロアーが多くないですが、そこは今回の主題ではありませんし、設置すると効果があるかという実験でもありますので、気にしないでください＞＜

4. Google+連携

読者の方には関係のない話ですが、投稿後に投稿をGoogle+で共有するのが、非常に簡単になっています。

5. 今後の課題

「タイムラインに追加」のモバイル対応
「ソーシャルボタン」のモバイル対応
共有ボタンの追加の検討（はてなブックマーク、mixiチェックなど）

まずは形だけ整えてみたって状態ですので、内容のあるエントリーを書き続けていくのが、最大の課題ですけどね（苦笑）