Space Iklan

Cara Membuat Pop Up Facebook Page Likebox di Blogger Terbaru dengan Pengaturan Jeda Agar tidak Mengganggu Pengunjung Website

byRahmanCyber -
0

Hi Sob, dah lama saya tidak ngebahas tentang BLOGGER, sebelumnya saya pernah menghilangkan ini dalam jangka waktu yang cukup lama, bertahun tahun, tapi disini saya mencoba untuk menyematkannya kembali. Yups! ini adalah PopUp Facebook Likebox, jadi konsepnya itu sebenarnya ketika pengunjung mengunjungi blog kalian, maka akan muncul popup berupa tombol ikuti halaman facebook.

Sebenarnya jaman dahulu itu ini fungsi banget untuk saling terhubung satu sama lain :) misalnya suka baca baca artikel di blog seseorang, maka kita bisa mengikuti halaman facebooknya juga dengan mudah.

Sebenarnya selain untuk nampilin facebook likebox, pop up ini juga bisa untuk menampilkan pesan atau promo.

Keunggulan dari Script Popup ini adalah cukup mudah dan simple tinggal menuju ke tata letak, tambahkan html/javascript, lalu copy paste script dengan sebelumnya mengganti nama halaman facebooknya menjadi halaman facebook anda sendiri, dan beres...

Jadi anda tidak perlu ke edit html yang berpotensi mungkin menghapus titik koma dan mengakibatkan beberapa fungsi error.. hehe


Jika anda ingin mempelajari lebih lanjut tentang plugin halaman ini, bisa kunjungi https://developers.facebook.com/documentation/plugins/page-plugin


plugin facebook likebox
Script Popup Facebook like

Memang sepertinya dulu saya pernah membagikan di channel ini, tapi ini langsungnya tanpa kalian perlu embed link script eksternal yang kadang bisa hilang dari layanan.. hehe


Berikut ini Script Popup Facebook Likebox yang tidak di parser

<!-- AREA CSS UNTUK TAMPILAN POP-UP -->
<style>
  #fb-popup-overlay {
    display: none; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    /* Nilai z-index maksimal untuk mengalahkan semua elemen template */
    z-index: 2147483647 !important; 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
  }
  #fb-popup-box {
    background: #ffffff;
    padding: 20px 20px 30px 20px;
    border-radius: 10px;
    position: relative;
    max-width: 90%;
    width: 340px; 
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: popupMuncul 0.5s ease-out;
  }
  @keyframes popupMuncul {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  #fb-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
    line-height: 1;
    transition: 0.3s;
    z-index: 2147483647;
  }
  #fb-popup-close:hover {
    color: #ff0000;
  }
  #fb-popup-box h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-family: sans-serif;
    color: #333;
  }
</style>
<!-- AREA HTML UNTUK KONTEN POP-UP -->
<div id="fb-popup-overlay">
  <div id="fb-popup-box">
    <span id="fb-popup-close">&times;</span>
    <h3>Temukan Kami di Facebook</h3>
    
    <div id="fb-root"></div>
    <div class="fb-page" 
         data-href="https://www.facebook.com/URL_HALAMAN_FACEBOOK_ANDA" 
         data-tabs="" 
         data-width="300" 
         data-height="" 
         data-small-header="false" 
         data-adapt-container-width="true" 
         data-hide-cover="false" 
         data-show-facepile="true">
    </div>
  </div>
</div>
<!-- AREA JAVASCRIPT UNTUK LOGIKA POP-UP -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var popupOverlay = document.getElementById("fb-popup-overlay");
    
    // PENTING: Pindahkan overlay langsung ke dalam body 
    // agar tidak terjebak di dalam container widget Blogger yang mungkin tertutup elemen lain
    if(popupOverlay) {
        document.body.appendChild(popupOverlay);
    }
    var closeBtn = document.getElementById("fb-popup-close");
    
    // PENGATURAN WAKTU
    var delayMuncull = 5000; 
    var jedaWaktuLagi = 24 * 60 * 60 * 1000; 
    
    var lastShown = localStorage.getItem("fbPopupLastShown");
    var now = new Date().getTime();
    
    var isHomepage = window.location.pathname === '/' || window.location.pathname === '/index.html';
    var shownThisSession = sessionStorage.getItem('fbPopupSession');
    var shouldShow = false;
    
    if (!lastShown || (now - lastShown > jedaWaktuLagi)) {
        shouldShow = true;
    } else if (isHomepage && !shownThisSession) {
        shouldShow = true;
    }
    if (shouldShow) {
      setTimeout(function() {
        popupOverlay.style.display = "flex";
        
        // Load SDK Facebook
        (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/id_ID/sdk.js#xfbml=1&version=v18.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        
      }, delayMuncull);
    }
    function tutupPopup() {
      popupOverlay.style.display = "none";
      localStorage.setItem("fbPopupLastShown", new Date().getTime()); 
      sessionStorage.setItem('fbPopupSession', 'true'); 
    }
    closeBtn.onclick = function() {
      tutupPopup();
    }
    
    window.onclick = function(event) {
      if (event.target == popupOverlay) {
        tutupPopup();
      }
    }
  });
</script>



Berikut ini Script Popup nya yg di parser..

 

&lt;!-- AREA CSS UNTUK TAMPILAN POP-UP --&gt;
&lt;style&gt;
  #fb-popup-overlay {
    display: none; 
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    /* Nilai z-index maksimal untuk mengalahkan semua elemen template */
    z-index: 2147483647 !important; 
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
  }
  #fb-popup-box {
    background: #ffffff;
    padding: 20px 20px 30px 20px;
    border-radius: 10px;
    position: relative;
    max-width: 90%;
    width: 340px; 
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    animation: popupMuncul 0.5s ease-out;
  }
  @keyframes popupMuncul {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  #fb-popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
    line-height: 1;
    transition: 0.3s;
    z-index: 2147483647;
  }
  #fb-popup-close:hover {
    color: #ff0000;
  }
  #fb-popup-box h3 {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-family: sans-serif;
    color: #333;
  }
&lt;/style&gt;
&lt;!-- AREA HTML UNTUK KONTEN POP-UP --&gt;
&lt;div id=&quot;fb-popup-overlay&quot;&gt;
  &lt;div id=&quot;fb-popup-box&quot;&gt;
    &lt;span id=&quot;fb-popup-close&quot;&gt;&amp;times;&lt;/span&gt;
    &lt;h3&gt;Temukan Kami di Facebook&lt;/h3&gt;
    
    &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;fb-page&quot; 
         data-href=&quot;https://www.facebook.com/URL_HALAMAN_FACEBOOK_ANDA&quot; 
         data-tabs=&quot;&quot; 
         data-width=&quot;300&quot; 
         data-height=&quot;&quot; 
         data-small-header=&quot;false&quot; 
         data-adapt-container-width=&quot;true&quot; 
         data-hide-cover=&quot;false&quot; 
         data-show-facepile=&quot;true&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;!-- AREA JAVASCRIPT UNTUK LOGIKA POP-UP --&gt;
&lt;script&gt;
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    var popupOverlay = document.getElementById(&quot;fb-popup-overlay&quot;);
    
    // PENTING: Pindahkan overlay langsung ke dalam body 
    // agar tidak terjebak di dalam container widget Blogger yang mungkin tertutup elemen lain
    if(popupOverlay) {
        document.body.appendChild(popupOverlay);
    }
    var closeBtn = document.getElementById(&quot;fb-popup-close&quot;);
    
    // PENGATURAN WAKTU
    var delayMuncull = 5000; 
    var jedaWaktuLagi = 24 * 60 * 60 * 1000; 
    
    var lastShown = localStorage.getItem(&quot;fbPopupLastShown&quot;);
    var now = new Date().getTime();
    
    var isHomepage = window.location.pathname === '/' || window.location.pathname === '/index.html';
    var shownThisSession = sessionStorage.getItem('fbPopupSession');
    var shouldShow = false;
    
    if (!lastShown || (now - lastShown &gt; jedaWaktuLagi)) {
        shouldShow = true;
    } else if (isHomepage &amp;&amp; !shownThisSession) {
        shouldShow = true;
    }
    if (shouldShow) {
      setTimeout(function() {
        popupOverlay.style.display = &quot;flex&quot;;
        
        // Load SDK Facebook
        (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 = &quot;https://connect.facebook.net/id_ID/sdk.js#xfbml=1&amp;version=v18.0&quot;;
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
        
      }, delayMuncull);
    }
    function tutupPopup() {
      popupOverlay.style.display = &quot;none&quot;;
      localStorage.setItem(&quot;fbPopupLastShown&quot;, new Date().getTime()); 
      sessionStorage.setItem('fbPopupSession', 'true'); 
    }
    closeBtn.onclick = function() {
      tutupPopup();
    }
    
    window.onclick = function(event) {
      if (event.target == popupOverlay) {
        tutupPopup();
      }
    }
  });
&lt;/script&gt;


Silahkan copy, nanti langsung paste ke gadget Html/Javascript 

Harap ganti dulu URL FACEBOOKnya yang saya cetak tebal warna merah itu dengan halaman facebook anda. Contoh halaman facebook saya https://facebook.com/quesearch , berarti anda ganti dengan quesearch

gadget html/javascript
gadget html/javascript blogger


Penjelasan Pengaturan (Kustomisasi):

  • Ganti URL Fanpage: Cari bagian data-href="[https://www.facebook.com/URL_HALAMAN_FACEBOOK_ANDA](https://www.facebook.com/URL_HALAMAN_FACEBOOK_ANDA)" dan ganti dengan URL Facebook Page Anda. (Pastikan halamannya bersifat publik, bukan profil pribadi).
  • Pengaturan Jeda Awal (Delay): Pada bagian JS var delayMuncull = 5000;, artinya popup akan muncul 5 detik setelah blog terbuka. Jika ingin lebih cepat, ubah menjadi 3000 (3 detik).
  • Pengaturan Durasi Kemunculan Kembali: Pada var jedaWaktuLagi = 24 * 60 * 60 * 1000;, artinya jika pengunjung sudah menutup popup, popup itu tidak akan muncul lagi mengganggunya selama 24 jam. Anda bisa mengubah angka 24 menjadi misalnya 1 (1 jam).
  • Logika Homepage: Script ini sudah dibekali sessionStorage dan variabel isHomepage. Ini berarti jika pengunjung baru buka tab, kembali ke homepage, popup akan muncul. Ketika ia mengklik artikel/halaman lain, popup tidak akan mengganggunya. Jika ia me-refresh homepage lagi (di sesi baru), ia akan tampil lagi sesuai dengan permintaan Anda.



Semoga Bermanfaat!




... Visitor
Tags

Posting Komentar

Untuk posting kode, bisa di parse dulu gan, pake tool parse yang udah disediakan di website ini https://www.rahmancyber.net/p/parse-code.html

agar kodenya tidak hilang... ^_^

Lebih baru Lebih lama

نموذج الاتصال