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>
No comments