Facebook Like Box ẩn hiện bằng CSS3
Thời buổi hiện nay thì mạng xã hội xuất hiện ở khắp nơi rồi, đặc biệt là facebook. Dù đi đến website nào bạn cũng thấy nút like, rồi thì nhận xét của facebook, và cả facebook like box nữa. Qua việc này bạn thấy gì? Các mạng xã hội hiện nay đặc biệt là facebook đang có vai trò khá quan trọng trong lĩnh vực thu hút lượng truy cập cho website của chúng ta. Chính vì thế chúng ta không nên bỏ lỡ chúng, phải thêm ngay vài cái vào website để bắt kịp với đồng bào.
Đối với các thứ như nút like và nhận xét của facebook thì trong blog này mình đã chia sẻ cả rồi. Bây giờ chỉ còn một thứ nữa đó là Facebook Like Box thôi. Thì hôm nay mình sẽ chia sẻ với các bạn một Facebook Like Box khá là tiết kiệm diện tích trượt theo sidebar và ẩn hiện khi rê chuột vào. Link demo cho các bạn: http://jsfiddle.net/kieusonlam/fAuL6/show/
Đối với các thứ như nút like và nhận xét của facebook thì trong blog này mình đã chia sẻ cả rồi. Bây giờ chỉ còn một thứ nữa đó là Facebook Like Box thôi. Thì hôm nay mình sẽ chia sẻ với các bạn một Facebook Like Box khá là tiết kiệm diện tích trượt theo sidebar và ẩn hiện khi rê chuột vào. Link demo cho các bạn: http://jsfiddle.net/kieusonlam/fAuL6/show/
Facebook Like Box ẩn hiện bằng CSS3
Công việc đầu tiên thì chúng ta sẽ thêm css tùy chỉnh giao diện vào Blogger. Bạn tìm đến thẻ ]]></b:skin> và thêm vào bên trên đoạn mã sau đây.fb-box{
position:fixed;
top:10%;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.fb-box:hover{
right:0;
}
Bây giờ tiếp tục để có thể tạo ra facebook like box tối ưu nhất thì chúng ta sẽ thêm Facebook SDK vào blog. Tìm đến thẻ <body> chèn vào phía sau (nếu có rồi thì thôi nhé)<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.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Cuối cùng đây, chèn đoạn mã này lên trên thẻ </body> để nó xuất hiện trên blog của chúng ta<div class="fb-box">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/KslZone" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
nhớ thay KslZone bằng địa chỉ fanpage của bạn và lưu lại.
lúc 10:53 8 tháng 8, 2014
Bạn ơi, có cách nào like facebook sau đó mới vào trang web không?
lúc 10:56 8 tháng 8, 2014
Theo mình nhớ là có một plugin bằng javascript hay jquery gì đó, để mình lục lại xem sao đã.
lúc 00:05 11 tháng 3, 2015
Code không hoạt động bạn ơi. Nó chỉ hiển ra box fb ở cuối trang bên trái và có chữ f ở trên thôi. Mình đã làm đi làm lại mấy lần không đc.
lúc 16:19 11 tháng 3, 2015
Bạn để lại cho mình địa chỉ trang web của bạn được không?
lúc 05:03 20 tháng 11, 2015
Bạn ơi sao mình làm được rồi nhưng khi rê chuột vào thì nó ko hiện ra trang FB
Ở demo bạn cũng vậy luôn.