Tutorial FB Page Like Box popup

Hari ni nak share cara untuk buat popup fb page kat blog.

1. Pertama sekali, kena ada FB page. Buka FB page, pastu pergi kat developer ( https://developers.facebook.com/ ) . dia akan keluar macam di bawah ni, lepas tu klik SWITCH.

2.  Pastu keluar page developer dan scroll ke bawah. dan jumpa The Like Button, klik Learn More.

3. Pastu akan keluar macam kat bawah, dan klik LIKE BOX.  

4. Lepas tu, keluar seperti dibawah, isikan url tu dengan URL Fb Page anda dan isikan saiz yang anda nak, saya cadangkan 300 untuk width dan 300 untuk height. selepas itu klik GET CODE.

5. Selepas klik GET CODE, akan keluar box Your Plugin Code, ambik IFRAME. Dan copy coding yang disediakan. 

6. Anda perlu copy coding seperti dibawah. Dan yang saya higlight kan warna kuning tu, anda gantikan dengan coding yang anda copy tadi (Plugin Code td). Saya cadangkan proses ini dibuat pada aplikasi Microsoft Word. Supaya lebih senang nak copy dan paste.

-------------------------------------------------------------------------------------------------

<!-- Facebook POPUP LikeBox With Timer Code Start -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

    <style type='text/css'>

    #exepopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#exepopup span{font-size:20px !important;font-weight:bold !important;}#exepopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnjRXl_oK6FbvAX_R7uk_J11WMKP2OaJp8HViDOfg03TVoeRNopyXwDQfASC4cNILGb1DB3A3NDsxylEwjlLWTDLCZTX23JkJt3GIkNbO0HYPzKmwPk63D_XgRBJIcQrBfZU4hufqObY/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.exepopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#exepopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#exepopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#exepopupclose:active{top:1px;left:1px;}</style>

    <script type='text/javascript'>

    jQuery(document).ready(function() {

    function exepopupfunc() {

    var sec = 10

    var timer = setInterval(function() {

    $("#exepopupfooter span").text(sec--);

    if (sec == 0) {

    $("#exepopup").fadeOut("slow");

    clearInterval(timer);

    }

    },1000);

    var exepopupwindow = jQuery(window).height();

    var exepopupdiv = jQuery("#exepopup").height();

    var exepopuptop = jQuery(window).scrollTop()+50;

    jQuery("#exepopup").css({"top":exepopuptop});}

    jQuery(window).fadeIn(exepopupfunc).resize(exepopupfunc)

    //alert(jQuery.cookie('sreqshown'));

    //var exepopupww = jQuery(window).width();

    //var exepopupwww = jQuery("#exepopup").width();

    //var exepopupleft = (exepopupww-exepopupwww)/2;

    var exepopupleft = 500;

    //var exepopupwindow = jQuery(window).height();

    //var exepopupdiv = jQuery("#exepopup").height();

    //var exepopuptop = (jQuery(window).scrollTop()+exepopupwindow-exepopupdiv) / 2;

    jQuery("#exepopup").animate({opacity: "1", left: "0" , left: exepopupleft}, 0).show();

    jQuery("#exepopupclose").click(function() {

    jQuery("#exepopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});

    </script>

    <div id="exepopup">

    <h1>Like Us On Facebook</h1>

    <div class="exepopupdata">

<iframesrc="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogcikfa&amp;width=650&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true&amp;appId=857584194255612" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:650px; height:290px;" allowTransparency="true"></iframe>

</div>

<div id="exepopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="exepopupclose" onclick="return false;">Skip</a></div>

    <!-- Facebook POPUP LikeBox With Timer Code End --></div>

-----------------------------------------------------------------------------------------------------

8. Setelah siap copy dan paste coding itu dan yang plugin code tadi. anda copy semua yang siap tadi. Buka blog anda, dan buka bahagia design > Layout. Pilih Add a Gadget, dan pilih HTML/Javascript dan PASTE kan coding yang dh siap edit. 

Selepas itu jangan Lupa SAVE dan SAVE ARRANGEMENT. dan kemudian buka blog, untuk lihat hasil.

Baca Tentang: Set Kuruskan Badan 

Your Health & Beauty Consultant: 

 Noor Fatihah bt. Salleh 

Whatsapp & Telegram: 011-31209418 

Facebook: Nutrisi Hatiku 

Instagram: nutrisihatiku_shaklee 

Konsultansi dan Cara Makan akan diberikan pada customer saya :) 

 *Produk-produk ini tidak bertujuan untuk mendiagnos,merawat,menyembuh atau mencegah sebarang jenis penyakit*