Cara Membuat Tombol Like Facebook Untuk Download di Blog

Berikut ini adalah tutorial tentang Cara Membuat Tombol Like Facebook Untuk Download di Blog. Jadi sobat tutorial berikut ini adalah cara membuat tombol like Facebook for download di Blog. Jadi dengan membuat widget ini maka pengunjung blog anda harus me-like dahulu Fanspage facebook anda untuk mendapatkan link downloadnya.

Keuntungannya adalah like fanspage facebook anda akan bertambah setiap ada orang yang ingin mendownload file di Website atau blog anda.  Kelemahanya adalah jika pengunjung sudah pernah Like fanpage kita, dia harus Unlike dahulu agar bisa mendownload file, kalau tidak di unlike pastinya tidak berhasil untuk mendownload.

Disini kami akan membaikan dua cara, silahkan sobat pilih ingin menggunakan cara yang pertama dengan menggunakan iframe atau cara yang kedua dengan menggunakan javascript. nah daripada panjang lebar berikut adalah caranya...

Cara Membuat Tombol Like to Download di Blog

1. Membuat fanspage facebook terlebih dahulu untuk kemudian kita persiapkan Linknya yang akan kita gunakan nanti.Atau lihat juga cara membuat fanspage facebook melayang terbaru diblog.
2. Langkah kedua adalah mempersiapkan Link download anda.
3. Langkah ketiga kita menuju ke Tools yang menyediakannya :
Caranya : letakan saja link pada form yang telah di sediakan dan ikuti sampai selesai kemudian Klik " Create Your Like Gate Now! "


4. Langkah berikutnya adalah memasukkan kode script tersebut pada tempat yang kita inginkan setelah muncul halaman berikut, dan anda bisa menguppdatenya sesuai dengan ukuran yang anda inginkan.

dan berikut ini adalah contoh tampilan sebelum dan sesudah pengunjung Like fanspage kita ;

dan setekah di Like maka akan muncul menu download seperti berikut ( warna biru) dan ketika di klik maka langsung muncul seperti pada gambar di bawah ini
 :

Ok bagaimana sobat mudah bukan? Ok jika sobat belum puas dengan yang pertama mungkin sobat dapat mencoba di bawah ini.

Share to Unlock The Download Button

Mungkin untuk yang satu ini sudah tidak asing lagi untuk sobat semuanya karena sudah banyak di bagikan dan banyak di pakai pula, dimana ini berfungsi jika tombol like atau tombol sosial lainya di tekan maka akan muncul link yang disembunyikan sebelumanya. Ok langsung saja berikut adalah cara membuatnya.

Pemasangan Kode Script dan CSS

Langkah 1 : Pasang Framework jQuery dengan cara meetakan kode dibawah ini di atas kode </head> ( jika sudah ada kode jQuery yang sama atau sejenis lewati saja langkah ini ).

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

Langkah 2 : letakan Kode CSS dibawah ini di atas ]]></b:skin> atau </style>

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

Langkah 3 : Selanjutnya lanjutkan dengan memasang Script Penampil Button di bawah ini atas 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>

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

Silahkan di edit tulisan dan lain-lain di atas sesuai dengan keinginan anda.

Ok sobat semoga tutorial Cara Membuat Tombol Like Facebook Untuk Download di Blog ini mudah anda mengerti dan semoga bermanfaat.