Кнопка Fasebook на страницы WordPress без плагина

5 (100%) 6 vote[s]

Кнопка Fasebook без плагина устанавливается на все страницы сайта довольно-таки просто. Смысл такой затеи — возможность манипулировать с внешним видом и, самое главное, — возможность отключить её на маленьких экранах. Зачем? Всё в скорости загрузки страницы. Скрипты Фейсбука наглухо блокируют загрузку страниц, что отражается кошмарными результатами при проверке скорости загрузки страниц в сервисе Google PageSpeed Insights. Причём асинхронная загрузка (asinc) или отложенная (defer), мягко говоря, до лампочки.

До этого на этом сайте использовалась кнопка Fasebook при помощи плагина (не будем уточнять). Нужно было на Developer.Fasebook создавать приложение, получать его ID, вводить его в плагин и много других головоломок. Как результат — помимо имеющихся проблем со скоростью загрузки (которые Google не утомляется придумывать с упрямой регулярностью), появилась «вечная проблема» огромной «гири» в виде этой самой кнопки. Чтобы её не удалять (все-таки вещь нужная на сайте), решено было полностью переопределить подход к решению вопроса.

Задача заключается в следующем:

    • кнопка Fasebook должна работать на всех страницах и показывать лайки именно для каждой отдельной страницы;
    • кнопка Fasebook на маленьких экранах с разрешением менее 480px должна быть отключена (т.е. она вообще должна отсутствовать: скрипты не подгружаются, кнопка не отображается).

Наперед отметим, что для компьютеров кнопка не сказывается особо на скорости загрузки, а вот смартфоны «виснут». После реализации этого метода результат ощутимый: скорость загрузки мобильной версии увеличилась на 15%.

Кнопка Fasebook: получаем код

Шаг 1:

Заходим на страницу разработчика Фейсбук, а именно «кнопка Fasebook Нравится«.

Кнопка Fasebook сайт

Настройки конфигурации здесь простенькие: вводим адрес сайта (адреса отдельных страниц мы будем добавлять позже), выбираем композицию (какой вариант кнопки будет отображаться: нажимаете — внизу сразу предпросмотр), тип действия, добавляем кнопку «Поделиться». Параметр «Width» пропишем вручную в полученном коде потом.

Затем жмём ниже кнопку «Получить код», появляется окно:

Кнопка Fasebook код

Шаг 2.

Копируем оба кода и вставляем в любой редактор (например, Notepad++).

Редактируем код, вставляем в шаблон сайта

Шаг 1.

Отредактируем первый код, а именно строку JavaScript так, чтобы она загружалась только при определённых условиях. В нашем случае — это проверка ширины отображаемой области (точнее — именно ширина окна браузера, но не физическая ширина экрана девайса). Для этого записываем строку в виде конструктора:

<!--Исходный код: -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v5.0"></script>

<!--Код в виде конструктора с добавлением условий: -->
<script>
	var windowWidth = document.documentElement.clientWidth; // проверяем ширину окна браузера
	var myDiv = document.getElementById('fb_btn'); // выбираем элемент по id куда будем записывать script
	if ( windowWidth > 480 ) {
		var elem = document.createElement('script'); //создали тег script
		elem.async = true; //добавляем атрибуты
		elem.defer = true;
		elem.crossorigin = 'anonymous';
	 	elem.src = 'https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v5.0'; // вписываем адрес из полученного кода
		myDiv.appendChild(elem); //вставили в тег с идентификатором fb_btn
	}
</script>	

Шаг 2

Теперь редактируем второй скопированный код кнопки. Оборачиваем его в тег div с идентификатором fb_btn, сразу запишем стили для позиционирования кнопки, и, самое главное, добавляем в строку с адресом сайта код PHP, который будет получать адрес текущей страницы (это как раз и нужно сделать для того, чтобы выводились лайки для каждой отдельной страницы/записи). Для этого используем  $_SERVER[‘REQUEST_URI’]; . Добавляем (или меняем) значение data-width как нужно на вашей странице:

<!--Вместо https://babulya.com.ua вставьте адрес вашего сайта -->
<div id="socialbar" style="display: block;text-align: center;">
<div class="fb-like" data-href="https://www.babulya.com.ua<?php echo $_SERVER['REQUEST_URI']; ?>" data-width="350" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
</div>

Шаг 3.

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

Код для вставки (комментарии потом можно удалить и минифицировать):

<!-- FASEBOOK -->
<style>
@media screen and (max-width:480px) {
 #fb_btn {
  display:none;
 }
}
</style>
<!--Вместо https://babulya.com.ua вставьте адрес вашего сайта -->
<div id="fb_btn" style="display: block;text-align: center;">
<div class="fb-like" data-href="https://www.babulya.com.ua<?php echo $_SERVER['REQUEST_URI']; ?>" data-width="350" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
</div>
<!--Код в виде конструктора с добавлением условий: -->
<script>
	var windowWidth = document.documentElement.clientWidth; // проверяем ширину окна браузера
	var myDiv = document.getElementById('fb_btn'); // выбираем элемент по id куда будем записывать script
	if ( windowWidth > 480 ) {
		var elem = document.createElement('script'); //создали тег script
		elem.async = true; //добавляем атрибуты
		elem.defer = true;
		elem.crossorigin = 'anonymous';
	 	elem.src = 'https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v5.0'; // вписываем адрес из полученного кода
		myDiv.appendChild(elem); //вставили в тег с идентификатором fb_btn
	}
</script>				
<!-- FASEBOOK -->

Минифицированный код:

<!--FASEBOOK--><style>@media screen and(max-width:480px){#fb_btn{display:none;}}</style><div id="fb_btn"style="display: block;text-align: center;"><div class="fb-like"data-href="https://www.babulya.com.ua<?php echo $_SERVER['REQUEST_URI']; ?>"data-width="350"data-layout="button_count"data-action="like"data-size="small"data-show-faces="false"data-share="true"></div></div><script>var windowWidth=document.documentElement.clientWidth;var myDiv=document.getElementById('fb_btn');if(windowWidth>480){var elem=document.createElement('script');elem.async=true;elem.defer=true;elem.crossorigin='anonymous';elem.src='https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&version=v5.0';myDiv.appendChild(elem);}</script><!--FASEBOOK-->

Демо

Вот пример окна смартфона шириной 377 px
(отобразится только на широких экранах width > 480px).
Как видно, кнопка Fasebook в подвале в области вывода количества просмотров не отображается!
Скрипты не загружаются!

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments
Просмотры: 262

Популярные записи