Tutorial Membuat Share To Unlock The Download Button

Saya sering berlangganan email di salah satu membership, disana saya dikirimkan link untuk mendownload gratis minisite. Setelah saya klik dan berkunjung ke blognya disana terdapat Share Button media sosial untuk membuka link downloadnya. Nah keren juga tuh jika diterapkan di blog saya.


Akhirnya ketemu caranya. Ingin tahu silahkan ikuti Tutorial Membuat Share To Unlock The Download Button berikut ini:

#Pertama

Beri sentuhan JQuery untuk memunculkan dan menyembunyikan objek.
Silahkan pasang kode dibawah ini, dan letakkan di atas </head>

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

#Kedua


Pasang Kode CSS berikut ini, di atas ]]></b:skin> atau </style>

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

#Ketiga

Pasang Script ini untuk menampilkan button, letakan scriptnya diatas </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>

Jika didalam template terdapat kode mirip seperti diatas, silahkan dihapus dan diganti dengan kode diatas. Sebelum menggantinya silahkan di back up terlebih dahulu template anda.


#Keempat

Format Penulisan pada postingan agar memunculkan tombol Like, Tweet atau Google Plus dan juga objek (link download). Format penulisannya harus seperti dibawah ini, tetapi anda menuliskannya dalam mode HTML bukan Compose.

<div class="secret">
Link yang disembunyikan disini</div>
</div>
<div class="secret-share">
Bagikan melalui Facebook / Twitter / Google Plus untuk melihat Link Download

<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="kangismetdotnet" 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>

Demikian tutorial cara membuat share to unlock the download button.... Silahkan di share yah...