Home »

Comment Facebook Song Song Với Comment Blogger

Thứ Sáu, 20 tháng 12, 2013
Comment Facebook Song Song Với Comment Blogger

   Hôm nay mình sẽ hướng dẫn cho các bạn tạo comment facebook song song với blogger, giúp blogger của bạn trở nên pro hơn. 
Các bạn hãy lần lượt làm theo các bước sau:

A: Tạo app trên facebook và lấy Application ID

Trước hết bạn hãy vào địa chỉ này và làm theo hướng dẫn của mình dưới đây.
nhập vào tên app Name muốn hiển thị.
Comment Facebook Song Song Với Comment Blogger
Nhập vô mã captcha hiển thị rồi continue
Comment Facebook Song Song Với Comment Blogger

Comment Facebook Song Song Với Comment Blogger

Nhập Đầy đủ thông tin như hình vẽ rồi Next.

B: Chèn Comments Facebook Vào Blogger.
Bước 1: Vào blogger > Mẫu > Chỉnh sửa HTML
Bước 2: Chọn mở rộng mẫu Tiện Ích

Bước 3: Dán code bên dưới sau thẻ <head>

<meta expr:content='data:blog.pageTitle' property='og:title'/> 
<meta expr:content='data:blog.url' property='og:url'/> 
<meta content='article' property='og:type'/> 
<meta content='https://lh5.googleusercontent.com/-VhSoDeyE39s/AAAAAAAAAAI/AAAAAAAAAAA/WD8BnuTTPLc/s96-c/photo.jpg' property='og:image'/> 
<meta content='750771148285429' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'> 
    function commentToggle(selectTab) { 
      $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;); 
      $(selectTab).removeClass(&quot;inactive-select-tab&quot;); 
      $(&quot;.comments-page&quot;).hide(); 
      $(selectTab + &quot;-page&quot;).show(); 
    } 

    </script>

Thay đổi  Link ảnh Logo của blog màu đỏ thay bằng link ảnh của bạn có kích cỡ 30 x 30px 
FACEBOOK APP ID 750771148285429 bằng địa chỉ ID đã tạo ở những bước trên

Bước 4: Tìm thẻ <html và thay bằng đoạn bên dưới

<html xmlns:fb='http://www.facebook.com/2008/fbml'
Nếu tìm trong template có xmlns:fb='http://www.facebook.com/2008/fbml' rồi thì bỏ qua bước này nhé
Bước 5: Tìm ]]></b:skin> và dán trước nó code bên dưới

.comments-page {  background-color: #f2f2f2; width:450px;}
    #blogger-comments-page {  padding: 0px 5px;  display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Thay đổi những phần tô đậm sao cho phù hợp với blog của bạn lần lượt là màu nền và độ rộng khung comments

Bước 6: Tìm code bên dưới
<div class='comments' id='comments'>
 Chèn code bên dưới sau tất cả những code bạn đã tìm được bên trên

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://huyco-troll.googlecode.com/svn/trunk/icon/cmfb.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://huyco-troll.googlecode.com/svn/trunk/icon/cmbg.png'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
</b:if>
</div>

450 là độ rộng của khung comments bằng facebook
Khi bạn lưu lại template mà báo lỗi thì xóa đoạn code được bôi màu đỏ đi 

Bước 7: Lưu lại template
Đây là bài hướng dẫn cơ bản thôi, bạn hãy dựa theo bài viết của mình mà sáng tạo cho phù hợp với blog của mình.
Chúc các bạn thành công!
Tags:

Comments[ 0 ]


Đăng nhận xét