Меню

Кнопка с текстовым счетчиком



Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

Ой, вы, гой еси, дорогие мои читатели! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась вам по душе, и вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».

Кто читал, тот знает, ну а кто не читал, тому настоятельно советую прочитать первую статью, ибо заново разъяснять написанное в ней я не буду, а ссылаться по ходу статьи на неё придется.

Сама идея добавления счётчика ничем не отличается от реализации кнопок поделиться. Мы по-прежнему работаем с API возможностями социальных сетей, а именно, обращаемся по сформированному URL, с целью получить заветное число поделившихся.

Итак, давайте приступим и начнем, пожалуй, с самого JavaScript. Работа скрипта касательно счётчика делится на две части:

  • Счётчик необходимо добавлять к каждой кнопке из соцсетей при загрузке страницы;
  • При событии клик по кнопкам изменять число поделившихся.

Для того чтобы реализовать первую часть логики скрипта, нам потребуется добавить метод init():

Теперь более подробно рассмотрим, как он работает. Этот метод является точкой входа/запуска скрипта, который принимает единственный параметр – это селектор поиска обёртки кнопок. Далее через jQuery метод ready() мы отслеживаем полную загрузку документа. Так как у нас на странице может быть несколько блоков поделиться, то через функцию each() для каждого элемента в наборе выполняем код, лежащий внутри функции. В объекте countApiUrls хранятся прямые ссылки для получения числа поделившихся. В pageUrl мы достаём и сохраняем адрес страницы, который указали в параметрах data-share-data. Завершая работу с методом init() мы вызываем метод getCountLikes(), где и реализуем получение самих чисел для счётчика:

Метод getCountLikes() принимает 4 параметра:

  • box – обёртка для каждой из кнопок соцсети;
  • apiUrl – адрес API на которой происходит обращение;
  • pageUrl – адрес страницы, о которой мы хотим получить данные;
  • type – тип социальной сети.

Мы при помощи jQuery метода $.getJSON() обращаемся на сформированный url = apiUrl + pageUrl. В зависимости от соцсети получаем ответ (в основном это json) и обрабатываем его. Исключением является «Вконтакте», так как при запросе мы получаем отработку метода VK.Share(), что вызывает у нас на странице естественную ошибку, так как у нас нет объекта VK, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.

Последние, что нам останется – это отрисовать числа на кнопках. Эту задачу мы решаем при помощи нового метода setCountLikes(). Эта функция принимает два параметра: определитель обертки и само число.

На этом реализация первой части закончена, что мы получили в итоге: после того, как загрузиться страница у каждой кнопки «Поделиться» появиться число, в зависимости от результата работы с API. Теперь нам останется закончить вторую часть, а именно при клике по кнопке увеличивать счётчик на единицу. Это реализуем в старом методе popup():

Мы добавили новый параметр box, ранее описанный, и внутри при помощи условного оператора if() увеличиваем счётчик, в зависимости от наличия числа ранее поделившихся. На этом сам скрипт завершён, конечно, нужно ещё обновить в методах twitter(), vk(), facebook() строчку:

Теперь, что касательно HTML разметки, выше мы рассмотрели метод init() и так как это точка входа/запуска скрипта, то её мы вызываем на странице после подключения файлов:

Ещё в кнопке стоит добавить span с классом icon:

Также несущественные изменения произошли и в CSS. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

Читайте также:  Допустимое расстояние от газового счетчика до плиты

В заключение к этой статье, хочется добавить, что мы рассмотрели сам принцип написания социальных кнопок «Поделиться» и вы, думаю, поняли, что их можно реализовать самому, не используя сторонние сервисы и при этом меняя дизайн и функционал как угодно.

Источник

Как вставить счетчик на витрину интернет-магазина?

WebAsyst Shop-Script позволяет добавлять на витрину интернет-магазина счетчики посетителей, например, SpyLOG, HotLog, Mail.Ru, Яндекс.Метрика и другие. Перед добавлением счетчика необходимо зарегистрироваться в системе, предоставляющей счетчик. Получив HTML/JavaScript-код счетчика, вставьте его на витрину, перейдя в раздел «Дизайн -> Редактор дизайна», одним из следующих способов.

Совет: по аналогии со счетчиками посетителей такими же способами можно добавлять на витрину магазина любые фрагменты кода на HTML, CSS, JavaScript.

Вставка счетчика в режиме «Конструктор (WYSIWYG)»

  1. Откройте вкладку редактора «Основная разметка»
  2. Перейдите по ссылке «Произвольный HTML-код» в правой части окна редактора.
  3. В появившееся текстовое окно вставьте код счетчика, полученный после регистрации в системе. Нажмите «Добавить в шаблон».
  4. Появившийся блок с изображением счетчика переместите методом перетаскивания (drag-and-drop) в нужное место на странице. Как правило, счетчики размещаются в нижней части страницы.
  5. Нажмите на кнопку «Сохранить шаблон».

Если после нажатия на кнопку «Добавить в шаблон» изображение счетчика не появляется в окне редактора, повторно вставьте в поле «Произвольный HTML-код» код счетчика и произвольный текст, например, слово счетчик. Нажмите на кнопку «Добавить в шаблон» и переместите блок с добавленным словом в то место, где на витрине должен отображаться счетчик. Дважды щелкните по блоку с произвольным словом, в открывшемся окне удалите это слово, оставив только код счетчика, нажмите «Применить» и сохраните сделанные изменения.

Вставка счетчика в режиме «Редактировать HTML-код»

  1. Откройте вкладку редактора «Основная разметка» в режиме редактирования HTML-кода.
  2. Добавьте в текстовое окно код счетчика, например, в самом конце.

Совет: если код счетчика содержит фигурные скобки < и >, необходимо добавлять его на страницу между тегами . , например, так:

Для того чтобы отключить срабатывание счетчика в режиме редактирования дизайна, код счетчика следует поместить внутрь условия Smarty, как показано ниже:

Размещение счетчика в корзине и на страницах оформления заказа

Приведенные выше инструкции применимы для случаев, когда для параметра настроек корзины Как показывать корзину покупок выбран вариант «Как отдельную страницу магазина». Для того чтобы счетчик срабатывал в корзине и на страницах оформления заказа при выбранном варианте «Затемнять страницу и показывать поверх», следует также разместить код счетчика в следующих файлах:

Внимание: пользователям веб-сервисов WebAsyst доступ к исходному коду файлов не предоставляется. Таким пользователям для отслеживания статистики на указанных страницах следует либо переключить корзину на вариант «Как отдельную страницу магазина», либо приобрести скрипты приложения Shop-Script и внести изменения в файлы, как указано в этом разделе.

Источник

Установка кнопки Like от ВКонтакте и кнопки «Твитнуть», до кучи кнопка Google +1

Выполняю обещание! Приступим к описанию установки кнопки «Мне нравится» от социальной сети ВКонтакте без лишних плагинов (плагин тоже существует). Как ставить кнопку от Facebook я писал здесь. Итак, заходим в свой профиль в VC (это важно т.к. нам нужно будет создать приложение). Затем идем на страницу — Виджета «Мне нравится» и наблюдаем такую форму:

Виджет Мне Нравится от ВКонтакте

Первое поле «Сайт/приложение» – здесь можно сразу же создать приложение без лишних телодвижений, но я пожамкал на кнопки и оно создается как-то через одно место или браузер не тот или еще чего, пошел другим путем.

Создание и настройка приложения

Пойдем более сложным путем, труднист я, топаем на страницу создания приложения, вписываем произвольное название в соответствующее поле, потом выбираем тип: «Веб-сайт», заполняем поле с описанием, что не обязательно. Далее жамкаем на «Перейти к загрузке приложения» и вводим номер телефона и получаем на него СМС с кодом, который вводим в всплывающем окне. Далее жмем согласен с правилами.

Читайте также:  Счетчик расхода калорий при физических нагрузках

Все! Приложение создано и перед нами форма с его настройкой:

Настраиваем созданное приложение

Первая вкладка «Настройка», она у Вас сейчас активна, можете загрузить иконку для приложения, вписать данные, выбрать группу, «Защищенный ключ» (его не трогайте).

Ниже ID номер Вашего приложения (он и будет коннектить Вашу кнопку).

Далее «Open API», вот тут аккуратно, вводите адрес сайта точно так же, как это показано на примере (см. картинку выше):

Адрес сайта: http://yoursite.com/ (адрес к которому Вы подключаете Open API. Если использовать это приложение на другом сайте или на локалхосте, работать не будет. Приложение полностью привязывается к адресу сайта, который тут указан.)

Лишний слэш в настройках адресов и Ваша кнопка не законнектится, будет выводить ошибку «Open API security breach».

Все, сохраняете изменения, остальные вкладки можете не настраивать.

Настраиваем и вставляем кнопку

Возвращаемся к форме создания кнопки и вот тут уже в поле «Сайт/приложение» в выпадающем списке должно появится Ваше приложение, выбираем его.

Следующий пункт «Варианты кнопки» – выбираем, какая Вам больше подходит под дизайн, внизу под формой сразу приводится наглядный пример кнопки. На данный момент существует 4 вида кнопки:

Источник

Повесить счётчик на кнопку

всем привет. есть кнопка которая описывается как

и надо на нее повесить счётчик чтоб значение количества нажатий выводил в консоль.

на просторах интернета нашел пример:

описание кнопки заданно как :

а сам скрипт задан кодом:

не могу переделать под свои нужды. попробовал вот так вот и выполнить в консоли браузера, но ничего не получается.
пробовал выполнить в расширении Tampermonkey (желательно что работало в Tampermonkey), но все равно не работает.

прикладываю скрипт который сам передела и прошу указать на ошибки и направить по правильному пути .

Button.onclick — как повесить на кнопку последовательные события?
Привет, есть вот такой код. Тут 5 блоков (стили в отдельном css файле). Задача, поменять цвет.

JavaScript+JQuery! Как повесить функцию обновления страницы на эту же нажатую кнопку, которая имеет другую функцию?
я понимаю что звучит очень странно, НО! по пунктам: 1. есть кнопка С функцией А 2. при нажатии на.

Поставить счетчик, сколько раз нажали на эту кнопку
Я начинающий программист на javascript опыта почти не имею. Создал сайт на html и хочу поставить .

вставил и в расширение и в консоль хрома, в консоли хрома выдал ошибку.

Решение

оооо да, работает с первого раза )спасибо )

а еще такой вопрос тогда, если не сложно ?)

есть массив радиобоксов :

надо узнать какой из них выбран. нашел код на просторах интерента. и надо в отдельнотси считать каждый радиобокс при нажатии на кнопку ( счёт по которой идет. )
нашел код выглядит так:

Вложения

twist.rar (125.2 Кб, 0 просмотров)

var rad=document.getElementsByName(‘r1’); — в этой строке ошибка

У твоего input в атрибуте name стоит status

А в JS ты пишешь r1.

То есть в итоге у тебя должна получиться строчка

спасибо за помощь ) В итоге получился такой код который работает как надо и как хотелось )

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

думал делать через куки. но может кто то знает более приятное решение. спасибо

Добавлено через 19 минут
или использовать методы window.sessionStorage и window.localStorage ?

итак. есть продвижения по моему скрипту

в итоге получается такой код:

в нем присутствует функция inspection. хочу делать проверку хранящихся в файле данных. мне с нее надо вернуть 3 значения: return [counter, performed, expectation];, правильно ли я понимаю, что будет возвращен массив с 3 элементами и с ними надо работать как с массивом. то есть, если я захочу сохранить их в другую переменную то надо составлять конструкцию на подобии let a = inspection [0] где будет храниться значение counter и так для 3 значений. ?

спасибо за помощь и наставления. )

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

Источник

Кнопки

Кнопки можно использовать на страницах сайта, например, в описаниях услуг или товаров. Они сразу бросаются в глаза и в большинстве случаев побуждают посетителя совершить действие через данную кнопку.

Далее мы рассмотрим, как создавать изображения для кнопок и вставлять их в качестве ссылок на текстовые страницы вашего сайта.

Шаг 1

Зайдите в панель управления сайта. В меню данных сайта выберите пункт «Кнопки».

Шаг 2

Откроется страница-модуль “Кнопки”. В данном модуле хранятся все созданные изображения для кнопок (Кнопки).

Для создания кнопки кликните по “+Создать кнопку”.

Шаг 3

Откроется окно “Генератор кнопок”. Оно имеет следующий вид.

Шаг 3.1

Введите текст, который будет отображаться на кнопке (прим. Заказать, Прайс-лист, Контакты). Затем нажмите по появившейся кнопке «Применить«. Изменения вступят в силу.

Вы можете применить готовый стиль кнопки или создать свой собственный.

Для выбора готового стиля достаточно кликнуть по понравившейся кнопке в разделе “Применить готовый стиль”.

Затем нажмитеСохранить”.

Шаг 3.2

Для создания собственного стиля кнопки выберите цвет кнопки в меню “Выбор цвета”.

Шаг 3.3

Выберите подходящий размер и тип шрифта.

Шаг 4

Если вам необходимо создать более детальный дизайн кнопки, кликните по вкладке ”Дополнительные настройки”.

Откроются такие инструменты как:

  • Цвет текста;
  • Цвет кнопки;
  • Тень от текста;
  • Тень от кнопки;
  • Отступы;
  • Рамка;
  • Скругление углов;
  • Внутреннее размытие.

Шаг 4.1 Цвет текста

Кликните по кнопке с текущим цветом шрифта, откроется окно выбора цвета. Выберите из палитры нужный цвет и кликнитеОк”.

Шаг 4.2 Цвет кнопки

В меню “Цвет кнопки” в “Дополнительных настройках” можно выбрать количество цветов и способ заливки:

  • Одноцветная;
  • Два цвета;
  • Градиент (из 2-х цветов).

При выборе “Два цвета” появится кнопка со вторым цветом. Кнопка будет выглядеть следующим образом.

При выборе “Градиент (из 2-х цветов)” кнопка будет иметь следующий вид.

Шаг 4.3 Тени

Для того, чтобы включить эффект тени для текста или кнопки, кликните по галочке с соответствующим эффектом.

Окно примет следующий вид. В настройках тени можно выбрать:

  • Цвет (выбор цвета тени);
  • Угол (выбор угла освещения, под которым образуется тень). Для того чтобы изменения вступили в силу, кликните «Применить«. ;
  • Непрозрачность (в процентах);
  • Размер тени (выбор размера тени);
  • Сдвиг тени (выбор отдаленности тени от объекта).

Соответственно и кнопка примет имеющиеся параметры тени.

Шаг 4.4 Отступы

В меню “Отступы” можно настроить размеры кнопки, а именно ширину и высоту.

  • Сверху / Снизу — вертикальные отступы от текста;
  • Слева / Справа — горизонтальные отступы от текста.

4.5 Рамка

В меню “Рамка” можно настроить цвет и толщину рамки.

4.6 Скругление углов

В меню “Скругление углов” можно выбрать радиус скругления углов кнопки.

4.7 Внутреннее размытие

Для добавления эффекта размытия, внутри кнопки кликните по галочке “Внутреннее размытие”. Окно примет следующий вид.

Вы можете выбрать цвет и размер слоя размытия.

Соответственно кнопка будет принимать заданные параметры внутреннего размытия.

Шаг 5

После настройки стиля кнопки кликните по кнопке “Сохранить”.

Изображение кнопки сохранено в системе управления!

Источник