Stwórz własny tweet / polub / + 1, aby odblokować system za pomocą jQuery

Reklama

Wirus oznaczał epidemię choroby, ale teraz jest to coś, czego pragną wszyscy twórcy treści. ty mógłby polegaj tylko na jakości twoich treści - jeśli jest wystarczająco dobra, ludzie będą ją udostępniać, prawda? Może. Ale możesz też trochę pomóc, oferując coś wartościowego tym, którzy się dzielą - kupon, plik do pobrania, naklejkę z uśmiechniętą buźką w poczcie lub obraz akcji słodkiego kotka. Dzisiaj pokażę ci, jak stworzyć własne jak / tweet / + 1, aby odblokować system z odrobiną jQuery i natywnymi interfejsami API.

Ta metoda jest przeznaczona dla osób, które mają własne strony internetowe i chcieliby mieć tam mechanizm odblokowujący. Jeśli chcesz to zrobić na swojej stronie na Facebooku, podstawowe Samouczek dla fanów na Facebooku Jak odblokować: Jak zbudować podstawową bramę fanów na Facebooku bez płacenia za hostingJednym z niewiarygodnie skutecznych sposobów korzystania ze strony marki hostowanej na Facebooku jest zachęcanie ludzi do polubienia strony poprzez tworzenie tajnych treści tylko dla członków; powszechnie określany jako „bramka wentylatora”. Facebook jest także partnerem ...

Czytaj więcej może być bardziej przydatny.

Jak to działa

Będziemy ładować zestaw przycisków z różnych sieci i dołączać do odpowiednich zdarzeń lub wywołań zwrotnych, aby wskazać, kiedy coś zostało udostępnione. ZA oddzwonić to funkcja, która działa, gdy coś innego się zakończy, zwykle przekazywana jako parametr do innej funkcji. Na przykład przy użyciu jQuery AJAX, wywołanie powodzenia jest uruchamiane, gdy zapytanie AJAX zakończyło się powodzeniem - robi to coś ze zwróconymi danymi, na przykład potwierdza otrzymanie danych formularza. Będziemy również używać wydarzenia - które są nieco bardziej złożone, ale są poza zakresem tego samouczka. Następnie uruchomimy własne wydarzenie, które zawiera kod ujawniający jedną lub więcej tajnych części strony. W naszym celu wystarczy ukryć trochę treści i ujawnić je, ale możesz dostosować to, aby było bardziej bezpieczne, że ładuje się za pośrednictwem AJAX lub podobnego.

Wymagania:

• jQuery powinien już być dołączony i ładowany w nagłówku strony. Nie zamierzam tego dzisiaj opisywać.
• Powinieneś wiedzieć, jak włączyć Javascript na stronie, czy to poprzez wbudowane tagi skryptowe, czy w osobnym pliku .JS połączonym w nagłówku.

Podstawowe przyciski udostępniania

Zacznijmy od załadowania podstawowego zestawu przycisków udostępniania na stronie. Składają się na to dwie części, po pierwsze w celu załadowania JS dla przycisków (używamy ich asynchronicznej wersji, aby uniknąć blokowania ładowania strony). Oto kody ze wszystkich trzech sieci - nie trzeba ich rozdzielać na małe fragmenty, wszystkie mogą łączyć się w jednym pliku 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); } (dokument, „skrypt”, „facebook-jssdk”)); window.fbAsyncInit = function () {// init FB JS SDK FB.init ({status: true, xfbml: true}); }; / * 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: [], gotowy: funkcja (f) {t._e.push (f)}}); } (dokument, „skrypt”, „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); })();

Następnie umieść je w miejscu, w którym chcesz wyświetlać przyciski:

Pamiętaj, aby zmienić atrybut danych przez własnego użytkownika Twittera. Zwróć również uwagę na obecność parametru wywołania zwrotnego na przycisku plusOne - nie ma tu żadnego zdarzenia do dołączenia, tylko wywołanie zwrotne po kliknięciu przycisku.

Na koniec utwórz nową definicję klasy CSS dla „.ukryty„I ustaw Nie wyświetla się właściwość do tego. Wszystko, co chcesz ukryć do momentu udostępnienia, powinno się tutaj znaleźć.

Upewnij się, że w tym momencie ładują się twoje przyciski.

Dołączanie w celu udostępniania wydarzeń

Oto prawdziwa magia. Zacznijmy od Facebooka. Po FB.init funkcja, użyj FB.Event.subscribe następująco:

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

Tutaj prosimy o posłuchanie edge.create zdarzenie (uruchamiane, gdy użytkownik lubi stronę). Następnie uruchamiamy własne zdarzenie jQuery, które wywołałem pageSharedi przekazanie wartości href jako udostępnionego adresu URL. Sprawdzimy to później. Twój pełny kod przycisku Facebook powinien teraz wyglądać następująco:

 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}); }); };

Następnie Twitter. twttr.events.bind jest używany tutaj (możesz również dołączyć do wydarzenia śledzącego, jeśli chcesz), ale ważne jest, aby pamiętać, że wszystkie muszą być zapakowane w twttr.ready oddzwonić. Ponownie uruchamiamy to samo zdarzenie jQuery pageShared, przekazując poprawną zmienną reprezentującą udostępniony adres URL.

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

Wreszcie Google Plus. Pamiętaj, wcześniej wyjaśniłem, że nie ma żadnych zdarzeń dla plusOne, dlatego zamiast tego wybraliśmy funkcję oddzwaniania. Utwórzmy teraz tę funkcję i stamtąd uruchom zdarzenie pageShared.

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

Pokaż mi pieniądze

Na koniec musimy dołączyć do naszego niestandardowego zdarzenia pageShared w następujący sposób:

/ * Nasłuchuj strony Udostępnione wydarzenie * / $ (dokument) .on ('pageShared', funkcja (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Bardzo prosto, jeśli przekazany adres URL jest taki sam jak bieżąca strona, pokazujemy użytkownikowi tajną treść. W podanym przeze mnie przykładzie kotek. Szczęściara!

Jestem leniwy. Czy mogę pobrać pełną wersję demonstracyjną?

Aby pobrać pełny plik demonstracyjny tego samouczka - tak, zgadłeś - po prostu udostępnij stronę za pomocą przycisków z boku, a link do pobrania zostanie magicznie ujawniony.

Problemy z kodem? Daj mi znać w komentarzach, ale liberalna kupa console.log pomoże ci zrozumieć, jakie przedmioty są przekazywane tobie i zawarte w nich tajemnice; i pamiętaj, aby użyć dokładnych kodów przycisków podanych tutaj, ponieważ niektóre formaty (takie jak iFrame) nie działają z tymi zdarzeniami.

Pobierz test.html i spróbuj na własnym serwerze