Лайфхакер
Лайфхакер
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
Лучшее
Рубрики
Рецепты
Подкасты
Сервисы
Колонки
Рецепты на Масленицу
Новости
Здоровье
Спорт и фитнес
Покупки
Технологии
Отношения
Кино
Реклама
Веб-сервисы
18 мая 2015

Как добавить кнопки социальных сетей на сайт — Uptolike

В рамках постоянной рубрики «Как сделать сайт» редакция Лайфхакера два месяца тестировала сервис Uptolike, предназначенный для простого размещения на сайте социальных кнопок.
Фото автора Alex Ponomar
Alex Ponomar

Как добавить кнопки социальных сетей на сайт — Uptolike

Проблема

Прошло уже пять лет с момента представления Facebook* своего легендарного лайка, и сегодня собственная кнопка — обязательный атрибут для социальных сетей, веб-сервисов и даже мобильных приложений. По личному опыту могу сказать, что составить в ряд даже 3–4 самые популярные соцкнопки — задача не из лёгких для любого неофита, слабо отличающего PHP от JavaScript. А учитывая растущее потребление контента на мобильных устройствах, современному владельцу сайта приходится думать о внешнем виде своего ресурса сразу в трёх разрешениях: на десктопе, планшете и телефоне.

Facebook* снова что-то поменял на своей стороне, и вот что из этого получилось
Facebook* снова что-то поменял на своей стороне, и вот что из этого получилось

Решения

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

Лайфхакер работает на WordPress (мы этого никогда не скрывали), поэтому первым делом мы пошли самым стандартным путём для любого создателя сайта на популярной CMS — обратились к каталогу плагинов. Плагинов для Wordpress оказалось действительно огромное количество, но 99,9% из них не содержали нужных нам функций: гибких настроек, статистики, кнопки «ВКонтакте», в конце концов. История с готовыми плагинами закончилась, когда мы всё-таки запустили один из них и сайт рухнул под зашкаливающей нагрузкой: рисовать кучу кнопок на нашей стороне оказалось непосильной задачей для нашего сервера. Оставалось пойти своим путём и создавать собственный модуль, который бы учитывал все наши особенности.

Плюсы и минусы собственного модуля

Очевидным преимуществом собственного самописного модуля является возможность создать его на 100% таким, каким он нужен нам. Для этого необходим разработчик, причём скорость реализации и качество получившегося решения напрямую зависят от квалификации. Хороший специалист обходится дорого, а плохих у нас в штате нет. В результате ключевой сотрудник из разработки в ущерб прочим задачам создаёт полностью удовлетворяющее решение.

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

А потом наступает тот самый момент, и одна из социальных сетей опять что-то меняет на своей стороне. Снова проблемы, снова трата времени на доработку и исправления. Это может происходить редко, а может и часто. Поддержка стала ещё одним съедающим время фактором, что негативно сказывается на всех прочих направлениях разработки. Желание снизить затраты на поддержку неизбежно подводит к сторонним готовым решениям, каковым в нашем случае стал сервис Uptolike. Нам не пришлось его искать. Ребята сами на нас вышли и предложили попробовать их продукт. Так началось тестирование Uptolike на Лайфхакере.

Плюсы и минусы Uptolike

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

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

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

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

Uptolike
Uptolike
Uptolike

Перспектива

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

Тратить время и деньги на собственную разработку и поддержку может далеко не каждый владелец сайта. И далеко не каждому это нужно. Качественное решение «из коробки» закроет вопрос с социальной активностью на сайте быстро и с минимальными затратами. Если вы ещё не нашли подходящий продукт, то вы точно должны попробовать Uptolike.

Uptolike

*Деятельность Meta Platforms Inc. и принадлежащих ей социальных сетей Facebook и Instagram запрещена на территории РФ.

Если нашли ошибку, выделите текст и нажмите Ctrl + Enter

Лучшие предложения

3D-принтер для большой печати Creality Ender-5 Max

Надо брать: 3D-принтер для большой печати Creality Ender-5 Max со скидкой 56%

Моющий пылесос Dreame G10 Pro

Популярный моющий пылесос Dreame G10 Pro отдают за полцены на AliExpress

Забираем дебетовку «Т-банка» с 2 000 баллов и повышенным кешбэком на автоуслуги

Забираем дебетовку «Т-банка» с 2 000 баллов и повышенным кешбэком за автоуслуги

Непромокаемые кроссовки от Li-Ning

Кроссовки от Li-Ning, которые не боятся слякоти, отдают со скидкой 37%

Три необычных продукта, которые точно стоит попробовать во «ВкусВилле»

Три необычных продукта, которые точно стоит попробовать во «ВкусВилле»

Находки AliExpress: самые интересные и полезные товары недели

Находки AliExpress: самые интересные и полезные товары недели

Нескользящий коврик для йоги

Нескользящий коврик для йоги, на который можно залипнуть после тренировки

7 надёжных камер для безопасности людей и питомцев

7 надёжных камер для безопасности людей и питомцев

Это интересно
3 настолки, которые можно подарить на любой праздник

3 настолки, которые можно подарить на любой праздник

С 1 февраля в России проиндексировано более 40 видов социальных выплат

С 1 февраля в России проиндексировано более 40 видов социальных выплат

Молодёжные центры: почему это удобно и что о них нужно знать

Молодёжные центры: почему это удобно и что о них нужно знать

Культурный челлендж: 6 способов получить новые впечатления в этом году

Культурный челлендж: 6 способов получить новые впечатления в этом году

Комментарии
alkolisnychenko
18.05.15 18:47
Пользуюсь этим сервисом на своем сайте, все супер и статистика удобная, но, как и для всех остальных внешних сервисов, актуальна проблема скорости загрузки сайта: через developers.google.com/speed/pagespeed/insights/?hl=ru скорость загрузки упала на 2-3 пункта.
Елена Торшина
19.05.15 12:05
А можете сказать, на какие именно пункты, относящиеся к Uptolike, у вас ругается pagespeed?
alkolisnychenko
19.05.15 13:33
Суть не в пунктах (здесь ничего не прибавилось)... общеизвестный факт, что внешние сервисы больше грузят сайт чем родные. Но опять таки, это не камень в огород сервиса, ведь у них все отлично, а падение на 2-3 пункта из 100 - это не много (критично лишь для сайтов, которые за каждый балл оптимизируют картинки, переписывают коды и т.д.).
Елена Торшина
19.05.15 13:55
А вы кстати мобильные кнопки с кнопками мессенджеров юзаете тоже? http://uptolike.ru/news
alkolisnychenko
20.05.15 12:07
У меня этот сервис стоял еще до возможности устанавливать мобильные кнопки... На планшетах подключилось само, на мобильных все по старому. Как по мне - для планшетов ну сильно большие. Это мое мнение, у меня Samsung Galaxy Note 10.1
Олег Вайнер
18.10.15 18:48
"Лайфхакер работает на WordPress (мы этого никогда не скрывали)" Вордпресс имеет админку, как СМС. Бесплатные сервисы не дают админку, с этого и начинать нужно. Да и врядли у вас чистый ворпрес. Кастоматизации непочатый край. ♐
Алексей Пономарь
18.10.15 21:40
У нас чистый вордпресс ¯_(ツ)_/¯
Slava Gerchicov
20.10.15 20:55
мило, вы меня вдохновили - решил тоже добавить на свой сайт, только не этот плагин а BuddyPress - добавляет пользователям профили
Janis Freimann
03.05.16 14:50
Интересно узнать, а можно ли где-нибудь достать плагин кнопок поделиться, который используется здесь, на лайфхакере?)) Пока что самые удобные кнопки, которые мне встречались, особенно мобильная версия.
Алексей Пономарь
03.05.16 15:07
Это кастомная разработка на базе сапегинского скрипта.
Что вы могли пропустить
Apple анонсировала мартовскую презентацию — на ней могут представить недорогой MacBook и iPhone 17e
Apple анонсировала мартовскую презентацию — на ней могут представить недорогой MacBook и iPhone 17e
0
Вчера
Новости
Устройства
8 способов подключить телефон к телевизору
8 способов подключить телефон к телевизору
0
Вчера
Ликбез
Устройства
Названы устройства Xiaomi, Redmi и Poco, которые получат Android 17 — в списке более 70 моделей
Названы устройства Xiaomi, Redmi и Poco, которые получат Android 17 — в списке более 70 моделей
0
Вчера
Android
Новости
Как полностью удалить файлы на iPhone
Как полностью удалить файлы на iPhone
0
15 февраля
iOS
Ликбез
В Microsoft назвали точные сроки, когда ИИ сможет заменить офисных сотрудников — скоро
В Microsoft назвали точные сроки, когда ИИ сможет заменить офисных сотрудников — скоро
0
14 февраля
Новости
Технологии
Samsung Galaxy S26 и S26+ показали на фото со всех сторон
Samsung Galaxy S26 и S26+ показали на фото со всех сторон
0
14 февраля
Новости
Устройства
Как скачать видео с любого сайта без дополнительных программ: 10 универсальных сервисов
Как скачать видео с любого сайта без дополнительных программ: 10 универсальных сервисов
0
14 февраля
Веб-сервисы
Ликбез
Бюджетный iPhone 17e показали на рендерах — его могут выпустить в феврале
Бюджетный iPhone 17e показали на рендерах — его могут выпустить в феврале
0
13 февраля
Новости
Устройства
Дублинский стартап создал «парктроник» с ИИ для велосипедистов
Дублинский стартап создал «парктроник» с ИИ для велосипедистов
0
13 февраля
Новости
Устройства
Sony впервые за три года выпустила флагманские TWS‑наушники
Sony впервые за три года выпустила флагманские TWS‑наушники
0
13 февраля
Новости
Устройства
Как сделать парное фото на 14 февраля с кем угодно: 20 промптов
Как сделать парное фото на 14 февраля с кем угодно: 20 промптов
0
13 февраля
Ликбез
Технологии
В Сети вирусится бой Тома Круза и Брэда Питта — это ролик нейросети Seedance 2.0, удивившей даже кинематографистов
В Сети вирусится бой Тома Круза и Брэда Питта — это ролик нейросети Seedance 2.0, удивившей даже кинематографистов
0
13 февраля
Новости
Технологии
В пару кликов: как удалить тяжёлые письма в Gmail и освободить место на «Google Диске»
В пару кликов: как удалить тяжёлые письма в Gmail и освободить место на «Google Диске»
0
12 февраля
Технологии
Технологии
Xiaomi выпустила бюджетный аналог AirTag, который работает с сетями Apple и Google
Xiaomi выпустила бюджетный аналог AirTag, который работает с сетями Apple и Google
0
12 февраля
Новости
Устройства
«Белый список» сайтов и приложений в России: что в него входит и как пользоваться
«Белый список» сайтов и приложений в России: что в него входит и как пользоваться
0
12 февраля
Ликбез
Технологии

Новые комментарии

Аватар автора комментария
Александр Деренштейн20 минут назад

0 / 0

Здоровые люди при разнообразном питании.А какой это процент населения?
Почему люди пьют БАДы, даже если знают, что это не помогает: разбираемся с диетологом Александром Бурлаковым
Аватар автора комментария
Horugvi35 минут назад

0 / 0

Пистолетом тоже можно гвозди забивать.
Почему раздевать людей на фото с помощью ИИ как минимум неэтично, как максимум — незаконно
Аватар автора комментария
Nelly Bezz56 минут назад

0 / 0

Может, надо горячей водой(соусом) заливать, а не холодной?
Гнёзда из макарон с фаршем в духовке
Аватар автора комментария
Виктор Подволоцкий59 минут назад

0 / 0

Вопрос в людях, ИИ - лишь инструмент. Молотком знаете тоже можно гвоздь забить, а можно голову пробить.
Почему раздевать людей на фото с помощью ИИ как минимум неэтично, как максимум — незаконно
Что такое «Велгия» и «Велгия Эко» и как они работают

Что такое «Велгия» и «Велгия Эко» и как они работают

Лайфхакер
Информация
О проектеРубрикиРекламаРедакцияВакансииДля начинающих авторовО компании
Подписка
TelegramВКонтактеTwitterViberYouTubeИнициалRSS
Правила
Пользовательское соглашениеПолитика обработки персональных данныхПравила применения рекомендательных технологийПравила сообществаСогласие на обработку персональных данныхСогласие для рекламных рассылокСогласие для информационной программы
18+Копирование материалов запрещено.
Издание может получать комиссию от покупки товаров, представленных в публикациях