W jaki sposób zaimplementować asynchroniczne ładowanie przycisku Facebooka?
Na niemal każdej stronie internetowej lub blogu spotykamy przyciski umożliwiające polubienie, udostępnienie treści lub śledzenie profilu na Facebooku. To standardowy element interfejsu użytkownika.
Jak zapewne wiesz, standardowy kod Facebooka, odpowiedzialny za wyświetlanie tych przycisków, wczytywany jest synchronicznie razem z innymi zasobami strony.
Takie podejście wydłuża czas potrzebny na załadowanie strony, co negatywnie wpływa na pozycję w wynikach wyszukiwania (SEO) i obniża komfort użytkownika.
Choć przyciski udostępniania na Facebooku są istotne, nie powinny być priorytetem podczas ładowania strony. Wiele stron internetowych i blogów ma problem z długim czasem ładowania, właśnie przez domyślny kod Facebooka.
Wykorzystanie asynchronicznego ładowania kodu Facebooka przyspieszy wczytywanie strony o 0,5 do 1,5 sekundy. To znacząca poprawa, która pozwoli szybciej wyświetlić przycisk „Lubię to”, „Udostępnij” czy „Śledź”.
Poniżej przedstawiam kod, który uzyskałem od Facebook Developers dla przycisków „Lubię to” i „Udostępnij” dla newsblog.pl.com:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Teraz wystarczy dodać jedną linijkę kodu, aby przyciski ładowały się szybciej:
js.async=true;
Zmodyfikowany kod wygląda następująco:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=xxxxxxxxxx&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Prawda, że to proste?
Aktualizacja: Nowe fragmenty kodu dostarczane przez Facebook nie wymagają powyższej modyfikacji, ponieważ zawierają już skrypt działający asynchronicznie, co widać poniżej:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="JekfmCeX"></script>
Używasz WordPressa? Przeczytaj ten artykuł, który wyjaśnia, jak zoptymalizować wydajność bez użycia wtyczek. Jeśli poszukujesz wtyczki do obsługi mediów społecznościowych, która nie spowalnia strony, gorąco polecam Novashare.
Z pewnością zależy Ci na tym, aby Twoja strona ładowała się szybko, mam nadzieję, że te informacje będą pomocne.
Spodobał Ci się ten artykuł? Podziel się nim ze swoimi znajomymi!