Mark Lucas
0 
1656
328
Вирусное распространение раньше означало эпидемию болезни, но теперь это то, чего жаждут все создатели контента. Вы мог полагаться только на качество вашего контента - если он достаточно хорош, люди поделятся им, верно? Может быть. Но вы также можете немного помочь, предлагая что-то ценное тем, кто делится - купоном, загрузкой, наклейкой с улыбающимся лицом по почте или изображением милого котенка. Сегодня я покажу вам, как создать свой собственный как / твит / + 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]; 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); (документ, 'скрипт', '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)) вернуть; 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)); (документ, "скрипт", "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);) ();Затем разместите их там, где вам нравятся кнопки:
Не забудьте изменить атрибут data-via для вашего собственного пользователя Twitter. Также обратите внимание на наличие параметра обратного вызова на кнопке plusOne - здесь нет события, которое нужно прикрепить, только обратный вызов при нажатии кнопки.
Наконец, создайте новое определение класса CSS для “.скрытый“, и установить нет дисплей: нет собственность для этого. Все, что вы хотите скрыть, пока не будет опубликовано.
Убедитесь, что ваши кнопки загружаются в этот момент.
Приложение для обмена событиями
Вот настоящая магия. Давайте начнем с 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 и попробуйте на своем собственном сервере