Share to Unlock Download Button

Share to Unlock Download Button adalah link download yang akan muncul setelah pengunjung mengshare artikel yang telah di baca, entah itu di Facebook, Twitter, Google Plus, dll. Mungkin bagi sobat yang newbie dalam dunia blogger seperti admin ini masih harus banyak belajar untuk meningkatkan kualitas dan kuantitas di blog sobat. Tentunya supaya mendapatkan rupiah dan dollar seperti para master master blog dan websiters :p

Informasi tutorial ini admin dapat dari blogwalking di blognya Kang Ismet. Menurut kang ismet, link yang disembunyikan biasanya adalah link premium, dan sangat wajar sebuah link download ditukar dengan like, tweet atau recomend on Google+. Trik seperti ini sangat berguna untuk memperkuat posisi blog sobat di SERP, karena berbagi ke jejaring sosial merupakan salah satu Optimasi SEO. Bagi sobat yang pengen ngerti tentang SEO itu apa bisa baca disini.

Untuk tampilannya bisa di lihat seperti gambar di bawah ini :

Lihat Demo

Untuk melihat efeknya, silahkan klik tombol 'Demo' diatas kemudian scroll kebawah dan sobat bagikan di salah satu sosmed yang ada baik Facebook, Twitter atau Google Plus. Bagi sobat yang ingin menerapkan cara ini, silahkan sobat pahami baik-baik langkah - langkahnya :

Langkah - Langkah Share to Unlock Download Button

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

Oke sekian tutorial tentang Share to Unlock Download Button. Bagi sobat yang belum paham bisa tinggalkan komentar. Semoga bermanfaat dan semoga membantu :) Happy Blogwalking
Terimakasih telah berkunjung ke sharexid.blogspot.com

Sumber : blog.kangismet.net
                 www.makeuseof.com