n-wp.ru — блог о WordPress
Кнопки социальных закладок и сервисов с индивидуальным оформлением | n-wp.ru

Кнопки социальных закладок и сервисов с индивидуальным оформлением

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

Оптимизируя блог, я обратил внимание на то, что самым узким местом при загрузке страниц являются социальные кнопки: время отклика с серверов Facebook, Twitter, Google, Вконтакте и прочих довольно большое, и оно влияет на скорость загрузки страницы, увеличивая ее в два-три раза. Чем больше вы устанавливаете социальных кнопок, использующих рекомендуемый разработчиками код, тем больше обращений уходит к внешним источникам. Конечно, придуман асинхронный код, который как бы не должен замедлять время загрузки страниц, но все же большинство социальных кнопок основательно тормозит загрузку страниц блога.

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

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

Кнопки социальных закладок и сервисов с индивидуальным оформлением

Пример оформления социальной кнопки:

Все коды кнопок устанавливаются в файл single.php используемой вами темы, код CSS — в файл style.css.

Количество скриптов, загружаемых с внешних источников, сократилось с 15 до 2, да и те грузятся только в случае открытия внешней ссылки, ведущей на социальный сервис, время загрузки страницы только за счет отказа от кнопок, рекомендуемых разработчиками, в среднем сократилось примерно с 2.8 секунд до 0.6 секунд.

tiaurus

Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Комментировать

/* ]]> */