Loading post navigation ...
 
 

Pro page

34
Nhận xét

Facebook comments for blogger - Update

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

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

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.
- 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 = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</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 == &quot;item&quot;'>
<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==&quot;facebook#cmnav&quot;) {
document.write(fbcm);
var fbcss = document.createElement(&quot;style&quot;);
fbcss.type = &quot;text/css&quot;;
fbcss.innerHTML = &quot;#comments { display:none }&quot;;
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' 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


Enter your mail address:

34

admin

e hỏi câu ngoài lề chút, cái pagenavi của blog e chỉ hiện trong bài viết, muốn hiện ở trang chủ thì làm thế nào :D

Phan Dũng

template đẹp đó bạn.
Cái pagenavi của bạn bị ẩn là người thiết kế template đã ẩn nó đi ở trang chủ.

Bạn vào trong code template sẽ tìm thấy dòng code như thế này.
<b:if cond='....
<style>#blog-pager {display:none; }</style>
</b:if>


chỉ việc xóa nó đi là xong.

admin

hehe dc rùi a ạ, thanks a nhiều lắm ^^

NamPhong

cái comment hay ^^

Unknown

Để màu nền cho cmt FB sao nhỉ, cái nền của em trong suốt khó nhìn :(

GIANG

ui, cái blog của em khi chuyển sang dạng comment facebook thì nó vẫn hiện comment blogger: http://2.bp.blogspot.com/-0voKikk7Sh8/TuGYjFumRoI/AAAAAAAAC4E/MV6Q4IXlU_U/s1600/loi-comment.png

Fiat Trịnh Xuân Thọ

Bác Dũng thiết kế template đê,hay giới thiệu thêm mấy cái nào ngon ngon cho bọn em sài(mấy cái pác giới thiệu hồi trước em coi rồi đấy nhá)

Facebook đã bị chặn trở lại,nản thật

Fiat Trịnh Xuân Thọ

Xem giúp mình với,nó không hiện khung comment bằng fb
Chỉ thêm mình cách đổi vị trí của 2 cái với (cho cái com = fb sang bên trái,comm = blogger sang phải) với nhá

Linh Dung

Thủ thuật tuyệt quá anh Dũng ạ! Em thấy nhiều trang sử dụng WP có sử dụng cái này rồi! Blogspot thì đây là lần đầu tiên! Chỉ copy và paste là xong rồi!
@ Đặng Nguyễn Trường Giang: bạn xác định đúng thẻ div chứa nội dung của phần comment của blogger là được, mình cũng gặp phải lỗi này khi làm.
@ Ngonluanho.net: bạn đổi vị trí trong code này thử xem sao? Blogger Comments | Facebook Comments

Kumin

hạn chế là vấn đề load lại trang chúng ta không nói, nhưng đối với bài dài thì phải kéo thanh cuộn xuống một lần nữa để viết cm khi chuyển qua lai hai hệ thống cm thì hơi khó chịu. Anh em có thể dùng link cố dịnh nó cho tiện hơn.

cm_form=facebook anh em có thể đổi thành cm_form=facebook#commentsbox

và if (cm_form=="facebook") sửa thành if (cm_form=="facebook#commentsbox") nhu vay se tiện hơn.

#commentsbox thì ban linh động thay bằng thẻ nào đó phù hop voi blog cua ban!

Phan Dũng

Bạn Linh Dung nói đúng rồi đó.
@Trường Giang : như trong bài viết mình có nói là phải xác định rõ thẻ div chứa phần comment là gì. rồi thay vào code để phần comment của blogspot mới ẩn đi được. Nếu ko tìm được, bạn đưa link blog của bạn đây mình tìm cho.

@Ngonluanho.net : muốn đổi vị trí nó bạn đổi trong đoạn code này
<center> <a href='?cm_form=blogger'>Blogger Comments</a> | <a href='?cm_form=facebook'>Facebook Comments</a> </center>

Theo như ý bạn thì code nó sẽ như thế này :
<center> <a href='?cm_form=facebook'>Facebook Comments</a> | <a href='?cm_form=blogger'>Blogger Comments</a> </center>

Yolks

Nếu em mún , 1 bên là comment cho blogger , 1 bên là share bài viết , mình biến đổi cái comment facebook thành share mạng xã hội được đó a , sau đó thiết kế tab ,bấm qua bấm lại được , em sẽ cho a ý tưởng ở Y!H anh sẽ đọc tin nhắn lưu trữ và a sẽ hiểu , bởi vì trang này tế nhị quá

Phan Dũng

@Yolks : ah, vậy hả. tức là cái chia sẻ mạng xã hội hôm qua em cho anh xem đó hả

Fiat Trịnh Xuân Thọ

Dũng ui,cái comment bằng facebook của mình nó không hiện lên.Chỉ có của blogger thui hiện lên thui à,mỗi lần click vào thì nó lại lên đầu trang.Chỉ dùm mình cách sửa với nhé

Phan Dũng

uh nhỉ, nó không hiển thị, có khi nào nó xung đột với cái tag chia sẻ của facebook ko nhỉ. bạn thử gỡ nó ra xem

Unknown

Thủ thuật hay ;)
nhưng FD, làm sao biết được khi nào có người comment trong "FB Comment"? Bạn có code để hiển thị phần comment mới nhất trong "FB Comment" không, nếu có thì share cho mọi người luôn nhé. Thanks FD nhiều!

Đinh Công Thành

Em muốn chèn vô chỗ đóng khung này thì làm sao vậy a, giúp e với
[img]http://1.bp.blogspot.com/-C2PZd0qezWU/TuIvbhij4JI/AAAAAAAAAlg/ujza4fsX-qU/s1600/fb.png[/img]

OpenAI
Fiat Trịnh Xuân Thọ

Có cách nào để nó hiển thị sẵn khung comment bằng facebook không Fan Dũng ui,thay vì hiển thị sẵn khung commentcho blogger như bây giờ

dinhpsy

Cái này hay quá anh Dũng ơi, em dùng rồi rất ok. Nhưng có một hạn chế nhỏ là nó phải load lại trang, hơi bất tiện chút :-/ anh có biện pháp nào khắc phục hạn chế này k anh Dũng ;))

dinhpsy

hoặc giả khi chuyển qua fb cmt nó load lại trang nhưng jump tới box fb cmt luôn không phải cuộn xuống lần nữa thì hay quá, blog em toàn bài dài lê thê :( nếu phải cuộn xuống thì oải quá :((
thanks anh !

Phan Dũng

@D4U : việc click load lại trang là để tránh những lúc không vô được facebook bạn à.
- Còn việc click chuyển form comment sẽ nhảy tới phần comment thì mình đã update ở trên rồi, bạn có thể xem lại rồi up lại code.

Unknown

Chủ nhà đâu rùi? cho mình hỏi: làm sao biết được khi nào có người comment trong "FB Comment"? Bạn có code để hiển thị phần comment mới nhất trong "FB Comment" không, nếu có thì share cho mọi người luôn nhé. Thanks

Phan Dũng

@BOY7X : cái này hơi khó đó bạn, muốn hiển thị nó thường ta dùng feed để lấy, nhưng không biết có comment của facebook này có feed ko. Với lại các comment này dữ liệu nó phân biệt với nhau bằng link của trang mà nó được chèn vào, nên cũng rất khó để lấy được các comment mới nhất trong tất cả các bài viết của blog.

Khách (ẩn danh)

Anh Fan Dung ơi,facebook thì hay rùi,nhưng để quản lí các comment đấy khỏi bị spam lung tung thì làm sao đây,hichic=((

Unknown

Cảm ơn FD nhiều nhưng nếu FD phát triển được hàng "độc" này thì tuyệt vời! Mình không phải dân IT nhưng cũng ham Blogger, bạn có thể thêm code để mỗi khi có "FB comment" thì sẽ tự động gửi vào mail chẳng hạn..? Mình đã áp dụng thủ thuật này cho blog. Tks so much... ;))

Bé Gió

anh ơi em là không được anh à, không tìm được thẻ này. anh giúp em với. thanks anh trước

Nhut

minh lam nhu vay ma ko dc .giup minh voi

THE GIOI BE CON ONLINE

Đã làm được. Thanks bạn với ý tưởng hay này.
Mong nhận được sự giúp đỡ và góp ý của các bạn về trang THEGIOIBECON.tk của mình nhé.
Chào thân ái.

Unknown

Bài viết hay quá anh ak. Em làm được rồi, thấy mấy blog làm được thế nên em thử tìm nhưng tìm mãi không ra. May quá hôm nay đang tìm tiijeenj ích Like FB thì ra trang của anh. Thích thật !:))
Anh chia sẻ nhiều bài hữu ích hơn nữa anh nhé. Chúc anh luôn có một sức khẻo dồi dào để cống hiến cho nền blogger Việt !
This my site: http://wWw.GiaiTriOnline.info

Unknown

Hay quá bạn ơi! Blogger mà tích hợp Facebook Comments thì như hổ mọc thêm cánh! :D

Unknown

Thật tuyệt vời. Cảm ơn bạn. Đay là blog của mình, mình mới thêm facebook comments.
Expinf.Com

Unknown

bạn ơi, mình làm đúng rồi sao nó vẫn không hiện bạn nhỉ?

Hiệp Cò

Chào Anh!
lâu qua ko chơi blog hôm nay mới ghé lại thăm a vs xem mấy cái thủ thuật mới ^^

cái này thì hay thiệt đó nhưng anh có cách nào cho nó hiện sẵn khung CM của FB trc ko? H có dùng rồi nhưng khung CM blog nó hiện ra trc.Khi nào nhấn vào chữ nhận xét bằng facebook nó mới hiện ra khung CM của facc.



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home