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

Membuat Tombol Like Facebook for download

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.
Membuat Tombol Like Facebook for download

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

Membuat Tombol Like Facebook for download
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
 :
Membuat Tombol Like Facebook for download

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.

Like or Share to Unlock

Jangan lupa!
Backup dulu template sebelum melakukan tutorial dibawah ini..

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>
Apabila pada template sobat sudah ada kode yang mirip-mirip seperti itu, silahkan hapus dan ganti dengan kode di atas.

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.
4 Komentar untuk "Cara Membuat Tombol Like Facebook Untuk Download di Blog"

pertamax om, , bagus ini mas seocips, , ,kalau cara agar mau komentar tanpa login gmail atau fb gmna yah jdi semua pengunjung bisa berkomentar

Makasih info nya..perfect. ..

om...kok link downloadnya adanya diatas box tombol likenya ya...mohon bantuannya...trims

berkomentar tanpa login gmail itu tinggal di pengaturan blog saja, kalau adminnya ngijinin jika tidak maka tidak bisa.
Caranya:
setelanpos dan komentar Siapa yang dapat mengomentari?Semua Orang