Facebook Like Box Popup Onscroll With Cookie

Memanfaatkan javascript onscroll untuk subscribe box baik untuk FeedBurner ataupun Mailchimp yang kemarin kita buat, sekarang kita akan memodifikasi javascript onscroll tersebut untuk menciptakan popup widget facebook like box atau facebook page plugin.

Ketika halaman digulung ke bawah, maka popup facebook like box akan muncul dengan tombol close. Dan popup ini juga dilengkapi dengan tombol close dengan cookie sehingga jikalau pengunjung menekan tombol "Don't Show Again" maka widget tidak akan muncul selama belum menghapus cookie browser.

Demo on Blog Demo on JsFiddle

Jika ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan simpan instruksi CSS di bawah ini di atas instruksi </head>

 <style>
 /*<![CDATA[*/
 .close-fbbox,.close-fbcookie{background:#fff;transition:all .4s ease-in-out;color:#555;cursor:pointer}
 .fbbox-wrapper{width:360px;position:fixed;left:50%;margin-left:-180px;top:50%;margin-top:-131px;height:auto;background-color:#fff;-webkit-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);-moz-box-shadow:0 10px 50px 0 rgba(0,0,0,.25);box-shadow:0 10px 50px 0 rgba(0,0,0,.25);padding:10px;border:1px solid #dedede;border-radius:5px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000000}
 .close-fbbox{position:absolute;top:-15px;right:-15px;font-family:Arial;font-size:24px;font-weight:700;width:25px;height:25px;line-height:25px;text-align:center;border:1px solid #dedede;border-radius:100%}
 .close-fbcookie{padding:1px 5px;border:1px solid #dedede;border-radius:2px;font:11px Arial;display:inline;float:left;line-height:1}
 .close-fbcookie span{font-size:18px;font-weight:700;vertical-align:middle}
 .close-fbbox:hover,.close-fbcookie:hover{background:#ddd;border:1px solid #ccc}
 #fbOnscroll .layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.7);z-index:999999}
 .zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
 @-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
 }
 @keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
 60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}
 }
 .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
 @-webkit-keyframes fadeIn{0%{opacity:0}
 100%{opacity:1}
 }
 @keyframes fadeIn{0%{opacity:0}
 100%{opacity:1}
 }
 /*]]>*/
 </style>

Kemudian silahkan simpan instruksi di bawah ini di atas instruksi </body>

 <script>
 //<![CDATA[
   var appended = false,
   bookmark = document.createElement("div");
   bookmark.id = "fbOnscroll";
   bookmark.innerHTML = '<div class="fbbox-wrapper zoomInUp">\
   <iframe name="f13bea94f064144" width="1000px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="Facebook Like Box Popup Onscroll With Cookie" src="https://www.facebook.com/v2.7/plugins/page.php?adapt_container_width=true&amp;app_id=113869198637480&amp;channel=https%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FuN4_cXtJDGb.js%3Fversion%3D42%23cb%3Df19b772d4d20444%26domain%3Ddevelopers.facebook.com%26origin%3Dhttps%253A%252F%252Fdevelopers.facebook.com%252Ff1ba7fe51c4d354%26relation%3Dparent.parent&amp;container_width=613&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2Fkompiajaib&amp;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;small_header=false" style="border: none; visibility: visible; width: 340px; height: 214px;" class=""></iframe>\
 <div class="close-fbcookie" onclick="hidesubscribebox()"><span>&#215;</span> Don\'t Show Again</div>\
 <div class="close-fbbox" onclick="hidesubscribe()">&#215;</div>\
               </div>\
               <div class="layer fadeIn"></div>\
 ';
 function hidesubscribe(){document.getElementById("fbOnscroll").style.display="none"}function hidesubscribebox(){document.getElementById("fbOnscroll").style.display="none",createCookie("hideDialog","hide",7000)}function createCookie(e,o,n){if(n){var t=new Date;t.setTime(t.getTime()+24*n*60*60*1e3);var i="; expires="+t.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function readCookie(e){for(var o=e+"=",n=document.cookie.split(";"),t=0;t<n.length;t++){for(var i=n[t];" "==i.charAt(0);)i=i.substring(1,i.length);if(0==i.indexOf(o))return i.substring(o.length,i.length)}return null}function eraseCookie(e){createCookie(e,"",-1)}onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>800&&(appended||(document.body.appendChild(bookmark),appended=!0),readCookie("hideDialog")&&(document.getElementById("fbOnscroll").style.display="none"))};
 //]]>
 </script>

Ganti instruksi kompiajaib dengan username fans page facebook blog Anda. Angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak dikala di-scroll.


Sumber https://www.kompiajaib.com/

Share this post