Facebook comments for blogger - Update
Thứ Năm, 8 tháng 12, 2011
Ở bài viết trước mình đã hướng dẫn các bạn thay thế comment của blogger bằng comment của facebook, và mình đã nhận được 1 số phản hồi như là : chèn form comment của facebook vô làm blog load ỳ ạch, hoặc nhiều khi không load được đối với nhà mạng VNPT, và 1 ý kiến phản hồi khá hay là sử dụng song song cả 2 form comment của blogger và facebook cho bài viết. Ý kiến phản hồi này đã kích thích mình, và mình đã test ngay. Và bây giờ là lúc ngồi trước máy tính để chia sẻ cho mọi người.
Ở bản cập nhật này, mặc định form comment của Blogger sẽ được hiển thị, khi muốn comment bên form của facebook, thì các bạn chỉ việc click vào thanh điều hướng chuyển form comment là được.
Demo của bạn này và demo của bản cũ sẽ vẫn được dùng chung.
Xem DEMO
Hình ảnh minh họa
Updated 10/12/2011 : về việc click vào điều hướng chuyển form sẽ nhảy đến khu vực comment, tránh trường hợp bài viết dài khỏi mất công kéo chuột xuống.
- Để update thủ thuật, bạn chỉ cần update code của bước 5 là được.
- Để update thủ thuật, bạn chỉ cần update code của bước 5 là được.
Sau đây là các bước thực hiện : lưu ý là ở bản cập nhật này các bước thực hiện vẫn tương tự, chỉ có khác là không vào phần cài đặt để ẩn comment mà thôi. Vì thế nếu đã thực hiện bản cũ muốn update lên ở bản này thì các bạn cứ việc thay thế code đã thêm ở bản cũ bằng code của bản này là được.
1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.
2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var purl= location.href;
var cm_form = purl.GetValue("cm_form");
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
- data-width là độ rộng của comment box.//<![CDATA[
String.prototype.GetValue= function(para) {
var reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
var r = this.substr(this.indexOf("\?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var purl= location.href;
var cm_form = purl.GetValue("cm_form");
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="660"></div>';
//]]>
</script>
- data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)
- data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.
3. Chèn đoạn code bên dưới vào sau thẻ <body>
<div id='fb-root'/>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
4. Tìm đoạn code như bên dưới :
<b:include data='post' name='post'/>
5. Chèn ngay sau nó đoạn code bên dưới :
<b:if cond='data:blog.pageType == "item"'>
<div id='cmnav' style='text-align:center;'> <a href='?cm_form=blogger#cmnav'>Blogger Comments</a> | <a href='?cm_form=facebook#cmnav'>Facebook Comments</a> </div>
<script type='text/javascript'>
if (cm_form=="facebook#cmnav") {
document.write(fbcm);
var fbcss = document.createElement("style");
fbcss.type = "text/css";
fbcss.innerHTML = "#comments { display:none }";
document.body.appendChild(fbcss);
}
</script>
</b:if>
<div id='cmnav' style='text-align:center;'> <a href='?cm_form=blogger#cmnav'>Blogger Comments</a> | <a href='?cm_form=facebook#cmnav'>Facebook Comments</a> </div>
<script type='text/javascript'>
if (cm_form=="facebook#cmnav") {
document.write(fbcm);
var fbcss = document.createElement("style");
fbcss.type = "text/css";
fbcss.innerHTML = "#comments { display:none }";
document.body.appendChild(fbcss);
}
</script>
</b:if>
- Ở bước 5 này có 1 lưu ý nhỏ. Bạn phải xác định thẻ div chưa nội dung của phần comment của blogger là gì, đa số nó sẽ là #comments. Tùy theo template của bạn đang xài, và tùy theo người Rip template thì có thể nó sẽ khác. Việc xác định nó cũng không khó nên mình không hướng dẫn ở đây.
- 1 điều nữa là phần liên kết chuyển form comment (href='?cm_form=blogger' và href='?cm_form=facebook'). Cái giá trị cm_form=facebook thì bạn phải giữ nguyên, còn giá trị cm_form=blogger thì các bạn có thể thay đổi theo ý thích. Cái này chỉ có tác dụng load lại trang để sang chế độ comment của blogger mà thôi. Như ở đây mình khuyên cũng nên giữ nguyên để cho nó đẹp, pro 1 tý.
6. Save template.
Chúc các bạn thành công.
Thanks ý tưởng của Quang Minh today
- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
Comments[ 0 ]
Đăng nhận xét