Kendi Tweet / Like / + 1 Yapın jQuery ile Sistemin Kilidini Açmak için

Viral hale gelmek, bir hastalık salgını anlamına geliyordu, ama şimdi tüm içerik yaratıcılarının can attığı bir şey. Sen could Yalnızca içeriğinizin kalitesine güvenin - eğer yeterince iyiyse, insanlar paylaşacaktır, doğru? Olabilir. Ama aynı zamanda, paylaşanlara değer katan bir şey sunarak da bir şeyler boyunca yardım edebilirsiniz - bir kupon, bir indirme, postadaki bir gülen yüz çıkartması veya sevimli bir kedi yavrusu stok görüntüsü. Bugün size nasıl kendinizinkini yaratacağınızı göstereceğim sistemi açmak için / tweet / + 1 beğen küçük bir jQuery ve yerel API'ler ile.

Bu yöntem, kendi web sitelerine sahip ve orada kilidini açma mekanizması isteyen kişiler içindir. Bunu Facebook sayfanızda yapmak istiyorsanız, temel Facebook fan kapısı öğreticisinin Kilidini Açmak Gibi: Nasıl Hosting Yapmadan Ödemeden Temel Bir Facebook Fan Kapısı Oluşturma Kilidini Açmak gibi Gibi: Ödeme Yapmadan Bir Temel Facebook Fan Kapısı İnşa Etmek Barındırma Facebook tarafından barındırılan bir marka sayfasının inanılmaz etkili bir kullanımı, bazı gizli üyelere özel içerik oluşturarak insanları sayfayı beğenmeye teşvik etmek; genel olarak "fan kapısı" olarak anılır. Facebook da ortak oldu… daha yararlı olabilir.

Nasıl çalışır

Çeşitli ağlardan bir dizi düğme yükleyeceğiz ve ne zaman paylaşıldığını belirtmek için kendi olaylarına veya geri aramalarına ekleyeceğiz. bir geri aramak başka bir şey bittiğinde çalışan, genellikle başka bir işleve parametre olarak geçen bir işlevdir. Örneğin, jQuery AJAX kullanılırken, AJAX sorgusu başarılı olduğunda başarılı bir geri çağırma çalıştırılır - form verilerinin alındığını bildirmek gibi, döndürülen verilerle bir şey yapar. Biz de kullanacağız olaylar - biraz daha karmaşık, ancak bu eğitimin kapsamı dışında. Ardından, sayfanın bir veya daha fazla gizli bölümünü ortaya çıkarmak için gereken kodu içeren kendi etkinliğimizi tetikleyeceğiz. Amacımız için, sadece biraz içerik gizlemek ve içeriğini göstermek yeterli olmalı, ancak bunu AJAX veya benzeri bir şekilde yükleyen biraz daha güvenli olacak şekilde ayarlayabilirsiniz..

Gereksinimler:

• jQuery zaten sayfanızın başlığına dahil edilmeli ve yüklenmelidir. Bugün bunu örtmeyeceğim.
• Javascript'i sayfaya nasıl dahil edeceğinizi, satır içi komut dosyası etiketleri yoluyla veya başlığa bağlı ayrı bir .JS dosyasında olup olmadığını bilmelisiniz..

Temel Paylaş Düğmeleri

Sayfadaki temel paylaşım düğmelerini yükleyerek başlayalım. Bunun için iki düğme var, öncelikle düğmelere JS'yi yüklemek için (sayfa yüklenmesini engellememek için bunların asenkron sürümünü kullanıyoruz). İşte üç ağın kodları - bunları küçük snippet'lere ayırmanız gerekmez, hepsi bir JS dosyasında bir araya getirilebilir.

 / * Facebook * / (fonksiyon (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 () // FB JS SDK’yı başlat FB.init (status: true, xfbml: true); ; / * Twitter * / window.twttr = (işlev (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: [], hazır: function (f) t._e.push (f)); (belge, "script", "twitter-wjs")); / * 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);) ();

Ardından, düğmeleri görünmesini istediğiniz yerlere yerleştirin:

Data-via özelliğini kendi Twitter kullanıcınız olarak değiştirmeyi unutmayın. Ayrıca, plusOne düğmesindeki bir geri çağırma parametresinin varlığına dikkat edin - buraya eklenecek bir olay yok, yalnızca düğme tıklatıldığında bir geri çağırma.

Son olarak, için yeni bir CSS sınıfı tanımı oluşturun. “.gizli“, ve görüntü yok bunun için mülkiyet. Paylaşılana kadar saklamak istediğin her şey buraya girmeli.

Düğmelerinizin bu noktada yüklendiğinden emin olun.

Olayları Paylaşmak için Eklemek

İşte gerçek sihir. Facebook ile başlayalım. Sonra FB.init işlev, kullanım FB.Event.subscribe aşağıdaki gibi:

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

İşte biz dinlemek istiyoruz edge.create olayı (bir kullanıcı sayfayı beğendiğinde tetiklenir). Daha sonra aradığım kendi jQuery etkinliğimizi tetikliyoruz. pageShared, ve href değerinin paylaşılan URL olarak aktarılması. Bunu daha sonra kontrol edeceğiz. Facebook düğme kodunuzun tamamı şimdi şöyle görünmelidir:

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

Sıradaki, Twitter. twttr.events.bind Burada kullanılır (isterseniz isterseniz bir takip olayına da ekleyebilirsiniz), ancak hatırlanması gereken önemli şey, bunların hepsinin twttr.ready geri aramak. Yine, aynı jQuery pageShared olayını tetikliyoruz, paylaşılan URL’yi temsil etmek için doğru değişkeni iletiyoruz.

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

Sonunda, Google Plus. Daha önce hatırlayın, plusOne için hiçbir etkinlik olmadığını açıkladım, bunun yerine bir geri çağırma işlevi belirledik. Şimdi bu işlevi yaratalım ve pageShared olayını buradan tetikleyelim..

 plusOned (obj) işlevi $ .event.trigger (type: "pageShared", url: obj.href); 

Bana parayı göster

Son olarak, özel pageShared etkinliğimize aşağıdaki gibi eklememiz gerekir:

 / * PageShared olayını dinleyin * / $ (document) .on ('pageShared', function (e) if (e.url == window.location.href) $ (". Secret"). Show () ;);

Çok basit, eğer girilen URL mevcut sayfa ile aynıysa, gizli içeriği kullanıcıya gösteririz. Yaptığım örnekte bir yavru kedi. Sen şanslı insanlar!

Tembelim. Komple Demonuzu indirebilir miyim?

Bu eğitimin tam demo dosyasını indirmek için - evet, tahmin etmiştin - sayfayı orada bulunan düğmeleri kullanarak paylaş ve indirme bağlantısı sana sihirli bir şekilde gösterilsin.

Kodla ilgili sorun mu var? Yorumlarda bana bildirin, ancak liberal bir dollop console.log size hangi nesnelerin size geri alındığını ve içerdikleri sırları anlamanıza yardımcı olacaktır; ve bazı formatlar (iFrame gibi) bu olaylarla çalışmadığından, burada verilen tam düğme kodlarını kullandığınızdan emin olun..

Test.html dosyasını indirin ve kendi sunucunuzda deneyin