Unbounce Example

by dimitrismovin

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="onp-sl onp-sl-webkit onp-sl-secrets onp-sl-social-locker onp-sl-social-buttons-frist onp-sl-contains-single-group onp-sl-social-buttons-enabled onp-sl-no-touch" id="social-anchor">
  <div class="onp-sl-outer-wrap">
    <div class="onp-sl-inner-wrap">
      <div class="onp-sl-screen onp-sl-screen-default">
        <div class="onp-sl-group onp-sl-social-buttons onp-sl-first-group onp-sl-single-group onp-sl-group-index-1 onp-sl-has-counters onp-sl-horizontal onp-sl-lang-en_US">
          
          <div class="onp-sl-group-inner-wrap">
            
            <div class="onp-sl-text">
              <div class="onp-sl-header onp-sl-strong">Like our page to download the content</div>
            </div>
            <div class="secret secret-button">
              <a class="download-btn" 
                 href="https://drive.google.com/file/d/0B6ml3bS2nT7SS0dtbmFoTjZxRXc/view?usp=sharing" target="_blank">Download
              </a>
            </div>
            
            <div class="onp-sl-control onp-sl-facebook-like onp-sl-facebook onp-sl-flip onp-sharing-wrap" style="z-index: 50;">
              <div class="onp-sl-control-inner-wrap">
                <a href="#" class="onp-sl-button-overlay" style="z-index: 50;">
                  <div class="onp-sl-overlay-back" style="z-index: -1;"></div>
                  <div class="onp-sl-overlay-front" style="z-index: 1;">
                    <div class="onp-sl-overlay-icon"></div>
                    <div class="onp-sl-overlay-line"></div>
                    <div class="onp-sl-overlay-text">Like</div>
                  </div>
                  <div class="onp-sl-overlay-header" style="z-index: 1;"></div>
                </a>
                <div class="onp-sl-social-button onp-sl-social-button-facebook-like">
                  <div data-show-faces="false" 
                       data-send="false" 
                      ...

CSS

.secret {
 text-align:center;
 display:none
}
 
.secret-share {
    padding: 20px;
    text-align: center;
    border: 3px solid #ddd;
    background: #f8f8f8;
}

a.download-btn {
    text-transform: uppercase;
    font-size: 22px;
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
  	background: #b01e23;
    margin-top: 24px;
    padding: 16px 32px;
}

.secret-share .fb-like {
 margin-top: 0;
 top: -7px;
 position: relative;}

.secret-share .twitter-share-button {
    margin-right: 25px;
}

<style>
  
.onp-sl-secrets {
    margin: 30px auto 35px;
    border: 0;
    background-color: transparent;
}

.onp-sl-secrets .onp-sl-outer-wrap {
    border: 1px solid #e6e6e6;
    -moz-box-shadow: 0 0 40px rgba(0,0,0,.08);
    -webkit-box-shadow: 0 0 40px rgba(0,0,0,.08);
    box-shadow: 0 0 40px rgba(0,0,0,.08);
}

.onp-sl-secrets .onp-sl-inner-wrap {
    border: 3px solid #fefefe;
    background-color: #f7f7f7;
}

.onp-sl .onp-sl-inner-wrap {
    position: relative;
    overflow: visible;
}

.onp-sl .onp-sl-social-buttons {
    text-align: center;
    padding: 30px;
}

.onp-sl .onp-sl-social-buttons .onp-sl-text {
    margin-bottom: 3px;
}

.onp-sl-secrets .onp-sl-text, .onp-sl-secrets .onp-sl-timer, .onp-sl-secrets .onp-sl-timer * {
    -webkit-text-shadow: 1px 1px 2px #fff;
    -moz-text-shadow: 1px 1px 2px #fff;
    text-shadow: 1px 1px 2px #fff;
}

.onp-sl .onp-sl-header, .onp-sl .onp-sl-text .onp-sl-strong {
    font-size: 18px;
    line-height: 130%;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 7px;
}

.onp-sl-secrets .onp-sl-text .onp-sl-strong:after, .onp-sl-secrets .onp-sl-text .onp-sl-strong:before {
    content: " ";
    display: inline-block;
    width: 11px;
    height: 14px;
    margin: 0 9px;
    background: url("http://webris.org/wp-content/plugins/sociallocker-next-premium/bizpanda/assets/img/lock-icon.png") 0 2px no-repeat;
}

.onp-sl .onp-sl-text p {
    line-height: 150%;
}


.onp-sl p...

JavaScript

//<![CDATA[
/* 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 = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : 'yourappId',
      xfbml      : true,
      version    : 'v2.9' // or earlier version
    });
    FB.Event.subscribe('edge.create', function(href, widget) {
        $.event.trigger({
            type: "pageShared",
            url: href
        }); 
    });
};



/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
  $(".onp-sharing-wrap").hide();
  $(".secret").show();  
});
//]]>