Social Content Locker Script

Unleashing the Power of Social Share Content Locker Scripts

In the ever-evolving landscape of digital content, creators and website owners are constantly seeking innovative ways to boost audience engagement. One such tool that has gained traction is the Social Share Content Locker script. This dynamic script combines the allure of exclusive content with the influential reach of social media sharing, creating a symbiotic relationship between creators and their audience.

Js Code: 

(function() { var sl = document.querySelector("#sociallocker"); var slc = document.querySelector("#sociallocker-content"); if (!sl) return; var old_slc_html = slc.innerHTML; slc.innerHTML = slc.innerHTML.replace(/(href=")(.*)(\")/g, "href=\"#\""); sl.querySelectorAll("#sociallocker-links a").forEach(function(ele) { ele.onclick = function(e) { var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300)); var check_window_close = setInterval(function() { if (web_window.closed) { clearInterval(check_window_close); slc.innerHTML = old_slc_html; document.querySelector("#sociallocker-links").style.display = "none"; document.querySelector("#sociallocker-overlay").style.display = "none"; document.querySelector("#sociallocker-content").style.top = "0"; } }, 1000); e.preventDefault(); }; }); })();
CS Code:

@import "https://use.fontawesome.com/releases/v5.0.10/css/all.css"; html, body { font-family: "Trebuchet MS", Helvetica, sans-serif; padding: 10px; background: #f7f8f9; } #sociallocker { background-color: #EEEEEE; text-align: center; position: relative; max-width: 500px; height: 120px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius:10px; } #sociallocker-overlay { background-color: rgba(0,0,0,0.6); font-size: 20px; font-weight: bold; color: #ffffff; transition: all 0.2s ease; } #sociallocker-overlay i { margin-right: 10px; } #sociallocker:hover #sociallocker-overlay { top: -100%; transition: all 0.2s linear; } #sociallocker:hover #sociallocker-content { top: 100%; transition: all 0.2s linear; } #sociallocker-content a { display: inline-block; text-decoration: none; padding: 10px 20px; background-color: #777777; color: #f9f9f9; border-radius: 4px; font-weight: bold; } #sociallocker-overlay, #sociallocker-content, #sociallocker-links{ position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; top: 0; left: 0; } #sociallocker-content { background-color: #ccc; transition: all 0.2s ease; } .social-1 { text-decoration: none; color: #ffffff; display: inline-block; width: 60px; height: 60px; overflow: hidden; margin-right: 5px; } .social-1 i { display: flex; align-items: center; justify-content: center; height: 100%; } .social-1:hover i { background-color: rgba(0,0,0,0.1); transform: scale(1.2); transition: all 0.2s; } .fb { background-color: #4561A8; } .tw { background-color: #17ADEA; } .gp { background-color: #BF3B28; } .in { background-color: #1679B1; } .pi { background-color: #D9303C; } .su { background-color: #E84930; }
HTML Code:

<div id="sociallocker"> <div id="sociallocker-links"> <a href="#" class="social-1 fb"><i class="fab fa-facebook-f"></i></a> <a href="#" class="social-1 tw"><i class="fab fa-twitter"></i></a> <a href="#" class="social-1 gp"><i class="fab fa-google-plus-g"></i></a> <a href="#" class="social-1 in"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="social-1 pi"><i class="fab fa-pinterest-p"></i></a> <a href="#" class="social-1 su"><i class="fab fa-stumbleupon"></i></a> </div> <div id="sociallocker-content"> <a href="#">Download Now</a> </div> <div id="sociallocker-overlay"><i class="fas fa-lock"></i>Unlock content with a social share.</div> </div>

Ensuring Ethical Use and User Consent:

While Social Share Content Locker scripts offer exciting possibilities for engagement, it is essential for creators to use them ethically. Users should be fully informed about the content-locking mechanism, and their consent to share should be obtained transparently. Striking the right balance between encouraging participation and respecting user privacy ensures a positive and ethical implementation of these scripts.

Conclusion:

Social Share Content Locker scripts represent a powerful tool in the arsenal of digital content creators. By leveraging the human desire for exclusive content and the far-reaching impact of social media, these scripts foster a symbiotic relationship between creators and their audience. When implemented thoughtfully and ethically, Social Share Content Locker scripts have the potential to not only enhance engagement but also propel content into the digital spotlight, unlocking new opportunities for growth and influence. 

Subscribe us and Get updates

Note: Like this post and Share with your friends, I’d love to hear from you in the comments below.