Сегодня я расскажу, как добавить кнопки социальных сетей в свой WordPress блог так, чтобы они не тормозили загрузку и отрисовку страницы. Заранее хочу предупредить, что не являюсь специалистом ни в HTML, ни в JavaScript, ни в Php. Все решения собраны по крупицам на просторах интернета.
Чтобы оказывать меньше влияния на скорость загрузки блога, все скрипты социальных сетей и служебные HTML-элементы вынесены в конец страницы сразу после вызова wp_footer()
.
Для того, чтобы скрипты не влияли на отображение страницы, вся работа с ними происходит только после полной загрузки блога, для этого используется библиотека jQuery, которая присутствует в каждой поставке WordPress, и событие document.onload
.
Таким образом, все скрипты живут в footer.php
после вызова wp_footer()
в таком обрамлении:
Все социальные кнопки у меня используются только в постах, поэтому их HTML-элементы добавлены в single.php
сразу после вызова функции the_content()
.
ВКонтакте
Идем на страницу виджета, где выбираем внешний вид кнопки. У меня получился вот такой код:
Забираем отсюда div, который выглядит так:
И добавляем в single.php.
Для корректной работы кнопки «Мне нравится», необходимо добавить div элемент в footer.php
(перед вызовом jQuery(document).load
):
Код загрузки кнопки в footer.php:
Как вы могли заметить — все данные я взял из предоставленного кода практически без изменений. Все, теперь можно настроить размер кнопки и его отступы в вашем стиле.
Получаем код виджета тут:
И вот такой div:
Добавляем div в single.php
:
Затем специальный div в footer.php
(перед вызовом jQuery(document).load
) для правильной работы кнопки от Facebook:
После этого смотрим свой appId
и добавляем следующий код в footer.php
:
С этим кодом я промучился больше всего.
За кнопкой идем сюда:
Забираем отсюда к себе в single.php
:
И в footer.php:
Самый элементарный код. Один минус — если сайт твиттера недоступен, отображает уродскую ссылку.
Заключение
Все вышеописанные кнопки в single.php
:
Загрузка всех плагинов в footer.php
:
Весь код, приведенный выше добавляет кнопки только в блого-записи. Возможно, вам понадобятся кнопки на всех страницах, для этого нужно исключить проверку is_single()
и добавлять HTML-элементы социальных кнопок не только лишь в single.php
.
И еще один момент: если вы скопируете код отсюда один в один (без замены appId
в Facebook и ВКонтакте), то все лайки будут сыпаться в мою копилку. Мне-то не жалко, но вам от этого никакого толку. (:
P.S. Если вам пригодилась информация из данного поста — пожалуйста, нажмите одну из социальных кнопок ниже.
UPD: Пришел к выводу, что загрузка кода с сайтов социальных сетей неоптимальна. На эту тему мой новый пост: «Добавляем Social Likes на сайт с WordPress».