6 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Кнопки «Поделиться в соц сетях»

Кнопки «Поделиться в соц сетях»

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

  • Главная >
  • Готовые модули InSales >
  • Кнопки «Поделиться в соц сетях»

Предупреждение!

Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

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

Оформление кнопок

Для начала определимся с внешним видом кнопок. Основные рекомендации:

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

Пример незаметных кнопок:

Компания изменила цвет, но кнопки остались заметны:

Логотипы должны быть узнаваемыми. Можно менять оформление под дизайн вашего сайта, но не переусердствуйте.

Не сразу понятно, что это кнопки и что они ведут на соцсети:

Несмотря на кардинальное изменение внешнего вида, сразу понятны функции данных кнопок:

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

Пример изменения кнопки после наведения курсора:

Кнопок не должно быть слишком много. Исследования за прошедший год показывают, что в основном россияне используют Youtube, ВКонтакте, Одноклассники, Facebook и Instagram, а также делятся информацией в WhatsApp и Viber. Обязательно учитывайте особенности аудитории вашего сайта, однако рекомендуем размещать не более 5-7 кнопок.

Ссылки должны быть рабочими. Очевидный пункт, но многие не знают, что Google+ закрыла свою соцсеть и теперь ссылка доступна только для корпоративных клиентов. Также из-за прошедших блокировок соцсети Telegram у пользователей возникают проблемы с доступом.

По кнопкам должно быть удобно кликать. Мелкие элементы менее заметны, поэтому можно легко промахнуться, нажав на соседнюю кнопку. Минимально допустимый размер кнопки от 10×10 мл или примерно 40×40 пикселей.

Пример слишком мелких кнопок:

По таким кнопкам сложно не попасть:

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

Usocial.pro — у сервиса удобный конструктор и много вариантов оформления. Кнопки впишутся в адаптивную верстку, и по каждому набору будет собираться статистика.

Uptolike — не менее хороший конструктор и обилие настроек по дизайну кнопок. Есть отдельные плагины для популярных CMS.

Блок «Поделиться» от Яндекса — если не хочется заморачиваться с оформлением, то Яндекс предлагает самый простой конструктор с минимумом возможностей. Плюс данного сервиса в том, что доступно исследование через Яндекс.Метрику.

JL Like — плагин, для добавления кнопок популярных социальных сетей на ваш сайт Joomla.

Плагин основан на технологии поделиться (Share) социальных сетей: Вконтакте, Facebook, Одноклассники, Мой мир, Linkedin, Pinteres, LiveJournal, Blogger, Weibo, Telegram, WhatsApp, Viber и Twitter.

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

Возможности JL Like:

  • Поддержка Joomla 3. (c версии JL Like 2.5 требуется Joomla 3.5 и выше).
  • Вывод в материалах Joomla. Поддерживаются: Материал, Избранное, Блог категории.
  • Вывод в K2 v2.6 и выше.
  • Вывод в VirtueMart v2/v3.
  • Вывод в ZOO v3.
  • Вывод в JoomShopping 3/4 .
  • Вывод в ADSmanager 2.6 и выше.
  • Вывод в EasyBlog.
  • Поддержка социальных счетчиков социальных сетей: Facebook, Вконтакте, Одноклассники, Мой мир, Linkedin, Pinteres.
  • Поддержка социальных сетей без счетчиков: Twitter, LiveJournal, Blogger, Weibo, Telegram, WhatsApp, Viber.
  • Включение и отключение кнопок социальных сетей.
  • Счетчик упоминаний страницы в социальных сетях.
  • Корректное определение адреса страницы.
  • Выбор приоритетного домена.
  • Возможность исключения вывода в категории.
  • Отсутствие внешних ссылок на социальные сети.
  • Небольшой вес.
  • Отсутствие фреймов и скриптов социальных сетей.
  • Локализация: Русский и Английский.
  • Возможность отключения погрузки JQuery.
  • Получения данных file_get_content() или CURL().
  • Поддержка open graph Facebook.
  • Вывод текста рядом с кнопками.
  • Поддержка HTTPS сайтов.
  • Гибкое задание тега og:description (можно задать выбора из description, краткого описания, полного описания).
  • Возможность задать изображение по умолчанию для тега og:image.
  • Специальный стиль для мобильных устройств.
  • Возможность настройки стиля кнопок через админку плагина.
  • Управление порядком социальных кнопок.
  • Подключение мобильного вида — кнопки соцсетей плавают внизу экрана.
  • Поддержка PHP 7.
  • Графика SVG.
  • Пристыковка к краю экрана.
  • Очистка тегов.
Читать еще:  Старые версии сайтов вебархив

Еще расширения для вашего сайта

Компонент универсального парсера, поддерживает компонент Афиша Joomla, Афиша — каталог.

История версий Социальные кнопки Joomla

  • Исправление twit.min.js.
  • Удаление обратной ссылки на страницу расширения.
  • Исправление счетчика WhatsApp.
  • Исправление счетчика Facebook.
  • Исправление кнопки сохранить, в некоторых случаях была проблема.
  • Изменен пакет установки.
  • Исправлены языковые переменные.
  • Слияние JL Like PRO и JL Like.
  • Добавлена поддержка K2, ZOO, Easy Blog, VirtueMart, JoomShopping, ADSmanager.
  • Добавлены все возможности вывода, которые были в JL Like PRO.
  • Удаление Google+
  • Изменение кнопки Telegram на API
  • Исправление WhatsApp
  • Добавлена поддержка Viber.
  • Добавлена опция пристыковать к краю экрана.
  • Ссылка добавляется на Joomline выводится только на некоторых страницах.
  • Отключение счетчика лайков.
  • Добавлена опция очистки тегов.
  • Обновлен CSS.
  • Обновлен JS код.
  • Обновлена ссылка поделиться для ok.ru
  • Добавлена кнопка поделиться в Telegram
  • Добавлена кнопка поделиться в WhatsApp
  • Обновлены размеры окна для кнопок поделиться.
  • Обновлены CSS стили.
  • Добавлены языковые переменные.
  • Изменена форма пожертвований.
  • Очистка текста от тегов плагинов с квадратными скобками.
  • Исправление вывода лайков на странице избранного материалов Joomla
  • Обновление для Вконтакте.
  • Минификация скриптов и стилей.
  • Чистка описания от спецсимволов.
  • Добавлена кнопка поделиться LiveJournal.
  • Добавлена кнопка поделиться Blogger.
  • Добавлена кнопка поделиться Weibo.
  • Исправление для счетчика Facebook.
  • Исправление для старых версий Joomla 3.
  • Исправление js для Chrome.
  • Добавление счетчика Google plus.
  • Обновлена иконка Google plus.
  • Исправление js для твиттер.
  • Улучшена обработка тегов.
  • Удалены настройки jq.
  • Багфикс.
  • Дополнительная очистка тегов.
  • Поддержка PHP 7.
  • Исправления для Joomla 3.5.
  • Плагин предназначен только для Joomla 3.5 и выше.
  • Исправлено мобильное представление в категории.
  • Добавлена настройка подключения мобильного представления.
  • Добавлена настройка выравнивание по центру.
  • Добавлена настройка управления порядком социальных кнопок.
  • Исправлены проблемы выравнивания дополнительного текста.
  • Исправлен общий счетчик лайков в категории.
  • Доработаны og:tag.
  • Гибкое задение тега og:description.
  • Возможность задать изображение по умолчанию для тега og:image.
  • Специальный стиль для мобильных устройств.
  • Возможность настройки стиля кнопок через админку плагина.
  • Новые стили CSS.
  • Графика SVG.
  • Прекращена поддержка Joomla 2.5.
  • Исправление ошибок.
  • Исправления ошибок
  • Поддержка HTTPS
  • Исправления для мобильных устройств и социальной сети Facebook.
  • Поддержка open graph Facebook.
  • Изменение алгоритма поиска изображений.
  • Добавлена поддержка Избранного Joomla.
  • Удалена кнопка Яндекс.
  • Исправления для Твиттер.
  • Исправления для FaceBook.
  • Исправления для совместимости с виджетами Вконтакте.
  • Настройка родительского контейнера кнопок.
  • Настройка вывода текста возле социальных кнопок.
  • Багфикс.
  • Исправления JS.
  • Исправления языковых переменных.
  • Рефакторинг.
  • Обновление CSS.
  • Обновление JS.
  • Добавлена опция вывода в категориях контента Joomla.
  • Добавлена опция вывода в любой области статьи Joomla.
  • Добавлена частичная поддержка кирилических доменов.
  • Добавлены кнопки: Яндекс, Мой мир, Linkedin, Pinteres.
  • Улучшена работа с картинками.
  • Добавлено +1 при клике на социальную сеть.
  • Багфикс.
  • Убрана Украинская локализация.
  • Исправления касающиеся получения количества лайков из Facebook.
  • Исправления касающиеся получения количества лайков из VK.
  • Изменение css стилей.
  • Багфикс.
  • Добавлен Украинский перевод.
  • Исправление возможных проблем с роутером.
  • Исправление проблемы с кнопкой Facebook в Google Chrome
  • Обработка ошибок связанных с недоступностью сервиса отдачи лайков.
  • Автоматическое обновление плагина лайков через админку Joomla
  • Добавлена настройка отключения JQuery.
  • Багфикс
  • Добавлена настройка выбора метода получения данных file_get_content() или CURTL()
  • Исправления для социальных сетей.
  • Выделены языковые переменные.
  • Перевод на английский язык.
  • Решена проблема с выводом в HTML модулях joomla.
  • Последняя верcия для жумла 1.5.
  • Исправление ошибок связанных с обновлением сети google+.
  • Исправлена ошибка связанная с изменением алгоритма google+
  • Портирование плагина под joomla 1.5
  • Багфикс — повышена совместимость с другими расширениями.
  • Включение отключение кнопок социальных сетей.
  • Поддержка социальных сетей одноклассники и google+.
  • Исправление ошибок.
  • Улучшение совместимости.
  • Финальный релиз для joomla 2.5

КНОПКИ «ПОДЕЛИТЬСЯ»

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

Чтобы в записи на стене социальной сети отображался свой заголовок, описание и картинка, нужно ввести эти данные в настройках страницы, на вкладке «Социальные сети».

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

Минусы кнопки соцсетей для сайта

«Слепота» на социальные кнопки

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

Неготовность пользователей

Посетители сайта вообще могут быть не в теме социальных сетей. Например, далеко не все люди пенсионного возраста имеют там профили.

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

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

Найти его можно как в списке плагинов, так и в консоле в качестве отдельного раздела под названием UpToLike. Открываем и видим 3 вкладки. Пройдёмся по ним.

Читать еще:  Chrome открывает вкладки с рекламой что делать

Конструктор

И первая вкладка будет Конструктор. Сразу хочу заметить, что по мере настраивания кнопок, справа можно увидеть, как они будут отображаться в браузере или на мобильном устройстве.

А слева идут сами настройки. И первым делом отметим социальные сети, в которых мы желаем делиться контентом своего сайта. Ещё социальные сети — для открытия полного списка.

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

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

Настроить социальные сети — открываем и также выбираем самые популярные сети.

Дополнительные настройки:

  • Цитирование — при выделении части текста появляется кнопка «поделиться».
  • Кнопка «Наверх» — позволяет подняться наверх страницы.
  • Отключить кнопку «. » — это как раз то, о чём говорилось выше. Я не стала отключать кнопку дополнительного выбора соцсетей.
  • Показать всплывающее окно с предложением подписаться — если у вас есть группа в соцсетях, можете активировать эту опцию. Тогда появится форма для заполнения данных группы.

Расположение блока:

  • Боковая панель — слева, справа, сверху или снизу.
  • В контенте — горизонтально или вертикально.

Здесь можно экспериментировать и сразу же оценивать результат справа. Я выбрала вариант боковой панели снизу.

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

А ниже есть возможность подключить счётчик общий или раздельный. Или не показывать его вовсе.

Стиль — здесь есть где разгуляться. Опять же выбираете кнопки на свой вкус.

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

Помимо этого, можете поиграть с фоном кнопок, цветом текста и фоном счётчика. А также задать размер его текста.

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

Настройки

В этом разделе мы определим настройки отображения блока UpToLike:

  • Главная страница
  • Статические страницы
  • Страницы записей
  • Страницы архивов
  • Специальные страницы

Я отметила галочками все эти пункты.

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

Затем проходите в файловый менеджер и выбираете какой-либо файл с расширением php, чтобы вставить в шаблон своей темы WordPress. Но делать это не обязательно.

Либо второй вариант — текстовый редактор. Вставляете код uptolike, заключённый в квадратные скобки.

Расположение блока — только снизу или только сверху.

Выравнивание блока — по левому краю, правому или по центру.

Режим работы — плагин, шорткод, плагин и шорткод. Устанавливаете в зависимости от того, с помощью чего хотите выводить блок кнопок. У меня виджет работает в режиме плагина.

Язык — выбираете свой.

Сохраняем настройки и переходим во вторую вкладку.

Статистика

Как уже говорилось выше, плагин способен предоставить нам общую статистику о посетителях.

Сперва, конечно, у вас будет пусто. Но на следующий день уже можете любоваться графиком в этой вкладке настроек UpToLike.

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

Ну а на этом всё. Думаю, вы оцените популярный виджет кнопок UpToLike Social Share Buttons по достоинству. До новых встреч!

Также очень советую вам установить бесплатный модульный плагин iThemes Security для всесторонней защиты своего сайта. Просто отличная и необходимая вещь!

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

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

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

Итак, что нам нужно:

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

Первым делом покажу небольшой код, для 2-х соц сетей, VK и G+, а так же иконку ленты FeedBurner. По аналогии вы можете добавить сколько угодно иконок.

В этом примере я показал сразу три варианта добавления иконок, первый с использованием картинок с другого сайта, второй WordPress-совский используя функцию bloginfo(), третий, более правильный и оптимальный, указание абсолютного пути к картинке на сервере.

Что касается CSS, тут я вам навряд сильно помогу, могу лишь дать несколько советов по примеру ниже:

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

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

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

Читать еще:  Как изменить разрешение файла в Windows 10

В данной статье мы рассмотрим несколько способов создания кнопок/ссылок «Поделиться» на сайте Drupal 8.

Начнем с безмодульных подходов.

Способ 1: Сервис Pluso

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

Сервис находиться по ссылке https://share.pluso.ru. и предлагает возможность формирования набора более чем из 30 источников. Начиная с соцсетей «Вконтакте», «Одноклассники», «Facebook» и заканчивая «Evernote», «Pinterest» и «Яндекс.Закладки». Встроенная статистика прилагается.

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

Способ 2: Сервис Usocial.pro

Неплохой сервис https://usocial.pro предлагает неплохой конструктор кнопок поделиться. Прекрасный вариант для тех, кто не хочется заморачиваться.

Более того, сервис располагает возможностями создания кнопок Like, виджетов подписки, а также создания доступа к контенту при условии, что пользователь подпишется на группу или профиль в соцсети. Он так и назвается — «Социальный замок»:

Способ 3: Сервис Share42 . com

Еще один онлайн сервис кнопок «Поделиться». Расположен по адресу http://share42.com/ru.

Выглядит немного сложней, чем его предыдущий аналог, но пусть вас это не смущает — он проверен и отлично работает!

Здесь мы также выбираем желаемые ресурсы для шаринга и упаковываем кнопки в специальный архив share42 для размещения на сайте. Далее этот архив закачивается через ftp на хостинг и используется при активации jscript’a. Путь для расположения share42 плагина вы можете выбрать самостоятельно, но не забудьте учитывать его при выводе div-блока с кнопками.

Способ 4: Блок «Поделиться» от Яндекс

Следующий сервис социальных кнопок — это «Блок «Поделиться»» от компании Яндекс. Простое и интуитивно-понятное решение на подключение которого уйдет не больше 3-х минут.

Набор сервисов для кнопки и пара опций по внешнему виду — только все, что нужно и ничего более! В отличии от Shared42 и Pluso позволяет помимо известных соцсетей подключать не менее известные на текущий момент мессенджеры. Viber, Whats’Up, Skype и даже Telegram. По-моему это круто!

Способ 5: Модули кнопок «Поделиться» для Drupal 8

Ну и конечно же не могу не поделиться модулями по созданию кнопок «Поделиться».

Share Everywhere — добавляет блок, который можно расположить на статьях, тизерах, товарах и т.п. В ассортименте есть кнопки для известных мессенджеров.

Sharerich — настраиваемые кнопки социальных сетей и мессенджеров. В т. ч. Instagram. Сам не пробовал, не могу поделиться опытом.

Есть еще модуль ShareThis — но про него ничего сказать не могу. Если будете использовать, используете на свой страх и риск.

Способ 6: Использование подстановочных ссылок и токенов

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

Например, нам необходимо рассшарить в соцсети страницу https :// getdrupal8 . ru / drupal / articles .

Для вывода ссылок к кнопкам используем следующие URL:

Telegram — https :// telegram . me / share / url ? url = https :// getdrupal8 . ru / drupal / articles &text=GetDrupal%208:%20Drupal%20Articles

Google + — https :// plus . google . com / share ? url = https :// getdrupal8 . ru / drupal / articles

Twitter — https :// twitter . com / intent / tweet ? url = https :// getdrupal8 . ru / drupal / articles &text=GetDrupal%208:%20Drupal%20Articles

Facebook — https :// www . facebook . com / sharer / sharer . php ? u = https%3A%2F%2Fgetdrupal8.ru%2Fdrupal%2Farticles

Вконтакте — https :// vk . com / share . php ? url = https :// getdrupal8 . ru / drupal / articles

Жирным текстом я выделил значения которые необходимо заменить на токены. В случае с Google + и Вконтакте нужно просто подставить ссылку на страницу. Для Telegram и Twitter помимо ссылки мы можем задать текст поля сообщение. В моем случае это Getdrupal 8: Drupal Articles. Слова разделены символами %20. При расшаривании ссылок в Facebook следует вставить ссылку внутрь слеш и двоеточия. Роль двоеточия здесь играет %3A, а слеш %2F.

Используйте возможности view, twig, php и symphony для вывода токенов внутри ссылок. Если у вас нет этих знаний, воспользуйтесь более простыми способами выше.

Спасибо за внимание! Буду очень рад, если помогу вам создании кнопок «поделиться» для вашего сайта Drupal 8. Если вам была полезна данная статья, поставьте лайк или напишите комментарии, если вам есть что сказать 😉

Для работы с сервисом http://share42.com/ru Вам необходимо сперва получить расширенные права доступа к системе управления сайтом, получить Вы можете их самостоятельно (следуя инструкции по ссылке).

После получения расширенных прав доступа следуйте инструкции:

1. Перейдите в систему управления сайтом, в раздел Настройки — Файлы дизайна.

2. Добавьте подкаталог с названием share42.

3. Откройте данный подкаталог и загрузите туда файлы из архива.

4. Укажите путь до созданной папки и проверьте, отобразится ли содержимое скрипта.

Если Вы увидели содержимое скрипта, значит путь указан правильно.

5. Выберите подходящий тип cms.

6. Скопируйте полученный код.

7. И разместите его его в шаблоне «Главная. Верх» перед закрывающим тегом .

8. После внесения всех изменений нажмите кнопку «Сохранить изменения».

Поздравляем, Вы разместили кнопки социальных сетей на Ваш сайт!

Ссылка на основную публикацию
Статьи c упоминанием слов:

Adblock
detector