Készítsen saját Tweet / Like / + 1-et a rendszer feloldásához a jQuery segítségével

Hirdetés

A vírusos betegség járványt jelentett, ám ez minden olyan tartalom alkotójának vágya. te tudott támaszkodhat kizárólag a tartalmának minőségére - ha ez elég jó, akkor az emberek meg fogják osztani, igaz? Talán. De kicsit segítsen a dolgokon is, ha valami extra értéket kínál azoknak, akik megosztják egymást - egy kupont, letöltést, egy mosolygó arcmatricát az e-mailben vagy egy aranyos cica készletképét. Ma megmutatom neked, hogyan hozhat létre saját mint a / tweet / + 1 a rendszer feloldásához egy kis jQuery-vel és a natív API-kkal.

Ez a módszer azoknak szól, akik saját weboldalakkal rendelkeznek, és szeretnék ottani feloldási mechanizmust. Ha ezt a Facebook oldalán szeretné megtenni, akkor az az alapvető A Facebook rajongói kapu bemutatója Szeretne kinyit: Hogyan építsünk fel egy alapvető Facebook rajongói kaput, anélkül hogy fizetnénk a tárhelyetA Facebook által üzemeltetett márkaoldal hihetetlenül hatékony felhasználása az, hogy ösztönözze az embereket az oldal tetszettségére néhány titkos tartalom létrehozásával; általában "ventilátorkapu" -nak nevezik. A Facebook partner ...

Olvass tovább hasznosabb lehet.

Hogyan működik

Töltsünk be egy sor gombokat a különféle hálózatokból, és csatoljuk az adott eseményekhez vagy visszahívásokhoz, hogy jelezzük, mikor valamit megosztottak. A visszahív egy olyan funkció, amely akkor fut, ha valami más befejeződött, általában átadva paraméterként egy másik függvényhez. Például a jQuery AJAX használatakor a sikeres visszahívás akkor fut, ha az AJAX lekérdezés sikeres volt - a visszaadott adatokkal csinál valamit, például nyugtázza az űrlapadatokat. Mi is használjuk események - amelyek egy kicsit összetettebbek, de ezen útmutató keretein kívül esnek. Ezután beindítjuk a saját eseményünket, amely tartalmazza a kódot az oldal egy vagy több titkos részének felfedésére. Célunknak elegendő egy kis tartalom elrejtése és feltárása, de beállíthatjuk egy kicsit biztonságosabbá, hogy az AJAX-en keresztül töltődik be.

követelmények:

• A jQuery-t már be kell illeszteni, és be kell tölteni az oldal fejlécébe. Ma ezt nem fogom fedezni.
• Tudnia kell, hogyan lehet a Javascriptet beilleszteni az oldalra, akár inline szkriptcímkékkel, akár egy külön .JS fájlba, amely a fejlécbe van kapcsolva.

Alapvető megosztás gombok

Kezdjük azzal, hogy betöltünk egy alapvető megosztási gombkészletet az oldalra. Ennek két részből áll, először is, hogy betöltse a gombok JS-jét (ezek aszinkron verzióját használjuk az oldalbetöltés megakadályozásának elkerülése érdekében). Íme mind a három hálózat kódjai - ezeket nem kell kis részletekre bontani, mindegyik egyetlen JS fájlban összeilleszthető.

/* Facebook */ (függvény (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); } (dokumentum, 'szkript', 'facebook-jssdk')); window.fbAsyncInit = function () {// az FB JS SDK FB.init kezdeményezése ({állapot: true, xfbml: true}); }; / * Twitter * / window.twttr = (függvény (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; if (d.getElementById (id)) visszatér; js = d.createElement (s); js.id id =; js.src =” https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); visszatérési ablak.twttr || (t = {_e: [], készen áll: (f) függvény {t._e.push (f)}}); } (dokumentum, "szkript", "twitter-wjs")); /* Google Plusz */ (function () {var po = document.createElement ('script'); po.type = 'text / javascript'; po.async = igaz; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('script') [0]; s.parentNode.insertBefore (po, s); })();

Ezután helyezze el ezeket arra a helyre, ahol tetszik a gombok:

Ne felejtse el megváltoztatni az adatátviteli attribútumot a saját Twitter-felhasználó számára. Ezenkívül vegye figyelembe a visszahívási paraméter jelenlétét a plusOne gombbal - ehhez nincs esemény, amelyhez csatolni kell, csak egy visszahívás, amikor a gombra kattintanak.

Végül hozzon létre egy új CSS osztálydefiníciót a „.rejtettÉs állítsa be a kijelző: nincs ingatlan érte. Itt kell bármit elrejteni, amíg meg nem osztja.

Ellenőrizze, hogy ezen a helyen a gombok betöltődnek-e.

Csatolás események megosztására

Itt van az igazi varázslat. Kezdjük a Facebook-lal. Azután FB.init funkció, használat FB.Event.subscribe alábbiak szerint:

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

Itt kérjük, hallgassa meg a edge.create esemény (akkor kerül felhasználásra, amikor a felhasználónak tetszik az oldal). Ezután beindítjuk a saját jQuery eseményünket, amelyet hívtam pageShared, és a href értéket adja át megosztott URL-ként. Ezt később ellenőrizni fogjuk. A teljes Facebook gombkódnak így néz ki:

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

Ezután a Twitter. twttr.events.bind itt használatos (csatolhat egy követő eseményhez is, ha úgy tetszik), de fontos megjegyezni, hogy ezeket mind be kell csomagolni a twttr.ready visszahív. Megint ugyanazt a jQuery pageShared eseményt indítjuk el, és a helyes változót adja át, hogy képviselje a megosztott URL-t.

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

Végül a Google Plus. Ne feledje, hogy korábban kifejtettem, hogy a plusOne-nak nincsenek eseményei, ezért a visszahívási funkciót határoztuk meg. Hozzuk létre most ezt a funkciót, és indítsuk onnan az oldalmegosztott eseményt.

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

Mutasd meg nekem a pénzt

Végül csatolnunk kell az egyedi oldalmegosztott eseményhez az alábbiak szerint:

/ * Hallgassa meg az oldaltMegosztott esemény * / $ (document) .on ('pageShared', (e) függvény {if (e.url == window.location.href) {$ (". secret"). show (); } });

Nagyon egyszerűen, ha a beadott URL megegyezik az aktuális oldallal, megmutatjuk a titkos tartalmat a felhasználónak. Az általam készített példában egy cica. Szerencsések vagytok!

Lusta vagyok. Letölthető a teljes bemutató?

Ha le szeretné tölteni a bemutató fájl teljes bemutatófájlját - igen, ahogy kitalálta -, ossza meg csak az oldalt az oldalán található gombokkal, és a letöltési link varázslatosan felfedi az Ön számára.

Probléma van a kóddal? Hadd tudjam meg a hozzászólásokban, de egy liberális dolog console.log segít megérteni, hogy milyen tárgyakat adnak vissza nektek, és az azokat tartalmazó titkokat; és feltétlenül használja az itt megadott pontos gombkódokat, mivel néhány formátum (például az iFrame) nem működik ezekkel az eseményekkel.

Töltse le a test.html fájlt és próbálkozzon a saját szerverén