Cara Membuat Tombol Button Share Untuk Menampilkan Link Download

Cara Membuat Tombol Button Share To Download

Kembali lagi bersama saya admin BlogDroid9, kali ini saya akan memberikan sebuah trik bagaimana Cara Membuat Tombol Button Share Untuk Menampilkan Link Download. trik yang satu ini bisa juga berguna meningkatkan kepopuleran blog kalian. pasti setelah pembaca share artikel kalian, akan berdatangan lagi teman si pembaca tadi untuk membuka blog kalian tapi "Jika Content Menarik".

Trik ini bukanlah trik baru sob, melainkan sudah trik lama tetapi saya share untuk blog ini (Blog Utama Admin). trik ini sangat wajar ditemukan diartikel blog yang memiliki link download berharga atau bisa dibilang PREMIUM. pasti si admin blog tersebut juga ingin mendapatkan keuntungan dengan cara menukar link download nya dengan hasil share ke sosial media si pembaca.

Trik seperti ini juga berguna memperkuat posisi blog kalian di SERP. karena share ke jejaring sosial juga termasuk optimasi SEO. jika kalian ingin menerapkan juga ke blog kalian silahkan simak artikel ini sampai tuntas agar tidak timbul pertanya-pertanyaan konyol yang sebenarnya sudah dijelaskan diartikel ini.

Pemasangan Kode/Script 

Langkah Awal : Pasang Framework jQuery

untuk memunculkan dan menyembunyikan objek diperlukan sebuah jQuery. Oleh karena itu, silahkan pasang kode berikut ini diatas </head>

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

Pemasangan jQuery pada template cukup 1x saja. jika pada template yang kalian gunakan sudah tersedia jQuery maka abaikan langkah diatas!

Langkah Kedua : Pasang Kode CSS Berikut ini Diatas ]]></b:skin> atau </style>

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

Langkah Ketiga : Pasang Script Penampil Button Dibawah ini, 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 pada template kalian sudah terdapat kode yang mirip-mirip seperti diatas, silahkan hapus dan ganti dengan kode di atas. Jangan lupa untuk membackup dulu template kalian sebelum melakukan tutorial ini.

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 Compose) :

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

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

Selesai .. :)

Bagaimana mudah kan sob? gak perlu waktu lama-lama untuk menerapkan trik seperti ini. selamat link download kalian akan lebih aman dan blog kalian semakin ramai pengunjung.

Sekian dulu artikel dari Cara Membuat Tombol Button Share Untuk Menampilkan Link Download, jika bermanfaat klik iklan yang ada diblog ini sebagai penyemangat agar blog ini tetap terus update.
Terima Kasih Atas Kunjungan & Perhatiannya.
Sumber : http://blog.kangismet.net/2014/01/share-to-unlock-download-button.html