Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger

Baca Juga

Tombol 'Bagikan untuk Membuka Kunci (Share to Unlock) Konten Premium Blogger ini dalam bahasa Inggis disebut "Social Content Locker" atau "Share to Unlock Content".

Pesan yang tertulis juag biasanya "Share to Unlock This Content" atau "Bagikan untuk Membuka Kunci Konten Ini".

Tombol "Share to Unlock" ini adalah fitur atau widget yang digunakan untuk mengunci konten premium.

Konten premium adalah konten yang tidak gratis. Harus ada imbalan dari pembaca atau pengunjung untuk bisa mengakses konten tersebut dalam postingan blog, yaitu dengan cara like atau share (bagikan) ke media sosial.

Jadi, untuk mengakses konten premium ini, pembaca/pengunjung "dipaksa" untuk membagikannya lebih dulu ke akun media sosial atau mengeklik tombol Suka, Bagikan, atau Tweet.

Dengan kata lain, fitur ini meminta pengunjung blog untuk "membayar" dengan cara Tweet, Like, atau Share jika mereka ingin mengakses konten tersebut. Ini contoh penampakannya:

Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger

1. Tema > Edit HTML
2. Simpan kode berikut ini di atas kode </head>

<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
<link href='http://cdn.rawgit.com/menightfury/social-locker/master/style-ver2.css' rel='stylesheet'/>
<script src='http://cdn.rawgit.com/menightfury/social-locker/master/script-ver2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  $('.socialLocker .to-lock').sociallocker({
    buttons: {order:["facebook-share","twitter-tweet","linkedin-share"]},
    twitter: {url:"http://twitter.com/romel_tea"},
    facebook: {appId:1234567890, url:"https://www.facebook.com/romelteamedia"},
    linkedin: {url:"https://linkedin/in/romeltea"},
    text: {
      header: "Share to Unlock This Content",
      message: "This content is locked. Tweet, Share, or Post to LinkedIn to unlock it."
    },
    locker: {close: false, timer: 0,},
    theme: "secrets"
  });
});
//]]>
</script>

Customization

• Buttons buttons: {}
• There are seven buttons available for content locking. These are,
• Facebook Like: "facebook-like"
• Facebook Share: "facebook-share"
• Google Plus One: "google-plus"
• Google Plus Share: "google-share"
• Twitter: "twitter-tweet"
• Twitter Follow:"twitter-follow"
• Linkedin Share: "linkedin-share"
• You can apply any number of buttons for your blog. You can even change the order of these buttons in the order:[] option.
• Separate each button with a comma (,).
•  Text text: {}

3. Save. Simpan template!

4. Saat menulis posting, klik mode HTML. Copas kode ini untuk menampilkan Tombol 'Share to Unlock'

<article class="socialLocker">
 <div class="to-lock" style="display:none;">
  -- Your Content / Link Download --
 </div>
</article>

DEMO

-- Your Content / Link Download --

CARA LAIN
Ini penampakannya.

Cara memasangnya:

1. Tema > Edit HTML.
2. Simpan kode berikut ini di atas kode </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'type='text/javascript'/>

Catatan: Jika kode di atas sudah ada, langsung saja ke tahap berikut ini.

3. Simpan kode berikut diatas kode </body>

<script type='text/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({
status : true,
xfbml : true
});
FB.Event.subscribe('edge.create', function(href, widget) {
$.event.trigger({
type: "pageShared",
url: href
});
});
};
/* Twitter */
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('tweet', function (event) {
$.event.trigger({
type: "pageShared",
url: event.target.baseURI
});
});
});
/* Google Plus */
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
function plusOned(obj){
console.log(obj);
$.event.trigger({
type: "pageShared",
url: obj.href
});
}
/* Listen for the pageShared event */
$(document).on('pageShared',function(e){
if(e.url == window.location.href){
$(".secret").show();
$(".secret-share").hide();
}
});
//]]>
</script>
<style>
.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;
background: #7b7b7b;
padding: 10px 20px;
display: inline-block;
border: 1px solid #000000;
text-decoration: none;
color: #fff;
}
.secret-share .fb-like {
margin-top: 0;
top: -7px;
position: relative;}
.secret-share .twitter-share-button {
margin-right: 25px;
}
</style>

4. Simpan template!

5. Saat posting, klik mode HTML. Copy paste script berikut.

<div class="secret">
<a class="download-btn" href="#">Download</a>
</div>
<div class="secret-share">
<p>Share via Facebook / Twitter / Google Plus to see Link Download</p>
<span class="fb-like" data-layout="button_count" data-send="false" data-show-faces="false" data-width="90" expr:data-href="data:post.url" style="margin-right: 25px;"></span><a class="twitter-share-button" data-count="horizontal" data-related="" data-via="mybloggerlab" expr:data-text="data:post.title" expr:data-url="data:post.url" href="http://twitter.com/share">Tweet</a><span class="g-plusone" data-callback="plusOned" data-count="true" data-size="medium" expr:data-href="data:post.url"></span></div>

Catatan: kode warna merah adalah konten premium. Contoh di atas jika konten premiumnya berupa link download. Anda bisa mengubahnya jika kontennya selain link download.

6. Publikasikan!

Share to Unlock untuk Blog WordPress

Untuk blog selfhosted CMS WordPress tinggal pasang dan aktifkan Plugin Content Locker.

Itu dia Cara Membuat Tombol 'Share to Unlock' Konten Premium Blogger. Tapi ingat, ada Social Lock Picker juga lho! Wasalam. (www.romelteamedia.com).*


Sumber
https://bloganalyzer.blogspot.com/2015/06/social-content-locker-for-blogger.html
https://geeksflame.com/create-social-content-locker-in-blogger-blogs/
https://www.wonderkrish.com/2018/10/create-social-content-locker-in-blogger.html
https://www.mybloggerlab.com/2016/08/how-to-add-share-to-unlock-download-link-in-blogger.html