Create Facebook Like Box widget for your website
Vậy làm thế nào để làm nổi bật nút "Thích"? Hãy cùng Iris Tips tham khảo qua widget Facebook Like Box ở bài viết bên dưới nhé.
Cách thực hiện
1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS sau đây vào trước thẻ ]]></b:skin>.fb_like_box{margin-top:30px;-moz-border-radius:10px 10px 10px 10px;border-radius:10px;background-color:#3B5999;border:3px solid #fff;padding:10px;}
.fb_like_top{overflow:visible;padding:0;margin:0 0 5px;width:95%;height:24px;background:url("https://4.bp.blogspot.com/-YS5lIxKrB_U/WOkpNZ-LtzI/AAAAAAAAFPA/5raF3BdKLAgTbwZKq14KdrvIJUAvGPq3ACLcB/s1600/iris-tips-fblogo.jpg") no-repeat scroll left top transparent}
.fb_like_top a{height:24px;width:114px;background:url("https://2.bp.blogspot.com/-npJVMhGKbQ8/WOkpNj91DyI/AAAAAAAAFPE/LIkkbsFS_4wyIqwRxUA63wLHQkrewYIGgCLcB/s1600/iris-tips-beafan.jpg") no-repeat scroll left top transparent;display:block;float:right;text-indent:-5000px}
.fb_like_button_holder{-moz-border-radius:10px 10px 10px 10px;border-radius:10px;background:none repeat scroll 0 0 #fff;padding:12px 12px 0 12px;width:95%;height:42px}
2Tìm đến thẻ <data:post.body/> và dán đoạn code dưới đây vào sau thẻ đó.
<b:if cond='data:blog.isMobileRequest == "false"'>
<div class='fb_like_box'>
<div class='fb_like_top'>
<a href='https://www.facebook.com/IrisTipsBlog' target='_blank' rel='nofollow'>Be a Fan</a>
</div>
<div class='fb_like_button_holder'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' data-size='small'/> <div class='fb-save' data-size='small'/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
3Để nút Like và Share hiển thị trên website bạn cần phải thêm SDK JavaScript của Facebook bằng cách dán đoạn code sau vào trước thẻ </body>
<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/vi_VN/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
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!
Mẹo nhỏ khi bình luận