Hướng dẫn thêm popup like fanpage tuyệt đẹp vào Blogspot

Xin chào các bạn, ở bài viết này mình sẽ chia sẻ một Popup Like Fanpage Facebook tuyệt đẹp, style này là mình mượn bên blog của anh Trần Thanh Bình (Toishare.net) và chia sẻ lại chứ không phải của mình nha. Đây là một style được thiết kế nhỏ gọn đẹp mắt, popup được cố định tại vị trí góc phải màn hình và bạn hoàn toàn có thể thay đổi vị trí bằng cách tùy biến CSS sao cho vừa ý.

Hướng dẫn thêm popup like vào blogspot

Cần chuẩn bị trước (bắt buộc)

- Blog bạn bắt buộc phải có thư viện SDK của Facebook và thư viện Jquery, Font awesome để popup có thể chạy mà không gặp bất kỳ vấn đề phát sinh nào.

Thư viện SDK Facebook (nếu chưa có)

- Nếu như chưa có thư viện SDK thì bạn vui lòng thêm code này vào trước thẻ đóng </body> :
<div id='fb-root'/>
<script>
//<![CDATA[
(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 = 'https://connect.facebook.net/vi_VN/sdk.js#xfbml=1&version=v3.2&appId=1064479843734428&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]></script>

Thư viện Jquery & font awesome (nếu chưa có)

- Nếu blog bạn chưa có thư viện Jquery và font Awesome , vui lòng thêm đoạn HTML này vào trước thẻ đóng </head> hoặc sau thẻ mở <head> :
<!--Thư viện Jquery-->
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/>
<!--Thư viện font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Tiến hành thêm popup 

- Để thêm popup like Fanpage, bạn hãy thêm toàn bộ code này vào trước thẻ đóng </body> :
<b:if cond='data:blog.isMobile'>
<!-- hiển thị trên Mobile -->
<b:else/>
<style>
.demo-float{position:fixed;right:25px;bottom:25px;width:300px;background-color:#fff;z-index:99999;padding:15px;border-radius:7px;box-shadow:0 0 10px 2px rgba(155,155,155,0.2)}
.demo-float h3{color:#38393b;font-size:17px;font-weight:700;margin:0 0 7px}
.demo-float p{font-size:13px;color:#757575;line-height:1.5em;margin:0}
.demo-float a{float:left;width:100%;height:28px;background-color:#79b530;font-size:14px;color:#fff;text-align:center;line-height:28px;margin:15px 0 0;border-radius:2px;transition:background .17s ease}
.demo-float a:hover{background-color:#0084b4}
.df-hide{position:absolute;top:10px;right:13px;font-size:13px;color:#38393b;cursor:pointer;transition:color .17s ease}
.df-hide:hover{color:#f03a17}
.fb_iframe_widget iframe{float:left;box-sizing:border-box;width:100%!important;height:230px!important;visibility:inherit!important;box-shadow:0 2px 15px 0 rgba(0,0,0,.15)}
</style>
<div class='demo-float'>
<span class='df-hide'><i class='fa fa-times'/></span>
<h3>Võ Hữu Nhân</h3>
<p>Thích trang trang và nhấn theo dõi để nhận được nhiều thủ thuật hay.</p>
<div class='clear' style='margin:8px 0'/>
<div class='fb-page' data-adapt-container-width='true' data-hide-cover='false' data-href='https://www.facebook.com/Blogspot247' data-show-facepile='true' data-small-header='false'><blockquote cite='https://www.facebook.com/Blogspot247' class='fb-xfbml-parse-ignore'><a href='https://www.facebook.com/Blogspot247'>Võ Hữu Nhân</a></blockquote></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('.df-hide').on('click',function(){$('.demo-float').fadeOut(170);});});
//]]>
</script>
<div attribution='setup_tool' class='fb-customerchat' logged_in_greeting='Xin chào ! Tôi có thể giúp được gì cho bạn ?' logged_out_greeting='Xin chào ! Tôi có thể giúp được gì cho bạn ?' page_id='2065431150239298' theme_color='#ff7e29'>
</div>
</b:if>

Trong đó 

  • Võ Hữu Nhân : là tiêu đề hiển thị của Popup.
  • 2065431150239298 : là id Fanpage của bạn (nếu không biết id fanpage, có thể nhấn vào đây để GET ID) .
  • Blogspot247 : là Username hoặc ID Fanpage 
  • Thích trang trang và nhấn theo dõi để nhận được nhiều thủ thuật hay. : là đoạn mô tả ngắn của Popup.
  • Xin chào ! Tôi có thể giúp được gì cho bạn ? : không cần thiết.
Ở đây mình đã chia ra để nó có thể hoạt động trên máy tính và ẩn trên Mobile , nếu các bạn muốn hiển thị trên cả máy tính và điện thoại vui lòng xóa thẻ <b:if> đi nhé. Cảm ơn các bạn đã đọc bài viết!

Lưu ý: Leech đi đâu vui lòng ghi nguồn Blogspot247.Com nhé.
CÓ THỂ BẠN ĐANG TÌM