f

2016-10-02

Bloggerへのコメント欄サービスDisqusの導入

Bloggerの標準のコメント欄だと,コメントした人は返信があっても通知を受け取ることができず,その都度自分でコメントがついたかどうか確認する必要がある。これは閲覧者に不便を強いることになるのでよくないと思っていた。

それで,以前から気になっていたDisqusというコメントサービスを設置してみることにした。Disqusを使えば,コメントに対して返信があればメールで通知を受け取ることができる。また,各種SNSアカウントでもログインできるのでコメントが投稿しやすい。コメント欄サービスとしては,おそらく一番使い勝手がよさそうなサービスだ。

この記事ではBloggerへのDisqusのインストール手順を記す。

インストール手順の参考ページ

まず,以下のページに既に存在しているブログにDisqusをインストールするための手順が書かれているので,これを参考にする。

参考:Adding Disqus to your site | DISQUS

基本的にウィジェットが提供されているので,それを設置するだけでよさそうだ。

Disqusコメント欄の設置

以下の手順でDisqusのWebサイトへの登録ページヘ移動する。

Disqus | Install instructions for Blogger→[Blogger widget installation]を選択→右上の[Get Disqus for your site]

Disqusへのサイト登録ページへ移動

あるいは,以下の手順でトップページからアクセスしてもよい。

トップページ→[GET STARTED]→[I want to install Disqus on my site
トップページからのアクセス手順

Disqusで管理するWebサイトを登録するために,Webサイト名とジャンルや使用言語を設定する。なお,このWebサイト名はDisqusの管理ページのURLに使われる。

Disqusで管理するWebサイトの情報の登録

Webサイトの登録が終わると,管理ページに移動する。今回は,Website NameをMy Future Sight for Pastにしたので,以下のURLとなった。

https://my-future-sight-for-past.disqus.com/admin/install/

表示されたページから,設置するプラットフォーム(今回はBlogger)を選択する。すると,Disqusのインストール手順のページ(
https://my-future-sight-for-past.disqus.com/admin/install/platforms/blogger/)に移動する。

Disqusコメントの設置手順ページ

ここで,[1 Add my-fugure-sight-for-past to my Blogger site]を選択すると,新しいタブが開き,BloggerにDisqusのウィジェットを設置するかの確認画面が表示される。

Bloggerへのウィジェットの登録ページ

[ウィジェットを追加]を押下すると,ブログにDisqusが追加され,記事のコメント欄がDisqusになる。

設置されたDisqusコメント欄

既存コメントのインポート

Disqusのコメントを設置しただけでは,既存のBlogger側で管理しているコメントは見えなくなってしまう。既存のコメントをDisqus上で表示するには,BloggerのコメントをDisqusにインポートする。

先ほどの管理ページ(例:https://my-future-sight-for-past.disqus.com/admin/discussions/import/platform/blogger/)に戻り以下の項目を実行する。

[2 Import your existing Blogger comments into Disqus at Discussions > Import.]

[Discussions > Import]を押下すると,BloggerのコメントがDisqusにインポートされ,ついでにDisqusとBloggerとで記事のコメントが同期が始まる模様。

これで,ブログへのDisqusの最低限のインストールが完了した。

最新コメント一覧の表示

Disqusでは標準で最新コメント一覧のウィジェットは用意されていない。自分でAPIにアクセスするしかないようだ。

参考: Widgets | DISQUS

Bloggerで,ダッシュボード→[レイアウト]→[ガジェットを追加]→[HTML/JavaScript]を選択する。

レイアウト画面
ガジェットを追加
HTML/JavaScriptの設定
最新コメント一覧の追加

[HTML/JavaScriptの設定]に以下のコードを記入すれば,最新コメント一覧を表示できるウィジェットを配置できる。

<div id="recentcomments">
<script type="text/javascript" src="http://my-future-sight-for-past.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=12&excerpt_length=100"></script>
</div>

なお,my-future-sight-for-pastには,Disqusでサイトを登録するときに使用したIDを使う。その他のパラメーターは以下の役割となる。

Disqusの最新コメント一覧でのパラメーターの説明
パラメーター 規定値 説明
num_items 5 表示するコメント数
hide_mods 0 1にすれば管理者のコメントを非表示
excerpt_length 100 1コメントの表示文字数
hide_avatars 0 1にすればアバターアイコンを非表示
avatar_size 32 アバターアイコンのサイズ[px]

参考:How To Add Disqus Recent Comments Widget - Subin's Blog

これで,例えば以下の図のように最新コメントを表示させることができる。

最新コメント一覧の表示例

Disqusのコメント欄設置場所のカスタマイズ

既定のままだと,例えばモバイルページで表示されなかったり,プレビュー中でも表示されたりと都合が悪いのでカスタマイズする。以下のページを参考にした。

参照:BloggerへのDISQUS導入メモ | @ovreneli (tech)

BloggerのテンプレートのHTMLを直接編集する。ダッシュボードから以下の順番でテンプレート編集画面に移動する。

[テンプレート]→[HTMLの編集]

Bloggerのテンプレート編集画面
モバイルページでの有効化

まず,モバイルページでのDisqusのコメント表示を有効にする。Disqus forで検索して,b:widget要素を見つける。見つかったら,mobile='yes'を追加する。

モバイルページでのDisqusコメントの有効化
  <b:widget id='HTML4' locked='false' mobile='yes' title='Disqus for my-future-sight-for-past' type='HTML' visible='true'>

プレビュー中での無効化

続いて,Bloggerで記事を投稿画面のプレビュー表示ではDisqusを無効化する。上記HTMLコードのすぐ下あたりのコードを編集する。以下のコードを挿入して,プレビューページでは無効にする。

location.pathname !== &#39;/b/post-preview&#39; &amp;&amp;
プレビュー中のDisqusコメントの無効化
<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;//&#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>
    <style type='text/css'>
        .post-comment-link { visibility: hidden; }
    </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;//&#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>
固定ページでの有効化

最後に,Bloggerの固定ページでもDisqusを表示させる。この方法は以下のDisqusの公式ページでも紹介されていたのでこの方法に従う。

参考:Add Disqus to Static Pages in Blogger | DISQUS

b:if要素の開始タグ<b:if cond='data:blog.pageType == &quot;item&quot;'>と終了タグ</b:if>だけを削除するかコメントアウトする。

固定ページでのDisqusコメントの有効化
  <b:widget id='HTML4' locked='false' mobile='yes' title='Disqus for my-future-sight-for-past' type='HTML' visible='true'>
<b:includable id='main'> <script type='text/javascript'> var disqus_shortname = &#39;my-future-sight-for-past&#39;; var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;; if (!disqus_blogger_current_url.length) { disqus_blogger_current_url = &quot;<data:blog.url/>&quot;; } var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;; var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;; </script> <!-- <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;//&#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> --> <style type='text/css'> .post-comment-link { visibility: hidden; } </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;//&#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>

まとめ

DisqusのBloggerへの導入手順を説明した。最新コメント一覧の設置や,固定ページでの有効化など一部HTMLやJavaScriptコードを編集する必要があってやや難しそうな印象をもった。しかし,一度設定してしまえばおしまいなので我慢しよう。

ブログにコメントがつくことはそんなになかった。しかし,コメントがついて返信してやりとりするときに,相手に通知が飛ばなくて手間をとらせてしまうのが恐縮だった。今後はこのようなことがなくなるので,自分の罪悪感もなくなり,お互い効率的に議論ができるようになる。

コメントの返信に対して訪問者へ通知が標準で送られるブログサービスはそうない。標準の機能は使いにくく,Disqusは世界中で使われており,品質が高いのでみんな導入したらよいと思う。

0 件のコメント:

コメントを投稿