Buat Tweet Anda Sendiri / Suka / + 1 Untuk Membuka Kunci Sistem dengan jQuery

Iklan

Menjadi viral dulunya berarti epidemi penyakit, tetapi sekarang merupakan sesuatu yang diinginkan semua pembuat konten. Kamu bisa andalkan kualitas konten Anda sendiri - jika cukup baik, orang akan membagikannya, bukan? Mungkin. Tapi Anda juga bisa sedikit membantu dengan menawarkan sesuatu yang bernilai lebih bagi mereka yang berbagi - kupon, unduhan, stiker wajah tersenyum di pos, atau gambar stok anak kucing lucu. Hari ini saya akan menunjukkan kepada Anda cara membuatnya sendiri suka / tweet / + 1 untuk membuka kunci sistem dengan sedikit jQuery dan API asli.

Metode ini untuk orang-orang yang memiliki situs web sendiri dan ingin mekanisme buka kunci di sana. Jika Anda ingin melakukan ini di halaman Facebook Anda, dasarnya Tutorial fan gate Facebook Like To Unlock: Cara Membangun Fan Fan Dasar Facebook Tanpa Membayar Untuk HostingSalah satu penggunaan yang sangat efektif dari halaman merek yang di-host Facebook adalah untuk memberikan insentif kepada orang-orang agar menyukai halaman tersebut dengan membuat beberapa konten khusus anggota rahasia; biasa disebut sebagai "gerbang penggemar". Facebook juga bermitra ...

Baca lebih banyak semoga lebih bermanfaat.

Bagaimana itu bekerja

Kami akan memuat serangkaian tombol dari berbagai jaringan dan melampirkan ke acara masing-masing atau panggilan balik untuk menunjukkan kapan sesuatu dibagikan. SEBUAH panggilan balik adalah fungsi yang berjalan ketika sesuatu telah selesai, biasanya diteruskan sebagai parameter ke fungsi lain. Ketika menggunakan jQuery AJAX misalnya, panggilan balik sukses dijalankan ketika kueri AJAX berhasil - ia melakukan sesuatu dengan data yang dikembalikan, seperti mengakui penerimaan data formulir. Kami juga akan menggunakan acara - yang sedikit lebih kompleks, tetapi di luar cakupan tutorial ini. Kami kemudian akan memicu acara kami sendiri, yang berisi kode untuk mengungkapkan satu atau lebih bagian rahasia halaman. Untuk tujuan kami, hanya menyembunyikan sedikit konten dan mengungkapkannya sudah cukup, tetapi Anda dapat menyesuaikan ini agar sedikit lebih aman yang dimuat melalui AJAX atau serupa.

Persyaratan:

• jQuery harus sudah disertakan dan memuat di tajuk halaman Anda. Saya tidak akan membahasnya hari ini.
• Anda harus tahu cara memasukkan Javascript pada halaman, apakah itu melalui tag skrip inline atau dalam file .JS terpisah yang ditautkan di header.

Tombol Berbagi Dasar

Mari kita mulai dengan memuat satu set tombol berbagi dasar di halaman. Ada dua bagian untuk ini, pertama untuk memuat JS untuk tombol (kami menggunakan versi asinkron ini untuk menghindari pemblokiran memuat halaman). Ini dia kode dari ketiga jaringan - Anda tidak perlu memisahkan ini menjadi potongan-potongan kecil, mereka semua bisa pergi bersama dalam satu file JS.

/ * 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); } (dokumen, 'skrip', 'facebook-jssdk')); window.fbAsyncInit = function () {// init FB JS SDK FB.init ({status: true, xfbml: true}); }; / * Twitter * / window.twttr = (fungsi (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; jika (d.getElementById (id)) kembali; 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)}}); } (dokumen, "skrip", "twitter-wjs")); / * Google Plus * / (function () {var po = document.createElement ('script'); po.type = 'teks / javascript'; po.async = true; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

Selanjutnya, letakkan ini di tempat yang Anda inginkan tombolnya muncul:

Ingatlah untuk mengubah atribut data-via ke pengguna Twitter Anda sendiri. Juga, perhatikan keberadaan parameter panggilan balik pada tombol plusOne - tidak ada acara untuk dilampirkan di sini, hanya panggilan balik ketika tombol diklik.

Akhirnya, buat definisi kelas CSS baru untuk “.tersembunyi", Dan atur display: tidak ada properti untuk itu. Apa pun yang ingin Anda sembunyikan sampai dibagikan harus masuk ke sini.

Pastikan tombol Anda memuat pada saat ini.

Melampirkan Untuk Berbagi Acara

Ini sihir yang sebenarnya. Mari kita mulai dengan Facebook. Setelah FB fungsi, gunakan Berlangganan FB.Event.s sebagai berikut:

 FB.Event.subscribe ('edge.create', function (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); });

Di sini kami meminta untuk mendengarkan edge.create acara (dipecat ketika pengguna menyukai halaman). Kami kemudian memicu acara jQuery kami sendiri yang saya panggil pageShared, dan meneruskan nilai href sebagai URL yang dibagikan. Kami akan memeriksanya nanti. Kode tombol Facebook lengkap Anda sekarang akan terlihat seperti:

 window.fbAsyncInit = function () {// init FB JS SDK FB.init ({status: true, xfbml: true}); FB.Event.subscribe ('edge.create', function (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); }); };

Selanjutnya, Twitter. twttr.events.bind digunakan di sini (Anda dapat melampirkan ke mengikuti acara juga jika Anda suka), tetapi yang penting untuk diingat adalah bahwa semua ini harus dibungkus dengan twttr. Sudah panggilan balik. Sekali lagi, kami memicu acara jQuery pageShared yang sama, dengan memasukkan variabel yang benar untuk mewakili URL yang dibagikan.

 twttr.ready (function (twttr) {twttr.events.bind ('tweet', function (event) {$ .event.trigger ({type: "pageShared", url: event.target.baseURI}); }); });

Akhirnya, Google Plus. Ingat sebelumnya saya menjelaskan bahwa tidak ada acara untuk plusOne, jadi alih-alih kami telah menetapkan fungsi panggilan balik. Sekarang mari kita membuat fungsi itu dan memicu event pageShared dari sana.

 fungsi plusOned (obj) {$ .event.trigger ({type: "pageShared", url: obj.href}); }

Tunjukkan Saya Uang

Akhirnya, kita harus melampirkan ke acara kustom Berbagi halaman kami sebagai berikut:

/ * Dengarkan acara pageShared * / $ (dokumen) .on ('pageShared', fungsi (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Sangat sederhana, jika URL yang diteruskan adalah sama dengan halaman saat ini, kami menampilkan konten rahasia kepada pengguna. Dalam contoh yang saya buat, anak kucing. Anda orang yang beruntung!

Aku malas. Dapatkah saya mengunduh Demo Lengkap Anda?

Untuk mengunduh file demo lengkap untuk tutorial ini - ya, Anda dapat menebaknya - cukup bagikan halaman menggunakan tombol di samping sana dan tautan unduhan akan secara ajaib diungkapkan kepada Anda.

Ada masalah dengan kode? Beritahu saya di komentar, tapi sedikit liberal console.log akan membantu Anda memahami objek apa yang sedang dikirimkan kepada Anda dan rahasia yang dikandungnya; dan pastikan untuk menggunakan kode tombol persis yang disediakan di sini, karena beberapa format (seperti iFrame) tidak berfungsi dengan acara ini.

Unduh test.html dan coba di server Anda sendiri