Меню

Кнопку facebook с счетчиком



Социальные кнопки поделиться – пишем сами! Часть 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, но при помощи «нехитрого» костыля мы вытягиваем нужный нам результат.

Читайте также:  Счетчик газовый гранд spi

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

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

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

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

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

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

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

Источник

Скрипт кнопок социальных закладок и сетей

Продвижение в Социальных сетях

  • Генератор
  • О сайте
  • Преимущества
  • История изменений
  • Поблагодарить автора

4. Установите скрипт на своем сайте:

  1. Распакуйте архив со скриптом.
  2. Загрузите папку «share42» на ваш сайт по FTP или через панель управления хостингом (при желании папку можно переименовать).
  3. Укажите путь до этой папки: , например, http://site.name/share42/ .

Выберите наиболее подходящий тип сайта:

Вставьте в шаблон вашего сайта следующий код (прямо перед или сразу после текста статьи):

share42init » data-url=» http://site.name/page-title/ «>

Параметр Описание Пример использования
data-url ссылка на страницу
data-title заголовок страницы share42init » data-title=» Заголовок страницы «>
data-image ссылка на изображение [1] share42init » data-image=» http://site.name/image.jpg «>
data-description описание к странице share42init » data-description=» Описание страницы «>
data-path путь к папке с файлом иконок icons.png share42init » data-path=» http://site.name/share42/ «>
data-icons-file имя файла с иконками share42init » data-icons-file=» my-icons.png «>
data-zero-counter 1 — показывать нулевой счетчик, 0 — не показывать нулевой счетчик share42init » data-zero-counter=» 1 «>
Параметры для вертикальной панели
data-top1 расстояние от начала страницы до панели, в пикселях share42init » data-top1=» 150 «>
data-top2 расстояние от верха видимой области страницы до панели, в пикселях share42init » data-top2=» 20 «>
data-margin смещение панели по горизонтали, в пикселях (отрицательно значение — влево, положительное значение — вправо)

[1] Параметр data-image не работает для Фейсбука. Поэтому добавьте следующий тег внутрь тега вашего сайта:

og:image » content=» http://site.name/image.jpg »/>

О сервисе

Share42.com — это бесплатный сервис, генерирующий скрипт, который позволяет посетителям вашего сайта публиковать ссылки на ваши статьи в социальные медиа (закладки, социальные сети).

О преимуществах использования такого скрипта вы может прочитать в соответствующей вкладке.

Источник

Устанавливаем кнопку-счетчик для FaceBook

На данный момент FaceBook
не столь популярен в русскоязычном сегменте Интернета (как
Вконтакте и Одноклассники), но аудитория
его неизменно растет.

В англоязычном интернет Facebook по темпам роста намного
опережает Twitter. Учитывая выше написанное
кнопка-шэркаунт (sharecount), аналог популярной
кнопки Tweetmeme, в скором времени очень пригодится.

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

В рунете, конечно, кнопка интереснее если вы имеете хоть какое-то
отношение к Facebook. Я вот например, имею отношение (именно
«имею отношение» и при этом достаточно отдаленное, активным
пользователем себя назвать язык не повернется), поэтому решил
привертеть. Но, в принципе, этого не мешает сделать и отсутствие
Facebook-профиля, она же не для себя привинчивается.

Тем не менее, настаивать на кнопке я не буду (как делал это с
кнопкой для Твиттера), потому что созерцать на счетчике придется
по большей части нули. Есть чувство что Facebook еще увеличит
свое присутствие на нашем рынке, пока же кнопка в большинстве
случаев будет выглядеть на наших сайтах сиротливо, а иногда даже
откровенно не уместно. В общем, если вы активный «фэйсбукер» —
пригодится, если занимаетесь англоязычными проектами — глупо
игнорировать Facebook, если ни тот и ни другой — решать вам, я не
агитирую, а информирую.

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

Наиболее подходящее на для нее место, на мой взгляд — тело поста,
хотя это и не обязательное условие. Сама установка аналогична
Tweetmeme. Если стандартная кнопка не
устраивает, имеются настройки, благодаря которым можно
модифицировать код. Приведу те, что имеют непосредственное
отношение к дизайну:

size — размер, возможно два значения ‘large’ или ‘small’
(по умолчанию ‘large’). Советую попробовать ‘small’, потому что
для какого-то дизайна такая кнопка окажется более
органичной.
badge_text — Цвет текста виджета
badge_color — Цвет фона виджета

Чтобы вам было проще, используйте шаблон который я приведу ниже.
Выбирайте переменные (полный их перечень на сайте оригинала),
если какие-то не нужны — удаляйте строку, если каких-то не
хватает — добавляйте. Полученное используйте вместо дефолтового
(приведен выше):

var fbShare = <
size: ‘large’,
badge_text: ‘C0C0C0’,
badge_color: ‘CC00FF’,
>

Вот пожалуй и все что я хотел рассказать о кнопке-счетчике
Facebook, на этом раскланиваюсь.

Добавить комментарий Отменить ответ

Для отправки комментария вам необходимо авторизоваться.

Источник

Кнопку facebook с счетчиком

  • Комментарии подписчиков — кто может оставлять комментарии к Вашим публикациям, доступным для всех (все, друзья друзей, никто),
  • Уведомления подписчиков(все, друзья друзей, никто)

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

  • Имя пользователя — здесь Вы можете изменить свое имя на Facebook, но помните, что сделать это можно только один раз!

4. Переходим по ссылке

5. В поле Profile URL после https:// вписываем свое имя пользователя на Fasebook.
Например: https://www.fasebook.com/mariya.bessonowa

6. Настраиваем вид кнопки Подписаться :

1) Layout Style — стиль кнопки:

  • standart — отображается кнопка Подписаться и предложение «следовать» за Вами

  • box_count — кнопка со счетчиком сверху:

2) Show Faces — отображать ли фотографию Вашего профиля

3) Color Scheme — цвет фона, на котором располагается блок:

5) Widht — ширина всего блока. Зависит от того, какой стиль кнопки Вы выбрали в пункте 1:

  • standart — минимальная ширина 225 пикселей; по умолчанию установлена 450 пикселей; высота 35 px (без фото профиля) или 80 px (с фото);
  • button_count — минимальная ширина 90 px; по умолчанию 90 px; высота 20 px;
  • box_ count — минимальна ширина блока 55 px; по умолчанию 55 px; высота 65 пикселей.

Нужно учитывать, куда Вы хотите добавить гаджет с кнопкой Подписаться . Если в боковую колонку, то ширину подбирайте в зависимости от шаблона блога. Если вниз — под сообщение — тогда и ширина в 450 пикселей подойдет.

7. После всех настроек (их потом можно будет еще изменить) нажимаем кнопку Get Code

Источник

Счетчики и показания © 2022
Внимание! Информация, опубликованная на сайте, носит исключительно ознакомительный характер и не является рекомендацией к применению.

Adblock
detector