Учините свој властити Твеет / Лике / + 1 за откључавање система помоћу јКуери

Реклама

Прелазак вируса некада је значио епидемију болести, али сада то нешто жуде сви креатори садржаја. ти могао ослоните се само на квалитет вашег садржаја - ако је он довољно добар, људи ће га делити, зар не? Можда. Али можете мало да помогнете и тиме што ћете онима који је деле - понудити нешто посебно драгоцено - купон, преузимање, налепницу са смајлићем лица у пошти или слику залиха слатког мачића. Данас ћу вам показати како да направите своју попут / твеет / + 1 за откључавање система са мало јКуери-а и изворних АПИ-ја.

Ова метода је намењена особама које имају сопствене веб странице и желеле би да се тамо отвори механизам за откључавање. Ако то желите да учините на својој Фацебоок страници, основни Туториал Фацебоок фан гате Желите да откључате: Како да изградите основну Фацебоок капију за вентилаторе без плаћања хостингаЈедна невероватно ефикасна употреба странице робне марке са домаћинима на Фацебооку јесте да се подстакну људи да им се свиде страница стварањем неких тајних садржаја само за чланове; која се обично назива "вентилациона капија". Фацебоок је такође склопио партнерство ...

Опширније може бити корисније.

Како то ради

Учитаваћемо скуп дугмића из различитих мрежа и вежемо се за њихове догађаје или повратне позиве како бисмо показали када се нешто дели. А позове је функција која се покреће када је нешто друго завршено, а обично се преноси као параметар другој функцији. На пример, када користите јКуери АЈАКС, успешни повратни позив се покреће када је АЈАКС упит успешан - он чини нешто са враћеним подацима, попут потврђивања примања података обрасца. Такође ћемо користити догађаји - који су мало сложенији, али ван оквира овог водича. Тада ћемо покренути властити догађај, који садржи код за откривање једног или више тајних делова странице. У наше сврхе, довољно је сакрити само мало садржаја и открити га, али то можете подесити да будете мало сигурнији који се учитава преко АЈАКС-а или сличног.

Услови:

• јКуери би већ требало да буде укључен и учитава се у заглављу ваше странице. Нећу то данас да покријем.
• Требали бисте знати како укључити Јавасцрипт на страницу, било да се ради о интегрираним ознакама скрипте или у засебној .ЈС датотеци повезаној у заглављу.

Основни тастери за дељење

Кренимо од учитавања основног сета дугмади за дељење на страници. Постоје два дела за ово, прво да бисте учитали ЈС за тастере (користимо асинхрону верзију ових да не би блокирали учитавање странице). Ево га кодови из све три мреже - не морате их раздвајати у мале исјечке, сви они могу ићи заједно у једну ЈС датотеку.

/* Фејсбук */ (функција (д, с, ид) {вар јс, фјс = д.гетЕлементсБиТагНаме (с) [0]; иф (д.гетЕлементБиИд (ид)) {ретурн;} јс = д.цреатеЕлемент (с); јс.ид = ид; јс.срц = "//цоннецт.фацебоок.нет/ен_УС/алл.јс"; фјс.парентНоде.инсертБефоре (јс, фјс); } (документ, 'скрипта', 'фацебоок-јссдк')); виндов.фбАсинцИнит = фунцтион () {// инит ФБ ЈС СДК ФБ.инит ({статус: труе, кфбмл: труе}); }; / * Твиттер * / виндов.твттр = (функција (д, с, ид) {вар т, јс, фјс = д.гетЕлементсБиТагНаме (с) [0]; ако се (д.гетЕлементБиИд (ид)) враћа; јс = д.цреатеЕлемент (с); јс.ид = ид; јс.срц = " https://platform.twitter.com/widgets.js"; фјс.парентНоде.инсертБефоре (јс, фјс); ретурн виндов.твттр || (т = {_е: [], спремно: функција (ф) {т._е.пусх (ф)}}); } (документ, "скрипта", "твиттер-вјс")); /* Гоогле Плус */ (функција () {вар по = доцумент.цреатеЕлемент ('скрипта'); по.типе = 'тект / јавасцрипт'; по.асинц = тачно; по.срц = ' https://apis.google.com/js/plusone.js'; вар с = доцумент.гетЕлементсБиТагНаме ('скрипта') [0]; с.парентНоде.инсертБефоре (по, с); })();

Затим их ставите на место где желите да се појављују тастери:

Не заборавите да промените атрибут дата-виа за сопственог корисника Твиттера. Такође имајте на уму присутност параметра повратног позива на тастеру плусОне - овде се не може приложити никакав догађај, већ само повратни позив када се кликне на дугме.

На крају, креирајте нову дефиницију класе ЦСС за „.сакривен“, И поставите дисплеј: ниједан имовина за то. Све што желите да сакријете док не делите требало би да уђе овде.

Проверите да ли се у овом тренутку тастери пуне.

Прилог за дељење догађаја

Ево праве магије. Почнимо с Фацебоок-ом. После ФБ.инит функција, употреба ФБ.Евент.сплати претплату као што следи:

 ФБ.Евент.субсцрибе ('едге.цреате', функција (хреф, додатак) {$ .евент.триггер ({врста: "пагеСхаред", урл: хреф}); });

Овде тражимо да слушамо едге.цреате догађај (покреће се када корисник воли страницу). Тада покрећемо властити јКуери догађај који сам позвао пагеДељено, и преношење вредности хреф као УРЛ који се дели. То ћемо проверити касније. Ваш комплетан код дугмета на Фацебооку сада треба да изгледа као:

 виндов.фбАсинцИнит = фунцтион () {// инит ФБ ЈС СДК ФБ.инит ({статус: труе, кфбмл: труе}); ФБ.Евент.субсцрибе ('едге.цреате', функција (хреф, додатак) {$ .евент.триггер ({врста: "пагеСхаред", урл: хреф}); }); };

Следеће, Твиттер. твттр.евентс.бинд Овде се користи (можете да се придружите пратећем догађају ако желите), али важно је запамтити да све ово треба да буде умотано у твттр.реади позове. Поново покрећемо исти догађај јКуери пагеСхаред, улазећи у исправну променљиву да представља УРЛ који се дели.

 твттр.реади (функција (твттр) {твттр.евентс.бинд ('твеет', функција (догађај) {$ .евент.триггер ({врста: "пагеСхаред", урл: евент.таргет.басеУРИ}); }); });

Најзад, Гоогле Плус. Запамтите раније објаснио сам да нема догађаја за плусОне, па смо уместо тога одредили функцију повратног позива. Креирајмо ту функцију и одатле покренимо догађај у заједничкој страници.

 функција плусОнед (обј) {$ .евент.триггер ({врста: "пагеСхаред", урл: обј.хреф}); }

Покажи ми новац

На крају, морамо да приложимо свој прилагођени догађај пагеСхаред на следећи начин:

/ * Слушајте страницуПодели догађај * / $ (доцумент) .он ('пагеСхаред', функција (е) {иф (е.урл == виндов.лоцатион.хреф) {$ (". сецрет"). схов (); } });

Врло једноставно, ако је пренесени УРЛ исти као тренутна страница, кориснику приказујемо тајни садржај. У примјеру који сам направио, маче. Срећни људи!

Ја сам лењ. Могу ли да преузмем ваш комплетан демо?

Да бисте преузели комплетну демо датотеку за овај туториал - да, погодили сте - само поделите страницу помоћу тастера са стране и веза за преузимање биће вам чаробно откривена.

Проблеми са кодом? Јавите ми у коментарима, али либерални пад цонсоле.лог помоћи ће вам да схватите који предмети се враћају вама и тајне које садрже; и будите сигурни да користите тачне кодове тастера који су овде наведени, јер неки формати (попут иФраме-а) не делују са овим догађајима.

Преузми тест.хтмл и испробајте на свом серверу