Share to Unlock The Download Button

Oleh Bardil

17 Juli, 2014

Bagikan :

Tweet

Pemasangan Kode / Script

Langkah 1 : Pasang Framework jQuery

Untuk memunculkan dan menyembunyikan objek, diperlukan sentuhan jQuery. Oleh karena itu silahkan pasang kode ini di atas </head>

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

Pemasangan jQuery pada template cukup 1 saja. Apabila ada beberapa versi framework jQuery, maka efek-efek tidak akan berjalan.

Langkah 2 : Pasang Kode CSS di atas ]]></b:skin> atau </style>

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

Langkah 3 : Pasang Script Penampil Button di atas </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>

Apabila pada template sobat sudah ada kode yang mirip-mirip seperti itu, silahkan hapus dan ganti dengan kode di atas. Jangan lupa untuk membackup dulu template.

Penulisan pada Postingan

Untuk memunculkan tombol Like, Tweet atau Google Plus dan juga objek (link download) maka format penulisan pada postingan seperti ini (tulis pada mode HTML bukan Comopose) :

<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>

Semoga bermanfaat bagi sobat yang ingin memunculkan link download setelah share.

Tag : Belajar menjadi bloger keren