Facebook, Twitter ẩn hiện trong cùng 1 tiện ích

Đối với Blog/Website để tăng lượng người theo dõi trên các trang mạng xã hội của bạn, chúng tôi có 2 Popup khác nhau giống như hộp xuất hiện khi di chuột vào hình ảnh nhỏ ở thanh bên phải blog của bạn.

Một trong những cách tốt nhất để tăng fan xã hội của bạn là thêm Jquery Popup box xã hội cho Blog của bạn. Khi tiện ích Facebook, Twitter ẩn hiện trong cùng 1 tiện ích được cài đặt trên blog của bạn, khách truy cập của bạn sẽ thấy hiển thị một hộp trượt ra với các tùy chọn như trang page Facebook của bạn, hoặc theo bạn trên Twitter.

Ưu điểm tiện ích này là tiết kiệm không gian trên trang. Bởi vì nếu bạn thêm tất cả các widget trên trang web/blog của bạn, nó sẽ có một không gian rộng lớn mà sẽ làm cho khách truy cập của bạn khó chịu.

Xem Demo

DEMO

Làm thế nào để thêm các popup này vào Blog của bạn

Ta cần đăng nhập blog và chọn thêm một tiện ích rồi dán code sau vào và lưu lại.

<style>
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {
width:245px;
height:260px;
overflow:hidden;
}
#twitter_div {
width:260px;
height:238px;
overflow:hidden;
}
#facebook_right {
z-index:10005;
border:2px solid #3c95d9;
background-color:#fff;
width:245px;
height:160px;
position:fixed;
right:-249px;
}
#facebook_right img {
position:absolute;
top:-2px;
left:-35px;
}
#facebook_right iframe {
border:0px solid #3c95d9;
overflow:hidden;
position:static;
height:160px;
left:-2px;
top:-3px;
}
#twitter_right {
z-index:10004;
border:2px solid #6CC5FF;
background-color: #6CC5FF;
width:260px;
height:120px;
position:fixed;
right:-264px;
}
#twitter_right_img {
position: absolute;
top: -2px;
left: -35px;
border: 0;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {
  jQuery("#facebook_right").hover(function () {
    jQuery(this).stop(true, false).animate({
      right: 0
    }, 500);
  }, function () {
    jQuery("#facebook_right").stop(true, false).animate({
      right: -245
    }, 500);
  });
  jQuery("#twitter_right").hover(function () {
    jQuery(this).stop(true, false).animate({
      right: 0
    }, 500);
  }, function () {
    jQuery("#twitter_right").stop(true, false).animate({
      right: -260
    }, 500);
  });
});
//]]>
</script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div id="on">
<div id="facebook_right" style="top: 12%;"> 
<div id="facebook_div">
<img alt="" src="https://1.bp.blogspot.com/-Wu3ENGeqb08/UaQJjHUEqpI/AAAAAAAAapQ/hEP3pV27MYQ/s1600/DTCfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F477172592337348&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div></div></div>
<div id="on">
<div id="twitter_right" style="top: 28%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://1.bp.blogspot.com/-PPND58tI660/UaQJ6XYp82I/AAAAAAAAapY/DIe3jd4W1XE/s1600/DTCtwitter_right.png"/>
<div id="twitterfanbox">
<a href="https://twitter.com/Dautocrazy?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @Dautocrazy</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div></div></div>
</div>

Thay:
- 477172592337348 thành ID page facebook của bạn
- Dautocrazy thành tên đăng nhập tiwitter của bạn