Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Thêm comment của G+ và Facebook vào blogger

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi TrollVL, 17/10/13.

Lượt xem: 10,834

  1. TrollVL Thành viên cấp 2

    Đã có rất nhiều bài viết hướng dẫn làm cách nào để thêm comment Facebook vào blogspot hoặc chạy song song cả hai hệ thống comment này. Và ở bài viết này mình sẽ hướng dẫn làm cách nào để sử dụng cả 3 hệ thống comment của blogger, G+ và Facebook trên blogspot. Bạn xem demo ở blog của mình tại đây để hiểu rõ hơn


    [​IMG]


    Tạo app trên facebook và lấy Application ID
    Bước 1: Xem hướng dẫn cách tạo app trên facebook và lấy Application ID tại đây

    Bước 2: Tìm thẻ <html và thay bằng đoạn bên dưới
    Thêm đoạn code sau vào trước thẻ </head> trong template
    199611023443344 Là ID của app trên Facebook
    Xóa đoạn code màu tím đi nếu trong template bạn đã có jquery
    CSS
    Tìm thẻ sau trong template
    Code:
    ]]></b:skin>
    Dán css bên dưới phía trên thẻ vừa tìm được
    Code:
    #blogger-comments-page{padding:0 5px}
    #comments h4{text-indent:-999em;height:1px;background:#0186CB;margin-top:27px}
    #fb-comments-page, #googplus-comments-page{display:none}
    #googplus-comments-page {border-top: 1px solid #0186CB;margin-top: 27px;}
    .comments-page{width:98%}
    .comments-tab{float:left;padding:5px;margin-left:5px;margin-right:3px;cursor:pointer;background-color:#048F14;color:#fff}
    .comments-tab-icon{height:14px;width:auto;margin-right:3px}
    .comments-tab:hover{background-color:#rgb(35,117,44)}
    .inactive-select-tab{background-color:#000}
    Thêm các tab comment của G+ và Facebook vào blog

    Bước 1: Tìm đoạn code bên dưới trong template (Bạn chỉ việc tìm đoạn code được bôi màu đỏ sẽ ra)
    [QUOTE]<b:includable id='threaded_comments' var='post'>
    <div class='comments' id='comments'>[/QUOTE]​

    Bước 2: Dán ngay dưới nó đoạn code sau
    Code:
    <div class='comments-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZTnQwV04xMF84OWc'/><data:post.numComments/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='googplus-comments' onclick='javascript:commentToggle(&quot;#googplus-comments&quot;);' title='Comments made with Google+'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZLTI4OG82QUtkc2s'/>
                        G+ Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='https://googledrive.com/host/0Bz_65BAr9KCZb3VFYjlVVG9mMEk'/>
      <fb:comments-count expr:href='data:post.url'/>Comments
    </div>
    <div class='comments-page' id='googplus-comments-page'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <div id='google_comments'/>
              <script>
              gapi.comments.render(&#39;google_comments&#39;, {
              href: window.location,
              width: &#39;680&#39;,
              first_party_property: &#39;
    	
    BLOGGER&#39;,
              view_type: &#39;FILTERED_POSTMOD&#39;
              });
          </script>
      </b:if>
    </div>
    <div class='comments-page' id='fb-comments-page'>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <div class='fbcm'>
            <div id='fb-root'/>
    <fb:comments colorscheme='dark' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='680'/>
          </div>
      </b:if>
    </div>
    <div class='comments-page' id='blogger-comments-page'>

    Bước 3: Tìm thẻ đóng </b:includable> gần nhất ở bên dưới và thêm trước nó thẻ </div> và lưu lại template

    Nếu gặp vướng mắc trong quá trình thực hiện hãy comment bên dưới mình sẽ giải đáp. Chúc bạn thành công!

    ...
  2. Vũ Ngọc Sơn

    Vũ Ngọc Sơn Mới đăng kí

    Hay nhưng mà e chưa làm bao giờ :|

Ủng hộ diễn đàn