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

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

Проблема

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

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

Решения

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

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

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

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

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

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

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

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

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

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

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

Перспектива

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

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

Uptolike

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

Это упрощённая версия страницы.

Читать полную версию
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Алексей Пономарь
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
Это кастомная разработка на базе сапегинского скрипта.
Читать все комментарии