Thêm Like Facebook bằng Css cho Website

Ở 2 bài trước mình có giới thiệu về Like Box Facebook bằng Responsive cho Blogger/Blogspot hay website và Popup Like Facebook hẹn giờ tắt cho Blogger/Blogspot cũng khá bắt mắt. Bài này mình xin giới thiệu thêm một dạng Like Box Facebook bằng CSS và HTML5 giúp cho website của bạn tải nhanh hơn so với các dạng khác và tối ưu được SEO.

Để thêm tiện ích này bạn chỉ cần dán đoạn code dưới đây vào bất kỳ vị trí nào bạn muốn hiển thị hoặc nếu là Blogger thì thực hiện giống với 2 bài viết trước.

<div class="facebookOuter">
<div class="facebookInner">
<div class="fb-like-box"
data-width="300" data-height="300"
data-href="http://www.facebook.com/laodongblog"
data-border-color="#FFEAB4" data-show-faces="true"
data-stream="false" data-header="false">
</div>
</div>
</div>
<div id="fb-root"></div>
<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>
​<style>
.facebookOuter {
padding:10px;
border:5px inset ;
border-color:#00FF11;
height:300px;
width:300px; background:#FFEAB4;
transition: background-color .777s;
-webkit-transition: background-color .777s;
-moz-transition: background-color .777s;
-o-transition: background-color .777s;
-ms-transition: background-color .777s;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
}
.facebookInner {
overflow:hidden;
height:300px;
}
.facebookOuter:hover {
background:#FFF1CE;
border-color:#000000;
}​
</style>

Thanks!