Сделайте свой собственный твит / лайк / + 1, чтобы разблокировать систему с помощью jQuery

Рекламное объявление

Раньше вирусный вирус означал эпидемию болезней, но теперь это то, чего жаждут все создатели контента. Вы мог полагаться только на качество вашего контента - если он достаточно хорош, люди будут делиться им, верно? Может быть. Но вы также можете немного помочь, предлагая что-то ценное тем, кто делится - купоном, загрузкой, наклейкой с улыбающимся лицом по почте или изображением милого котенка. Сегодня я покажу вам, как создать свой собственный как / твит / + 1, чтобы разблокировать систему с небольшим количеством jQuery и нативными API.

Этот метод предназначен для людей, которые имеют свои собственные веб-сайты и которым нужен механизм разблокировки. Если вы хотите сделать это на своей странице в Facebook, основные Учебник для фанатов Facebook Как разблокировать: Как построить базовый фан-сайт Facebook без оплаты хостингаОдним из невероятно эффективных способов использования страницы бренда, размещенной на Facebook, является стимулирование людей к тому, чтобы им понравилась страница, создавая некоторый секретный контент только для членов; обычно упоминается как "ворота вентилятора". Facebook также является партнером ...

Подробнее может быть более полезным.

Как это работает

Мы будем загружать набор кнопок из различных сетей и прикреплять их к соответствующим событиям или обратным вызовам, чтобы указать, когда что-то было передано. Перезвоните это функция, которая запускается, когда что-то еще завершено, обычно передается в качестве параметра другой функции. Например, при использовании jQuery AJAX обратный вызов успеха запускается, когда запрос AJAX был успешным - он что-то делает с возвращенными данными, например, подтверждает получение данных формы. Мы также будем использовать Мероприятия - которые немного сложнее, но выходят за рамки этого урока. Затем мы запустим наше собственное событие, которое содержит код для раскрытия одной или нескольких секретных частей страницы. Для нашей цели достаточно просто скрыть немного контента и раскрыть его, но вы можете настроить его так, чтобы он был немного более безопасным, чем загрузка через AJAX или аналогичную систему.

Требования:

• jQuery уже должен быть включен и загружен в заголовок вашей страницы. Я не собираюсь освещать это сегодня.
• Вы должны знать, как включить Javascript на страницу, будь то через встроенные теги сценария или в отдельный файл .JS, связанный в заголовке.

Основные кнопки общего доступа

Давайте начнем с загрузки основного набора кнопок на странице. Это состоит из двух частей, во-первых, для загрузки JS для кнопок (мы используем их асинхронную версию, чтобы избежать блокировки загрузки страницы). Вот коды из всех трех сетей - вам не нужно разбивать их на маленькие фрагменты, все они могут быть объединены в один файл 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); } (document, 'script', 'facebook-jssdk')); window.fbAsyncInit = function () {// инициализация SDK FB JS 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); вернуть window.twttr || (t = {_e: [], ready: function (f) {t._e.push (f)}}); } (document, "script", "twitter-wjs")); /* Гугл плюс */ (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); })();

Затем разместите их там, где вам нравятся кнопки:

Не забудьте изменить атрибут data-via для вашего собственного пользователя Twitter. Также обратите внимание на наличие параметра обратного вызова на кнопке plusOne - здесь нет события для прикрепления, просто обратный вызов при нажатии кнопки.

Наконец, создайте новое определение класса CSS для «.hidden«И установите дисплей: нет собственность для этого. Все, что вы хотите скрыть, пока не будет опубликовано, должно быть здесь.

Убедитесь, что ваши кнопки загружаются в этот момент.

Приложение для обмена событиями

Вот настоящая магия. Давайте начнем с Facebook. После FB.init функция, использование FB.Event.subscribe следующим образом:

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

Здесь мы просим послушать edge.create событие (срабатывает, когда пользователю нравится страница). Затем мы запускаем наше собственное событие jQuery, которое я назвал pageSharedи передав значение href в качестве URL-адреса, к которому был предоставлен общий доступ. Мы проверим это позже. Ваш полный код кнопки Facebook теперь должен выглядеть следующим образом:

 window.fbAsyncInit = function () {// инициализация SDK FB JS FB.init ({status: true, xfbml: true}); FB.Event.subscribe ('edge.create', function (href, widget) {$ .event.trigger ({type: "pageShared", url: href}); }); };

Далее твиттер. twttr.events.bind используется здесь (вы можете присоединиться к последующему событию, если хотите), но важно помнить, что все они должны быть заключены в twttr.ready Перезвоните. Опять же, мы запускаем то же самое событие jQuery pageShared, передавая правильную переменную для представления общего URL-адреса.

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

Наконец, Google Plus. Помните, ранее я объяснял, что для plusOne нет событий, поэтому вместо этого мы указали функцию обратного вызова. Давайте теперь создадим эту функцию и оттуда инициируем событие pageShared.

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

Покажи мне деньги

Наконец, нам нужно прикрепить к нашему пользовательскому событию pageShared следующее:

/ * Прослушать событие pageShared * / $ (document) .on ('pageShared', function (e) {if (e.url == window.location.href) {$ (". secret"). show (); } });

Очень просто, если переданный URL совпадает с текущей страницей, мы показываем секретный контент пользователю. В примере, который я сделал, котенок. Вы счастливчики!

Я ленивый. Могу ли я скачать ваше полное демо?

Чтобы загрузить полный демонстрационный файл для этого урока - да, вы уже догадались - просто поделитесь страницей с помощью кнопок на боковой панели, и ссылка на скачивание будет волшебным образом открыта для вас.

Проблемы с кодом? Дайте мне знать в комментариях, но либеральная ложка console.log поможет вам понять, какие предметы передаются вам назад и какие секреты они содержат; и обязательно используйте точные коды кнопок, представленные здесь, так как некоторые форматы (например, iFrame) не работают с этими событиями.

Скачать test.html и попробуйте на своем собственном сервере