Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Создайте свой дайджест и делитесь лучшим контентом с подписчиками
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
32
Битрикс24

Битрикс24

www.bitrix24.ru

23
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

13
WebResidentTeam

WebResidentTeam

webresident.agency

13
Логомашина

Логомашина

logomachine.ru

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

11
Reader

Reader

Интернет-журнал о современных технологиях.

9
ADN Digital Studio

ADN Digital Studio

adn.agency

9
Aword

Aword

Приложение для изучения английских слов

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

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

2 806 8 В избранное Сохранено
Авторизуйтесь
Вход с паролем
В статье рассмотрены готовые решения и показан способ создания собственных быстрых и красивых социальных кнопок.

Готовые решения социальных кнопок

Когда мы начинали делать наш продукт, мы серьезно не задумывались по поводу шаринг-кнопок на сайт. Просто взяли готовые сервисы и добавили на страницы:

Но со временем мы заметили, что с ними не все так гладко. А именно:

  • лишний трафик
  • не всегда корректно работает через ajax
  • реклама
  • долго загружаются или не загружаются вообще
  • поедают память браузера, особенно когда контент постоянно обновляется через ajax

Поэтому мы стали искать другие варианты предоставления пользователям поделиться нашей ссылкой в социальных сетях.

На github есть много готовых решений, например:

По сути, мы могли на этом остановиться, но было решено сделать свой вариант, так как нам всего лишь надо 5 различных шаринг-кнопок (VK, Facebook, Twitter, Google+, LinkedIn + отправка на электронную почту) без каких-либо наворотов. Как известно, хочешь сделать хорошо - сделай сам.

Создание собственных кнопок

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

Так же можно воспользоваться готовыми элементами, например для bootstrap - http://lipis.github.io/bootstrap-social/ который использует Font Awesome (Font Awesome сам по себе очень большой, по этому если Вам надо только определенные иконки, то советуем выбрать только те которые нужны через http://fontello.com/)

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

http://www.cubecamp.ru/articles/share/cubecamp.html

Статистика и выводы

  • Addthis - примерно 11 запросов на сервис и примерно 200кб трафика (с кешем примерно 2.6кб)
  • Pluso - примерно 9 запросов на сервис и примерно 45кб трафика (с кешем примерно 1.4кб)
  • Собственное решение - 3.5кб сам скрипт (с кешем примерно 200б) + иконки на ваше усмотрение

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

P.S. Список ссылок на шаринг самых популярных социальных сетей, для тех кому лень искать:

+5
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Первые Новые Популярные
Andrey Petrosyan
социальных КПОНОК…….поправьте друзья
Ответить
CubeCamp
Создайте свой дайджест и делитесь лучшим контентом с подписчиками
Александр Дударев
и правда, спасибо!
Ответить
Supl.biz
Электронная торговая площадка
Алексей Красноперов
Из тех же соображений сделали на собственные кнопки на supl.biz
Ответить
Андрей Гуртовой
class="btn btn-social-icon btn-sm btn-twitter"……… Class="ccon-twitter

нафига миллион классов на два элемента? В идеале можно вообще одним элементом обойтись. С :after { content: ''; }
Ответить
CubeCamp
Создайте свой дайджест и делитесь лучшим контентом с подписчиками
Александр Дударев
потому что они не только для этих кнопок могут использоваться, стандартный бутстрап. Или вы для каждой кнопки другого цвета свой класс делать будете с одним измененным аттрибутом "background-color"? Впрочем, цсс тут вообще не особо относится к теме.
Ответить
Андрей Гуртовой
Вы предлагаете заюзать ваши кнопули, НО! Если я не использую в своём сайте бутстрап, вы предлагаете сделать это?
А скриптик приятный. Утянул себе для переделок )
Ответить
CubeCamp
Создайте свой дайджест и делитесь лучшим контентом с подписчиками
Александр Дударев
Нет конечно, зачем. Они ведь и без этих классов работать будут — обязательные классы только те, которые jQuery ловит в фукциях. Рад что вам помогла статья
Ответить
Алексей
Есть ли ссылка для того чтоб отправить в группу на одноклассниках? Приведенный выше пример позволяет делиться содержимым на своей странице в одноклассниках. Можно ли делиться содержимым также на странице группы в одноклассниках?
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать