Tạo widget Facebook Like Box sau mỗi bài viết cho Blogger

Create Facebook Like Box widget for your website

Facebook hiện đang là mạng xã hội phổ biến nhất hành tinh với hàng tỷ lượt truy cập hàng. Việc chén nút "Thích" vào các website hiện nay khá phổ biến trên các website, nó đang là một công cụ SEO khá hiệu quả. Tuy nhiên chèn vào là một chuyện, còn làm thế nào để làm nổi bật nút "Thích" lại là một chuyện khác.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJpv-VyeDwudZIPuxk4qxO-Z9c6Ni4sTs6sgiwOwwngVBkMJA1Po75-0-YPMt6Xzx_y51LEgGtmlELiK-ki5HllmpTL8urOFx23r00509E9Nshk7xrgIRAi7H8Hbo_h1MgrL7-tCv8WqJ/s1600/iris-tips-fblogo.jpg") no-repeat scroll left top transparent}
.fb_like_top a{height:24px;width:114px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjho7MqA1wJgjUupHN7OV_ER5VYCywD6BD9eF71c1hvOhj71_lOTluF79Od61cfy35FPnb4Y4Pay20dilvkOWTvsAi7POgJBozYE0AR0OZw24-DulmthgtIHw57TDv1fOsZVFSf06A_lPyM/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 == &quot;false&quot;'>
<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!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm