Facebook: Кнопки социальных сетей без замедления страницы

Иногда бывает: делаешь как лучше, а становиться как хуже. Так происходит с внедрением социальных сетей на сайт — кнопки «лайка» не так просты, как кажется. Но проще чем Вы думаете. На примере кнопки Facebook

Канонический путь

В документации мы можем выбрать любой вид кнопки — допустим нас не очень интересуют количества (если они незначительны — то лучше вовсе не показывать, а если значительны — то точность 10 туда 10 сюда пользователю не очень важна). Нам нужно просто быстрое добавление в ленту нашей ссылки.

facebook_1

Результат — замедление работы страницы погрузкой мегаскриптов. Обычно таких сетей на сайте от 5 до 10 — и на каждую 100мс при хорошей погоде в сумме дадут явно не лучший опыт пользования сайтом

facebook_2

Хитрый путь

Подсматриваем что именно вызывает наша кнопка — это всего лишь попапчик, с определенной ссылкой… можем ли мы сами сделать это без мегаскриптов? Конечно! Пример кода на этом сайте (для темы WordPress).

https://www.facebook.com/dialog/feed?app_id=номер приложения&display=popup&caption=заголовок&link=полная ссылка, где urlencode позволяет нам не переживать о корректности написания (пробелах, русских буквах и тд)

<header>
	<h1 class="entry-title"><?php the_title(); ?></h1>
	<?php FoundationPress_entry_meta(); ?>
	<a href="https://www.facebook.com/dialog/feed?app_id=145634995501895&display=popup&caption=<?php echo urlencode(the_title());
		?>&link=<?php echo urlencode(get_permalink()); ?>&redirect_uri=<?php echo get_permalink(); ?>" target="_blank">Поделиться через Facebook</a>
</header>

Попап (всплывающее при нажатии маленькое окошко) можно и не делать, но для красоты и полной идентичности возьмем произвольный скрипт из интернета — и все будет отлично

	<a onclick="return dialog_popup(this)"
		href="https://www.facebook.com/dialog/feed?app_id=145634995501895&display=popup&caption=<?php echo urlencode(the_title());
		?>&link=<?php echo urlencode(get_permalink()); ?>&redirect_uri=<?php echo get_permalink(); ?>" target="_blank">Поделиться через Facebook</a>
function dialog_popup(link) {
	var width = 400;
	var height = 400;
	var url = link.href;
	var leftPosition, topPosition;
	leftPosition = (window.screen.width / 2) - ((width / 2) + 10);
	topPosition = (window.screen.height / 2) - ((height / 2) + 50);
	window.open(url, "Window2", "status=no,height=" + height + ",width=" + width + ",resizable=yes,left=" + leftPosition + ",top=" + topPosition + ",screenX=" + leftPosition + ",screenY=" + topPosition + ",toolbar=no,menubar=no,scrollbars=no,location=no,directories=no");
	return false;
}

Оставить комментарий

XHTML: Вы можете использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">