» » » » Sử dụng cùng lúc Facebook Comment và Google Comment cho website

06:13
0
Blogspot đã có một bước phát triển vượt bậc khi thêm bộ comment từ google +. Sử dụng chính sức mạnh của mạng xã hội google + để quảng bá website của mình. Đã vậy thì tại sao mình không kết hợp luôn cả hệ thống comment của facebook và sử dụng thêm sức mạnh của facebook để quảng bá cho website của mình. Thủ thuật này sẽ giúp bạn việc đó.

 Bài viết này mình chia 5 phần, lưu ý đọc kỹ nha. Save template lại đề phòng có sự cố xảy ra. 


Phần 1: Sử dụng facebook comment song song với google + comment.

Bước 1: Khởi động google + comment:

Vào trang quản lý chọn mục "Google +" → tick vào mục "Sử dụng tính năng Nhận xét của Google+ trên blog này"



Bước 2.Vào mục "Mẫu" → "Chỉnh sửa HTML" chèn đoạn css sau phía trên ]]></b:skin>

ul.tabs {border-bottom: 2px solid #ff4500}
ul.tabs li{display:inline-block; width:49%; font-size:16px}
ul.tabs li a {width:90%; display:block;  padding:2px 4%; margin:0 5px; background:#eee; box-shadow: 0 0 1px 1px #999; border-radius: 10px 10px 0 0;}
ul.tabs li a:hover{background:#fff; color:#333; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 3px 1px #666;}
ul.tabs a.active {background:#fff; color:#000; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 3px 1px #666;}

Chú ý: nếu dòng chữ google comment và facebook comment bị rớt xuống dòng thì giảm width:49% lại cho phù hợp.

Bước 3: Chèn đoạn script sau phía dưới ]]></b:skin>

<script src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
                $('ul.tabs').each(function(){
                    var $active, $content, $links = $(this).find('a');
                    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
                    $active.addClass('active');
                    $content = $($active.attr('href'));
                    $links.not($active).each(function () {
                        $($(this).attr('href')).hide();
                    });
                    $(this).on('click', 'a', function(e){
                        $active.removeClass('active');
                        $content.hide();
                        $active = $(this);
                        $content = $($(this).attr('href'));
                        $active.addClass('active');
                        $content.show();
                        e.preventDefault();
                    });
                });
            });
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="10" data-width="565"></div>';
//]]>
</script>

Chú ý:

1. Nếu trong template đã có <script src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/> (file jquery) rồi thì bỏ dòng này đi để tránh xung đột code.
2. Nếu trong template đã từng áp dụng thủ thuật nào đó liên quan đến facebook (ví dụ như nút like của facebook, hoặc fanpage facebook...) thì bỏ đoạn code màu xanh dương đi.
3. Trong đoạn script trên những dòng sau bạn cần sửa lại cho phù hợp với blog của mình:
   data-num-posts="10" : 10 là số facebook comment sẽ hiển thị.
   data-width="565" : 565 là chiều rộng của khung chứa nội dung facebook comment.

 Bước 4: Tìm đoạn code sau:

  <b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>

Thay đoạn code trên bằng đoạn code bên dưới:

<div class='tabcomments'>
        <ul class='tabs'>
            <li><a class='active' href='#tab1'>Google Comments</a></li><li><a href='#tab2'>Facebook Comments</a></li>
        </ul>

        <div id='tab1'>
  <b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

    <b:if cond='data:post.embedCommentForm == &quot;false&quot;'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
        </div>
        <div id='tab2' style='display: none;'>
            <script type='text/javascript'>
            document.write(fbcm);
            </script>
</div></div>


Save lại là hoàn thành. Về trang chủ mở thử bài viết nào đó xem thử kết quả.

Phần 2: Sử dụng facebook comment song song với hệ thống comment cũ của blogger.

Bước 1: Y như bước 1 của phần 1, chỉ khác là bỏ dấu tick của mục "Sử dụng tính năng Nhận xét của Google+ trên blog này"

Bước 2 và bước 3: tương tự như ở trên.

Bước 4: Tìm với từ khóa <b:includable id='threaded_comments' var='post'> bạn sẽ thấy phía dưới nó 1 đoạn code tương tự như sau:

  <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>

Thay đoạn code trên bằng đoạn code bên dưới

<div class='tabcomments'>
        <ul class='tabs'>
            <li><a class='active' href='#tab1'>Google Comments</a></li><li><a href='#tab2'>Facebook Comments</a></li>
        </ul>

        <div id='tab1'>

  <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>
        <div id='tab2' style='display: none;'>
            <script type='text/javascript'>
            document.write(fbcm);
            </script>
</div></div>

Save lại là hoàn thành

Phần 3: Khắc phục lỗi khi làm theo phần 2 nhưng không hiện facebook comment khi bài viết chưa có comment nào.

Lưu ý: Chỉ áp dụng phần 3 khi đã làm phần 2.

Bước 5: Tìm với từ khóa <b:includable id='comments' var='post'> bạn sẽ thấy bên dưới nó có đoạn code như sau:

  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <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>

Thay đoạn code trên bằng đoạn code bên dưới:

<div class='tabcomments'>
        <ul class='tabs'>
            <li><a class='active' href='#tab1'>Google Comments</a></li><li><a href='#tab2'>Facebook Comments</a></li>
        </ul>

        <div id='tab1'>

  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <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>
        <div id='tab2' style='display: none;'>
            <script type='text/javascript'>
            document.write(fbcm);
            </script>
</div></div>

Save lại là xem như hoàn thành.
Phần 4: Lưu ý:

1. Nếu chỉ sử dụng facebook comment song song với google + comment thì chỉ cần làm Phần 1, bỏ qua các phần còn lại

2. Nếu chỉ sử dụng facebook comment song song với hệ thống comment cũ của blogger thì làm phần 2 và phần 3, bỏ qua phần 1.
3. Nếu muốn dùng cho tất cả các trường hợp thì làm hết cả 3 phần.

Phần 5: Ưu nhược điểm của các hệ thống comments

Với facebook comment và google + comment:

Ưu điểm:

1. Tận dụng được sức mạnh của mạng xã hội google + và facebook để quảng bá website của mình.
2. Giao diện dể sử dụng với đa số mọi người vì hầu như người dùng đa phần đều có tài khoản facebook hoặc gmail.

Nhược điểm:

1. Tốc độ load chậm hơn so với dùng hệ thống comment cũ của blogspot.
2. Không quản lý được nhận xét của đọc giả. (khi có nhận xét mới mình cũng ko biết vì không có mục nào để quản lý hết)
3. Chỉ có 1 giao diện duy nhất. Không tùy chỉnh được nhiều.

Với hệ thống comment cũ của blogspot:

Ưu điểm:

1. Tốc độ load nhanh.
2. Giao diện đa dạng, chỉ cần thay đổi css là ra rất nhiều mẫu comment đẹp
3. Quản lý nhận xét dễ dàng vì có riêng 1 mục để quản lý nhận xét mới.

Nhược điểm:

1. Khó sử dụng với người dùng không có gmail. (không ghi nhận xét được)
2. Quảng bá không bằng 2 hệ thống comment trên.

Bài viết này hơi bị dài, chịu khó đọc nha. Nếu có vấn đề gì thì để lại comment bên dưới mình sẽ hồi âm trong thời gian sớm nhất có thể. Chúc bạn thành công!
Người đăng: vào lúc 06:13
Nhãn: , ,

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)