Facebook Like Box Popup Onscroll With Cookie

Facebook Like Box Popup Onscroll With Cookie

Bola Hero Gawai

Facebook Like Box Popup Onscroll With Cookie

Facebook Like Box Popup Onscroll With Cookie
Memanfaatkan javascript onscroll untuk subscribe box baik untuk FeedBurner ataupun Mailchimp yang kemarin kita buat, kini kita akan memodifikasi javascript onscroll tersebut untuk membuat 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 jika pengunjung menekan tombol "Don't Show Again" maka widget tidak akan muncul selama belum menghapus cookie browser.



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

Silahkan simpan kode CSS di bawah ini di atas kode </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 kode di bawah ini di atas kode </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="fb:page Facebook Social Plugin" 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 kode kompiajaib dengan username fans page facebook blog Anda. Angka 7000 untuk lamanya cookie dan 800 untuk tinggi kemunculan kotak ketika di-scroll.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

24 Comments Add Comment

pasang lagi, idenya kang kompi lagi di keluarkan semuanya dan ga habis2 spertinya :)

Balas

alhamdulillah saya dapat blog yang memudahkan saya untuk balajar berbagai teknik berkenaan dengan blogger. terimakasih kang.. dan salam kenal

Balas

Kalau Iframe Facebook nya diganti dengan iklan Banner 300X250 bisa ga kang ?

Balas

Sama-sama kang :) salam kenal juga

Balas

sepertinya lagi banyak ide nihh..., kerenn kang adhy..., ijin pasang di blog saya kang .. :)

Balas

Ijin comot kang, mumpung masih anget :D

Balas

Silahkan mas :)

Balas

Test image converter untuk comment hack :) biar mudah menambahkan gambar di postingan blogger.
https://4.bp.blogspot.com/-VPuMIHBg5Yg/V8ELJokm_LI/AAAAAAAAnq4/bu6RI2NjSkYKTODpQijBQBD6iHEyOvxvwCLcB/w1100/Screenshot_3.jpg

Balas

Untuk WP sama juga, CSS (tanpa tag style) simpan di style.css dan javascript-nya simapn di footer.php di atas kode </body>

Balas

Bang, saya sudah ikuti semua intruksi diatas tapi like box popup nya ko ga muncul ya ? bsa dbantu bang ? makasih

Balas

bang tulungin ane.... :'(

Balas

Sepertinya ada kesalahan penulisan kode penutup body, saya lihat source-nya yg paling bawah javascriptnya berwarna hijau semua, otomatis semua javascriptnya tidak jalan. coba yg kode paling bawah betulkan dengan kode ini &lt;!--</body>--&gt;&lt;/body&gt;

Balas

Ini postingan yan berhubungan dengan kode itu
http://www.kompiajaib.com/2013/04/mempercepat-loading-blog-dengan.html
http://adhysuryadi.xyz/perangkap-iklan/

Balas

kang di lihat di hape 4 inchi tidak responsive ya

Balas

Sebaiknya dihilangkan di perangkat kecil

Balas

mksdnya tanpa tag style giman om ?

Balas

Tanpa kode <style></style>

Balas

keren nih, dicoba gan

Balas

mantap comot kang Adi hehe...

Balas

Cara menghilangkannya gimana Mas Adhy?

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×