Направете свой собствен Tweet / Like / + 1 за отключване на системата с jQuery

реклама

Преминаването към вируса означаваше епидемия от заболяване, но сега това е нещо, за което всички създатели на съдържание жадуват Ти бих могъл разчитайте само на качеството на вашето съдържание - ако е достатъчно добро, хората ще го споделят, нали? Може би. Но бихте могли да помогнете и на нещата, като предложите нещо изключително ценно за тези, които споделят - купон, изтегляне, стикер за усмихнато лице в пощата или стоково изображение на сладко коте. Днес ще ви покажа как да създадете свой собствен като / tweet / + 1 за отключване на системата с малко jQuery и собствените API.

Този метод е предназначен за хора, които имат свои собствени уебсайтове и биха искали механизма за отключване там. Ако искате да направите това на страницата си във Facebook, основното Урок за фен на Facebook Харесва ви да отключите: Как да изградите основен вентилатор на Facebook, без да плащате за хостингЕдно невероятно ефективно използване на уебсайта на марката, хоствано във Facebook, е да се стимулират хората да харесват страницата, като създават някакво секретно съдържание само за членове; обикновено наричан "вентилаторна врата". Facebook също си партнира ...

Прочетете още може да е по-полезно.

Как работи

Ще зареждаме набор от бутони от различните мрежи и ще прикачваме към съответните им събития или обратни обаждания, за да посочим кога е споделено нещо. А обаждане е функция, която се изпълнява, когато нещо друго е завършило, обикновено се предава като параметър на друга функция. Когато използвате jQuery AJAX, например, успешен обратен сигнал се изпълнява, когато заявката AJAX е била успешна - тя прави нещо с върнатите данни, като потвърждаване на получаване на данни от формуляра. Ще използваме и ние събития - които са малко по-сложни, но извън обхвата на този урок. След това ще задействаме наше собствено събитие, което съдържа кода, за да разкрием една или повече секретни части на страницата. За нашата цел само скриването на малко съдържание и разкриването му трябва да е достатъчно, но можете да коригирате това, за да е малко по-сигурно, което се зарежда чрез AJAX или подобно.

Изисквания:

• jQuery вече трябва да бъде включен и да се зарежда в заглавката на вашата страница. Няма да покрия това днес.
• Трябва да знаете как да включите Javascript на страницата, независимо дали това е чрез вградени маркери за скрипт или в отделен .JS файл, свързан в заглавката.

Основни бутони за споделяне

Нека започнем с зареждането на основен набор бутони за споделяне на страницата. Към това има две части, първо да заредим JS за бутоните (използваме асинхронна версия на тях, за да не блокираме зареждането на страницата). Ето кодовете от трите мрежи - не е необходимо да ги разделяте на малки фрагменти, всички те могат да отидат заедно в един JS файл.

/ * Facebook * / (функция (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; ако (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); } (документ, 'скрипт', 'facebook-jssdk')); window.fbAsyncInit = функция () {// init на FB JS SDK FB.init ({статус: вярно, xfbml: вярно}); }; / * Twitter * / window.twttr = (функция (d, s, id) {var t, js, fjs = d.getElementsByTagName (s) [0]; ако (d.getElementById (id)) се върне; js = d.createElement (s); js.id = Id; js.src = " https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore (js, fjs); върне прозорец.twttr || (t = {_e: [], готов: функция (f) {t._e.push (f)}}); } (документ, "скрипт", "twitter-wjs")); / * Google Plus * / (функция () {var po = document.createElement ('скрипт'); po.type = 'text / javascript'; po.async = вярно; po.src = ' https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName ('скрипт') [0]; s.parentNode.insertBefore (po, s); })();

След това ги поставете там, където искате бутоните да се появяват:

Не забравяйте да промените атрибута на данни чрез вашия потребител на Twitter. Освен това обърнете внимание на наличието на параметър за обратно извикване на бутона plusOne - тук няма събитие, към което да се прикачите, а само обратно извикване при натискане на бутона.

И накрая, създайте нова дефиниция за клас CSS за „.hidden“, И задайте дисплей: няма собственост за него. Всичко, което искате да скриете, докато споделите, трябва да влезе тук.

Уверете се, че в този момент бутоните ви се зареждат.

Прикачване към споделяне на събития

Ето истинската магия. Да започнем с Facebook. След FB.init функция, употреба FB.Event.subscribe както следва:

 FB.Event.subscribe ('edge.create', функция (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); });

Тук искаме да слушаме edge.create събитие (задейства се, когато потребителят хареса страницата). Тогава ние задействаме наше собствено събитие jQuery, на което съм свикнал pageSharedи предаване на стойността href като URL адрес, който беше споделен. Ще проверим това по-късно. Вашият пълен код на бутона във Facebook сега трябва да изглежда така:

 window.fbAsyncInit = функция () {// init на FB JS SDK FB.init ({статус: вярно, xfbml: вярно}); FB.Event.subscribe ('edge.create', функция (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); }); };

На следващо място, Twitter. twttr.events.bind се използва тук (можете да прикачите и към следващо събитие, ако желаете), но важното е да запомните, че всички те трябва да бъдат увити в twttr.ready за обратно повикване. Отново задействаме едно и също събитие jQuery pageShared, като предаваме правилната променлива, за да представим URL адрес, който беше споделен.

 twttr.ready (функция (twttr) {twttr.events.bind ('tweet', функция (събитие) {$ .event.trigger ({type: "pageShared", url: event.target.baseURI}); }); });

И накрая, Google Plus. Не забравяйте, че по-рано обясних, че няма събития за plusOne, така че вместо това сме посочили функция за обратно извикване. Нека сега създадем тази функция и задействаме събитието pageShared от там.

 функция plusOned (obj) {$ .event.trigger ({тип: "pageShared", URL: obj.href}); }

Покажи ми парите

И накрая, ние трябва да прикачим към нашето персонализирано събитие pageShared както следва:

/ * Слушайте страницата Споделено събитие * / $ (document) .on ('pageShared', функция (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Много просто, ако предаваният URL адрес е същият като на текущата страница, показваме тайното съдържание на потребителя. В примера, който направих, коте. Щастливи хора!

Аз съм мързелив. Мога ли да изтегля пълната ви демонстрация?

За да изтеглите пълния демо файл за този урок - да, познахте го - просто споделете страницата с помощта на бутоните отстрани и връзката за изтегляне ще ви бъде магически разкрита.

Проблеми с кода? Уведомете ме в коментарите, но либерален дол от console.log ще ви помогне да разберете какви предмети ви се предават обратно и тайните, които съдържат; и не забравяйте да използвате точните кодове на бутоните, предоставени тук, тъй като някои формати (като iFrame) не работят с тези събития.

Изтеглете test.html и опитайте на вашия собствен сървър