web-dev-qa-db-ja.com

BloggerでDisqusとGoogle+の両方のコメントを使用するにはどうすればよいですか?

Bloggerのブログがあります。以前にDisqusを使用しましたが、それについて多くのコメントがあります。ただし、Google +を頻繁に使用するため、BloggerでGoogle+のコメントを使用したいと考えています。しかし、Bloggerで両方を同時に使用するソリューションは見つかりません。

BloggerのデフォルトのコメントとGoogle+のコメントの両方を使用するが、Disqusは使用しない他のソリューションを見つけました。どうやってやるの?

7
einverne

通常どおりにBloggerにDisqusをインストールします。

  1. Disqusにログイン
  2. サイトにDisqusを追加
  3. サイトを登録し、提供されたウィジェットコードをBloggerサイトに追加します。

次に、HTMLテンプレートの2つの複数行セクションを編集して、BloggerにGoogle+コメントを追加します。

  1. Blogger➜ダッシュボード➜テンプレート➜HTMLエディター
  2. コードブロックを置き換えます

      <b:includable id='comment_picker' var='post'>...</b:includable>
    

        <b:includable id='comment_picker' var='post'>
      <b:if cond='data:post.forceIframeComments'>
        <b:include data='post' name='iframe_comments'/>
        <b:if cond='data:post.showThreadedComments'>
          <b:include data='post' name='threaded_comments'/>
        <b:else/>
          <b:include data='post' name='comments'/>
        </b:if>
      <b:else/>
        <b:if cond='data:post.commentSource == 1'>
          <b:include data='post' name='iframe_comments'/>
        <b:else/>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='threaded_comments'/>
          </b:if>
        </b:if>
      </b:if>
    </b:includable>
    
  3. コードブロックを置き換えます

      <b:includable id='threaded_comments' var='post'>...</b:includable>
    

    <b:includable id='threaded_comments' var='post'>
    <div id='comment-header'>
      <img class='comment-on' id='comments-norm' src='http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/s50/disqus-social-icon-blue-transparent.png' title='view Blogger comments'/>
      <div class='choice'>Comment With Your Choice</div>
    <image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/>
    </div>
    <div id='comment-zone'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <h4><data:post.commentLabelFull/>:</h4>
    
        <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>
    
        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>
    
        <b:if cond='data:showCmtPopup'>
          <div id='comment-popup'>
            <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
            </iframe>
          </div>
        </b:if>
    
        <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
           <b:if cond='data:post.showBacklinks'>
             <b:include data='post' name='backlinks'/>
           </b:if>
        </div>
        </div>
      </div>
      <div id='gcontainer'><div id='gcomments'/></div>
    <script src='http://apis.google.com/js/plusone.js'/>
    <script>
    gapi.comments.render('gcomments', {
        href: window.location,
        width: '750',
        first_party_property: 'BLOGGER',
        view_type: 'FILTERED_POSTMOD'
    });
    $('#comments-norm').click(function(){
     // switch to normal comments displaying
     $('#gcontainer').css('display','none');
     $('#comments').css('display','block');
     $('#comments-norm').addClass('comment-on');
     $('#comments-gplus').removeClass('comment-on');
     $('#comments-norm').attr('src','http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/s50/disqus-social-icon-blue-transparent.png');
     $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');
    });
    $('#comments-gplus').click(function(){
     // switch to google plus comments displaying
     $('#comments').css('display','none');
     $('#gcontainer').css('display','block');
     $('#comments-norm').removeClass('comment-on');
     $('#comments-gplus').addClass('comment-on');
     $('#comments-norm').attr('src','http://2.bp.blogspot.com/-31izM0JEWCs/Uoe6Uf7eqoI/AAAAAAAADcI/AC8mXw1gUcg/s50/disqus-social-icon-dark-transparent.png');
     $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');
    });
    $('#comments-norm').hover(
     // switch to normal comments displaying
     function(){
      if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://3.bp.blogspot.com/-S3w45s75Yio/Uoe5OPXkFjI/AAAAAAAADcA/vmtzeVI2wFg/s50/disqus-social-icon-blue-transparent.png');} 
     },  function(){
      if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','http://2.bp.blogspot.com/-31izM0JEWCs/Uoe6Uf7eqoI/AAAAAAAADcI/AC8mXw1gUcg/s50/disqus-social-icon-dark-transparent.png');} 
     }
    );
    $('#comments-gplus').hover(
     // switch to gplus comments displaying
     function(){
      if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png');} 
     },  function(){
      if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png');} 
     }
    
    
    );</script>
    </div>
    </b:includable>
    
  4. テンプレートを保存します。
1
adam