Jak wstawić Facebook page plugin na stronę? Instrukcja dodawania Facebook like box!

Profil na Facebooku pomaga budować zaangażowaną społeczność, ułatwia komunikację z fanami. Wspiera proces generowania konwersji, podtrzymuje zaufanie, pozwala chwalić się sukcesami. Służy także do pokazania ludzkiego obrazu firmy, marki, brandu. By zwiększyć skuteczność działań prowadzonych w social media, warto poinformować o nim użytkowników swojego serwisu, sklepu internetowego lub bloga i zachęcić do polubienia fanpage’a. W tym celu najlepiej wdrożyć widget Facebook na stronę internetową. Do dyspozycji jest wiele darmowych oraz płatnych wtyczek, jednak mogą one znacząco obciążać wydajność witryny. Zdecydowanie lepiej zainstalować Facebook widget HTML, posiłkując się informacjami z oficjalnego supportu FB, co pokażę w poniższym wpisie.

Facebook like box = Facebook Page Plugin

Support Facebooka udostępnia dokumentację pozwalającą na wdrożenie na stronie internetowej m.in. takich widgetów jak:

• Komentarze,
• Przycisk Lubię to!
• Przycisk Udostępnij
• Osadzanie postów, wideo i komentarzy oraz oczywiście
• Page plugin, czyli wtyczkę Facebooka do polubienia fanpage’a.

Do 2015 r. funkcjonował jeszcze Facebook like box, który został zastąpiony przez Page Plugin. Następca posiada takie same funkcjonalności, a wprowadzone zmiany dotyczą głównie warstwy wizualnej, zniknęło również wsparcie dla like boxa na stronie supportu. Wspominam o tym czysto informacyjnie, abyś wiedział, że nie znajdziesz oficjalnej dokumentacji, a jedyną wspieraną wtyczką jest Page Plugin.

Jak wkleić wtyczkę Facebooka na stronę? Instrukcja instalacji Page Plugin krok po kroku

Support FB dostępny jest w języku angielskim, jednak stosowane słownictwo pochodzi ze standardowego technicznego żargonu; da się zrozumieć :). Specyfikacje dot. wtyczek znajdują się pod adresem: https://developers.facebook.com/docs/plugins/page-plugin.

Podstawowe ustawienia Facebook widget

Wklej adres swojego fanpage’a, ustaw szerokość (min. 180, maks. 500 px) i wysokość (min. 70 px), jeśli zależy Ci, aby widget miał konkretne wymiary. Następnie wybierz elementy, które mają pojawić się po wdrożeniu wtyczki:

• Zdjęcie w tle,
• Mały nagłówek prezentujący zdjęcie w tle,
• Zdjęcia profilowe osób, które już polubiły Twoją stronę na Facebooku,
• Zakładki z informacjami pochodzącymi z fanpage’a, np. wydarzenia, oś czasu oraz pole umożliwiające wysłanie wiadomości,
• Opcję dopasowania wtyczki FB do dostępnej powierzchni na Twojej stronie.

Pod checkboxami w czasie rzeczywistym podpatrzymy, jak posty z Facebooka na WordPressie, Bloggerze, Drupalu czy innej platformie do zarządzania treścią zaprezentują się po wdrożeniu kodu na stronie. Dzięki temu przed dokonaniem instalacji możemy sprawdzić, czy wygląd wtyczki nam odpowiada.

Specjalnie dla Ciebie zamiast screenów przygotowałam wideo z szybką instrukcją podstawowej konfiguracji Facebook plugin.

Jak już wspomniałam, support dostępny jest w j. angielskim i taki też język pojawia się na poszczególnych przyciskach i elementach widgetu w podglądzie. O nic się jednak nie martw. Podczas generowania kodu do wklejenia na stronę automatycznie przypisana zostanie odpowiednia, w naszym przypadku polska wersja językowa.

Umieszczenie Facebook page wigdet w kodzie strony

Po kliknięciu niebieskiego przycisku Get code wygenerowany zostanie kod HTML gotowy do wrzucenia na naszą stronę internetową. Mamy dwie możliwości:

• JavaScript JDK – wymaga zaimplementowania dwóch kodów – jeden wrzuca się na początku sekcji < body >, drugi w miejscu, gdzie chcemy, aby pojawił się plugin,
• Pływająca ramka – kod dodajemy tylko tam, gdzie powinna wyświetlić się wtyczka.

Polecam wybór drugiej metody ze względu na jej większą prostotę. Po zamieszczeniu iframe na witrynie warto sprawdzić, czy wyświetla się poprawnie zarówno na desktopie, jak i urządzeniach mobilnych.

Dodatkowe opcje konfiguracji wtyczki FB

Oprócz podstawowych ustawień facebookowy support prezentuje kilkanaście dodatkowych opcji skonfigurowania widgetu. Większość z nich należy określić poprzez zmianę poszczególnych parametrów w wygenerowanym kodzie HTML. Opisy i przykłady poszczególnych funkcji znajdziesz w sekcji Settings: https://developers.facebook.com/docs/plugins/page-plugin#settings.

Umieszczenie FB widget wcale nie jest trudne!

Przez jakiś czas na swojej stronie korzystałam z darmowej wtyczki pozwalającej na dodanie do strony zarówno facebookowego feeda, jak i like page. Niby wszystko działało OK, ale po zmianie wyglądu bloga postawiłam na minimalizm w zewnętrznych dodatkach. Zbyt duża liczba pluginów w witrynie powoduje problemy z czasem ładowania, stanowi także zagrożenie z punktu widzenia bezpieczeństwa (ataki hakerskie często zdarzają się za pośrednictwem nieszczelnych widgetów). Skonfigurowanie i zaimplementowanie kodu HTML FB nie wymaga większych umiejętności programistycznych, dlatego warto moim zadaniem skorzystać z tego rozwiązania, by pozbyć się zbędnych wtyczek!