Меню

Кнопка фейсбук с счетчиком



Социальные кнопки поделиться – пишем сами! Часть 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. Надеюсь, к прочтению этого абзаца вы уже скачали архив с примером, если нет, то скачивайте и пользуетесь — всё работает. Данное решение я сам использую в нескольких проектах и проблем не замечал.

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

Источник

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

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

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

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

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

Читайте также:  Подключение трехфазного электросчетчика меркурий 230 с трансформаторами тока

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

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

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

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

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

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

Вот пожалуй и все что я хотел рассказать о кнопке-счетчике
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

Источник

Выбор и установка кнопок соцсетей для сайта

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

Содержание:

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

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

Преимущества и недостатки сервисов

Эффективные инструменты для шаринга могут быть добавлены двумя способами:

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

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

Все сервисы представляют собой площадки, где после ввода данных генерируется код, который необходимо разместить на веб-сайте.

К основным преимуществам этих «помощников» можно отнести:

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

Статистика переходов комфортно отслеживается в Яндекс.Метрике и Google Analytics.

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

  • Снижение скорости загрузки страницы, что может отрицательно сказаться и на позициях сайта при его ранжировании в поисковой выдаче, и на объеме продаж;
  • Сбои и ошибки в работе серверов, ведущие к длительной загрузке кнопок или их временной недоступности;
  • Периодическое появление рекламы;
  • Отсутствие стабильного алгоритма работы через AJAX;
  • Возможное использование памяти браузеров;
  • Наличие сомнительного трафика;
  • Непредставление гарантий безопасности данных пользователей.

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

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

И все же эти способы – самые востребованные и удобные варианты для быстрой установки скриптов кнопок «поделиться в социальных сетях».

Обзор сервисов кнопок социальных сетей

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

Яндекс кнопки соц сетей

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

Варианты внешнего вида:

  1. Со счетчиком расшариваний;
  2. С выпадающим меню;
  3. Мелкие иконки в стиле минимализма.

Список доступных для шаринга сетей:

Первичная настройка отображения кнопок соц сетей от Яндекса и готовый код:

Для установки блока необходимо вставить сгенерированный код в нужное место html-кода сайта. Возможна более точная работа с атрибутами, установка асинхронной загрузки скрипта и т.д. (см. документацию).

Pluso

Известный в российском сегменте аналог знаменитого сервиса. Конструктор выделяется привлекательным дизайном элементов, удобным функционалом и наличием полезных настроек.

Доступные стили и социальные сети:

Окно предварительного просмотра и дополнительных опций:

Произведя нехитрые манипуляции по выбору нужных соц. сетей, иконок и их настроек, можно увидеть код:

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

Uptolike

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

Готовые иконки могут иметь такой вид:

Можно выбрать все значимые современные сети:

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

После выполнения всех процедур по выбору и регулировке параметров следует нажать «Сгенерировать код», после чего будет предложено ввести свой e-mail для последующей отправки на него кода для установки.

Полученный скрипт и все остальные данные размещаются в html-коде сайта.

Share42

Share42 – понятный пошаговый генератор создания красивых кнопок социальных сетей.

Сервис предлагает быстрое формирование блоков, которое включает:

  1. Выбор необходимых соцсетей и размера иконок;
  2. Первичную настройку панели и другие опции;

Функции предварительного просмотра и скачивания;

Установку блока на свой ресурс: необходимо скачать архив (со скриптом), распаковать его, загрузить папку «share42» на свой сайт и указать путь до нее (http://site.name/share42/). Далее нужно выбрать тип ресурса и вставить в шаблон полученный в последнем окне код:

Sharethis

Англоязычная платформа с приятным оформлением и всеми необходимыми опциями для внедрения кнопок соц. сетей на веб-сайт. Сервис позволяет создать «фиксированные» или «скользящие» блоки, состоящие из множества иконок популярных сетей («Вконтакте» присутствует).

Функционал конструктора – все, что нужно для быстрого создания панелей. Принцип работы:

    После определения типа блоков («inline» или «sticky») осуществляется переход к выбору самих иконок (методом клика);

  • Дополнительные настройки (размер, вид, наличие счетчика, тип обрамления);
  • Финальное получение кода (требует регистрации).

    Addthis

    Самый известный иностранный сервис с услугами для размещения кнопок социальных сетей на сайте. Для доступа к полному функционалу необходимо пройти процедуру быстрой регистрации. И оно того стоит!

    Addthis превращается в мощный и полный полезных «фишек» наглядный конструктор с превью в режиме онлайн.

    Кнопки соц. сетей на сайте могут быть:

    1. Скользящими (floating);
    2. Зафиксированными на странице (inline);
    3. Раскрывающимися при наведении (expanding);
    4. Баннерами и слайдерами.

    Все вариации полностью адаптированы для мобильных устройств.

    После выбора типа блока и нажатия «Continue» левая панель окна принимает следующий вид:

    Здесь можно выбрать счетчик (share counters), посмотреть список всех доступных кнопок шаринга социальных сетей (select your own + add more services), настроить дизайн (design) и дополнительные функции (скрытие блоков и т.д.)

    Для получения кода достаточно нажать «Save & Continue». На следующей странице появится скрипт вида

    код самого блока

    и подробная инструкция по установке скрипта для разных шаблонов (включая доступные плагины).

    Social-Likes

    Social-likes – компактный и простой скрипт социальных кнопок «лайк» со счетчиком. На странице можно выбрать нужные сети, тип и расположение иконок, их скин и внешний вид.

    Дальнейшие действия для установки:

    1. Нажать «скачать кнопки»;
    2. Сохранить архив на ПК;
    3. В шаблоне сайта создать папку «social» и вложить в нее распакованные файлы архива;
    4. Перед прописать:

    Название файла .css может иметь другое значение (зависит от выбора, сделанного на сайте).

  • Использовать другую часть кода и вставить ее в шаблон для размещения кнопок:
  • Odnaknopka.ru

    Сервис от российских разработчиков с максимально упрощенной системой установки кнопок для социальных сетей.

    К недочетам можно отнести скудный функционал, но он компенсируется высокой скоростью работы скрипта «Одна Кнопка».

    Посетители могут выбрать 4 вида кнопки, один из которых – виджет (с разным положением относительно страницы).

    Скрипт социальных кнопок выглядит так:

    Для работы с виджетом код сложнее:

    Для установки достаточно поместить данные в шаблон.

    Pip.Qip.ru

    Представитель «моментальных» сервисов генерации кодов для установки социальных кнопок — Pip.Qip. Простота здесь лишь подчеркивает комфорт.

    Для получения заветного кода нужно:

    1. Указать тип площадки для размещения;
    2. Выбрать стиль из списка;
    3. Нажать «Уже хочу!» – и лицезреть готовый код внизу страницы.

    Останется лишь поместить его в код сайта.

    Добавление кнопок соц сетей вручную

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

    Кнопка поделиться Вконтакте

    Знаменитый «Вконтакте» генерирует коды кнопок расшаривания по этому адресу.

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

    Первую часть кода следует поместить внутри тега :

    Вторую – в место непосредственного расположения кнопки:

    Кнопка поделиться Facebook

    Методика получения официальных кнопок Facebook еще более проста и понятна. На сайте можно воспользоваться конфигуратором кнопки «Поделиться» и в мгновение ока получить код.

    Выбор функций ограничивается размером самой кнопки и тремя вариантами ее «композиции» (дизайна).

    После нажатия кнопки «Получить код» на экране появится окно с двумя «шагами»:

    Шаг 2 – Добавляем Javascript.

    Встраивается в html-код страницы единожды. Лучшее место – сразу после тега .

    Шаг 3 – сам код кнопки и его размещение.

    Кнопка поделиться Одноклассники

    Разработчики сайта «Одноклассники» представили обновленную кнопку «Класс/Поделиться», которая работает значительно быстрее прошлого образца.

    Здесь находится страница конструктора.

    С помощью интуитивно понятного интерфейса параметры подгоняются быстро и легко. Когда настройка завершена и вид элемента в блоке «Результат» устраивает, можно «пролистнуть экран» вниз и заметить код, который нужно встроить в html страницы в выбранном месте.

    Кнопка поделиться Google+

    Такой гигант, как Google, не мог остаться в стороне, поэтому для соц. сети googleplus тоже есть своя кнопка расшаривания. В отличие от виджета того же «ВКонтакте», кнопка «+1» не ведет к публикации материалов на страницах нажавшего на нее человека и не имеет влияния на ранжирование. «Тогда зачем она нужна?» – спросите вы. «+1» является частью эффективной PR-кампании вашего ресурса, в ходе которой материалы рекламируются друзьями друзей через профили Гугл, а рекомендации можно увидеть прямо в выдаче поисковой системы!

    Официальная страница открывает простой способ установки «+1» с помощью кода:

    Кнопка поделиться от Твиттер

    «Твитнуть или не твитнуть?». Чтобы у посетителей появились такие муки выбора, необходимо создать элемент для расшаривания от Twitter в официальном конструкторе.

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

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

    Кнопка поделиться от Mail.ru

    Плагин для шаринга от социальной сети . – кнопка «Нравится». Комфортное и быстрое создание доступно по ссылке.

    Можно внести изменения в параметры размера и вида кнопки, включить или отключить счетчик, выбрать тип текста.

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

    Добавление иконок на профили и группы в социальных сетях на сайт

    Иногда возникает необходимость оформить на сайте ссылку с красивой иконкой соц. сети. В интернете ждут своего часа сотни и тысячи значков разного стиля. Берите и пользуйтесь.

    Используя тег , можно вывести изображение понравившейся иконки в html.

    Или вынести иконку в CSS и для каждой социалки создать свой класс. Пример в Vk.com:

    html-код в таком случае будет:

    Легкие и кастомные кнопки расшаривания

    Некоторые энтузиасты и просто талантливые люди полностью отказываются от сервисов, плагинов и других доступных решений. Их цель – использование самостоятельно написанного&кода&для расшаривания. Весомое преимущество таких «кастомных» кнопок – чистый код, предполагающий загрузку лишь CSS, скрипта и шрифтов (картинок).

    Плюсы такого подхода:

    1. Нет лишнего трафика;
    2. Нет рекламы;
    3. Корректная работа;
    4. Нет проблем с зависимостью от сервиса (который может часто тупить и не загружаться);
    5. Нет проблем с поеданием памяти браузера.

    Список ссылок на шаширнг в популярных социальных сетях:

    Twitter Facebook Google plus LinkedIn Pinterest VK Tumblr Reddit Odnoklassniki

    Далее нужно придать им нужный вид с помощью CSS. В нашем случае html-код кнопки расшаривания в ВК выглядит так:

    Ну и стилизация кнопки в CSS:

    Вам останется только добавить всё это дело в модальное окно и реализовать корректный парсинг тегов с вашей разметки OpenGraph и подставноку в url’ы для шаринга, которые приведены выше.

    Источник

    Adblock
    detector