Iris Tips
Iris TipsShow and hide Facebook Comment
Ngày nay thì việc sử dụng Facebook đã trở nên quá quen thuộc đối với mọi người, hầu như ai cũng đều có riêng cho mình một tài khoản trên Facebook. Trang bị cho website của plugin bình luận của Facebook là việc khá cần thiết nếu như bạn muốn tăng lượng tương tác lên mạng xã hội này, cũng như không cần phải tạo thêm tài khoản để bình luận trên website của bạn.Nhưng vấn đề đặt ra là plugin này khá nặng sẽ gây ảnh hưởng đến hiệu suất tải trang của website bạn. Vậy làm thế nào để vẫn thêm Facebook vào blog mà không ảnh hưởng nhiều đến hiệu suất blog của bạn? Thủ thuật sau đây có thể giải quyết vấn đề đó bằng cách Facebook Comment sẽ được ẩn theo mặc định khi tải trang, chỉ hiện và load khi độc giả click vào nút "Hiện Comment". Thích hợp cho các website có lượng truy cập từ di động nhiều, việc ẩn hiện Facebook Comment sẽ làm tăng đáng kể tốc độ tải trang cho website của bạn.
Cách thực hiện
1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS dưới đây vào trước thẻ ]]></b:skin>/* Show hide FB comment */
.comments,.comments-fb{background:#262626;clear:both;margin:0 20px;line-height:1em;padding:0 12px;}
#comments{padding:10px 20px;margin-top:0;display:none}
.fb-comments,.fb_iframe_widget span,.fb_iframe_widget iframe{width:100%!important}
.fb-comments{padding:0!important;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.fb-title{margin:0 20px;text-align:left;background:#111;padding:6px 10px;color:#f7f7f7!important;font-size:120%;font-weight:700}
.fb-loader,#fb-showhide{float:right;cursor:pointer}
#fb-comment,#fb-showhide{display:none}2Tiếp theo ta cần thêm FB SDK để FB comment xuất hiện trên blog bằng cách thêm đoạn script bên dưới vào sau thẻ <body> (nếu blog bạn đã có plugin này rồi thì ta bỏ qua bước này)
<div id='fb-root'/>
<script type='text/javascript'>
!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");
</script>3Tìm đến thẻ </body> và dán đoạn code bên dưới vào trước nó.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");}
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
//]]>
</script>
<div id='fb-root'/>
</b:if>4Tìm đến dòng code <b:includable id='comments' var='post'> và dán đoạn code bên dưới vào ngay sau nó.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
function loadFacebook(){var e=document.getElementById("fb-loader");e.style.display="none";var e=document.getElementById("fb-comment");e.style.display="block";var e=document.getElementById("fb-showhide");e.style.display="block";!function(e,n,t){var o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk");}
function toggleNavPanel(e){var n=document.getElementById(e),l=document.getElementById("fb-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
function toggleNavPanel2(e){var n=document.getElementById(e),l=document.getElementById("disqus-showhide"),t="none";n.style.display==t?(n.style.display="block",l.innerHTML="Hide"):(n.style.display="none",l.innerHTML="Show")};
//]]>
</script>
<div id='fb-root'/>
</b:if>5Cuối cùng là Lưu template của bạn lại và xem kết quả nhé.
Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!
Created by Adhy/Iris Tips
Mẹo nhỏ khi bình luận