Jak dodać Facebook Like Box / Fan Box w WordPress

Ciężko pracowałeś, aby zbudować grono obserwujących na Facebooku, ale odwiedzający Twoją witrynę internetową nie nawiązują kontaktu z Twoją stroną. Frustrujące, prawda?

Wpisz Facebook Like Box: potężne narzędzie, które może wypełnić tę lukę i zwiększyć twoją obecność w mediach społecznościowych bezpośrednio z witryny WordPress.

Jako właściciel witryny internetowej znasz wartość dowodu społecznego. Dobrze umieszczony Like Box może zapewnić odwiedzającym natychmiastowy sposób na zaangażowanie się w twoją markę na Facebooku bez opuszczania witryny.

W tym przewodniku pokażemy ci dwie proste metody dodania Facebook Like Box do twojej witryny WordPress: przyjazną dla początkujących wtyczkę i rozwiązanie kodowe.

Dlaczego warto dodać Facebook Like Box na twojej witrynie internetowej WordPress?

Dodanie Facebook Like Box do twojej witryny internetowej WordPress ma kilka wspaniałych zalet.

Po pierwsze, pomaga zaangażować ludzi, umożliwiając im łatwe polubienie Twojej strony fanowskiej lub biznesowej na Facebooku. Oznacza to, że twoje wpisy pojawią się na ich kanale na Facebooku, dzięki czemu możesz docierać do ludzi poza witryną internetową.

Ponadto pole „Lubię to” na stronie na Facebooku pokazuje, ile osób polubiło twoją stronę na Facebooku. Może to działać jako dowód społeczny i zachęcać więcej odwiedzających do kliknięcia „Lubię to”.

Ten poradnik pokaże ci dwa sposoby na dodanie Facebook Like Box: jeden za pomocą wtyczki społecznościowej, a drugi za pomocą kodu. Możesz skorzystać z poniższych odnośników, aby poruszać się po naszym artykule:

Metoda 1: Dodanie Facebook Like Box za pomocą wtyczki (dla początkujących)

Ta pierwsza metoda jest najłatwiejszym i zalecanym sposobem dla początkujących, aby dodać Facebook Like Box do swoich witryn. Pozwoli to również na wyświetlanie Twojego kanału na Facebooku na witrynie internetowej, jeśli chcesz.

Ta metoda wykorzystuje Smash Balloon, który jest przyjazną dla użytkownika wtyczką WordPress, która pozwala osadzać różne kanały mediów społecznościowych w WordPress, wraz z Like Box.

Na potrzeby tego poradnika możesz skorzystać z darmowej wtyczki Smash Balloon Social Post feed. Jeśli jednak chcesz uzyskać więcej funkcji poza Like Box (takich jak wyświetlanie filmów, zdjęć i wydarzeń), zalecamy uaktualnienie do wersji Pro.

Konfiguracja wtyczki Smash Balloon Facebook Feed

Najpierw należy zainstalować wtyczkę WordPress w obszarze administracyjnym. Następnie przejdź do Facebook Feed ” All Feeds i kliknij „Utwórz nowy”.

Teraz wybierz rodzaj kanału „Oś czasu”.

Następnie kliknij przycisk „Dalej”.

Na tym etapie będziesz musiał połączyć twoją stronę na Facebooku z witryną internetową WordPress.

W tym celu należy kliknąć przycisk „Utwórz nowy”.

Smash Balloon przekieruje cię do nowego ekranu.

Tutaj wystarczy wybrać „Strona” jako rodzaj źródła, a następnie kliknąć „Połącz z Facebookiem”.

Teraz musisz logować się na twoje konto na Facebooku.

Następnie wybierz strony, dla których chcesz wyświetlać Like Box na swoim blogu lub witrynie internetowej WordPress. Następnie kliknij „Dalej”.

Zobaczysz teraz ustawienia uprawnień Smash Balloon. Zalecamy włączenie ich wszystkich, aby upewnić się, że wszystko działa dobrze.

Teraz kliknij przycisk „Gotowe”.

Ostatnie wyskakujące okienko po prostu potwierdzi, że udało ci się pomyślnie powiązać Smash Balloon z Facebookiem.

Wystarczy kliknąć „OK”, aby kontynuować.

Smash Balloon przekieruje cię teraz do obszaru administracyjnego, gdzie musisz wybrać stronę na Facebooku, która będzie używana na twojej osi czasu.

Wystarczy wybrać stronę i kliknąć „Dodaj”.

Strona Facebooka, z którą właśnie się połączyłeś, będzie teraz widoczna jako źródło na stronie wtyczki Smash Balloon.

Po prostu wybierz tę opcję i kliknij „Dalej”.

Dostosuj własne pole Like Box na Facebooku

Na tym etapie Smash Balloon przeniesie cię do edytora Facebook Feed.

Pierwszym krokiem jest kliknięcie opcji „Układ kanałów” nad opcją schematu kolorów.

Wystarczy przewinąć w dół do sekcji „Liczba wpisów”.

Następnie ustaw liczbę zarówno dla komputerów stacjonarnych, jak i urządzeń mobilnych na 0. Spowoduje to usuwanie wyświetlania wszystkich twoich ostatnich wpisów i wyświetlanie w kanale tylko pola Lubię to.

Alternatywnie, jeśli chcesz również wyświetlać swój kanał na Facebooku wraz z Like Boxem, możesz skorzystać z naszego poradnika na temat tworzenia własnego kanału na Facebooku w WordPress.

Teraz wróć na górę.

Następnie kliknij „Dostosuj”, aby powrócić do strony edytora kanałów.

Na tym etapie możesz usuwać nagłówek Twojego kanału na Facebooku.

To, co musisz zrobić, to przejść do części „Sekcje” i wybrać „Nagłówek”.

Ustawienie Nagłówek określa wygląd nagłówka Twojego kanału na Facebooku.

Ale w tym przypadku musisz go ukryć, więc po prostu wyłącz przełącznik „Włącz”.

Wróćmy teraz do głównej strony edytora kanałów i otwórzmy ustawienie „Like Box”. Następnie wystarczy włączyć funkcję „Like Box”.

Na tej stronie można również dostosować rozmiar, położenie, wyświetlanie zdjęcia na okładce, własną szerokość, własny tekst wezwania do działania itp.

Gdy to zrobisz, naciśnij przycisk „Zapisz” w prawym górnym rogu.

Osadzanie Facebook Like Box na twojej stronie lub wpisie na WordPressie

Na tym etapie możesz wyświetlić Facebook Like Box na stronie lub w obszarze gotowym na widżet, takim jak panel boczny.

Aby to zrobić, kliknij „Osadzaj” w prawym górnym rogu. Teraz pojawi się wyskakujące okienko „Osadzaj kanał”, dające dwie opcje wyświetlania Like Boxa.

Jednym z nich jest użycie krótkiego kodu, a drugim bezpośrednie dodanie go do strony lub obszaru gotowego na widżet. Druga opcja jest znacznie łatwiejsza, więc najpierw pokażemy tę metodę.

Jeśli chcesz dodać Like Box do konkretnej strony, kliknij przycisk „Dodaj do strony”.

Teraz wystarczy wybrać stronę, do której ma zostać dodana funkcja i kliknąć „Dodaj”.

Przejdziesz teraz do edytora bloków Gutenberg.

Przejdź dalej i kliknij przycisk „+ Dodaj blok”, zgodnie z instrukcjami Smash Balloon.

Po otwarciu biblioteki bloków wybierak należy znaleźć blok Facebook Feed.

Następnie wystarczy przeciągnąć i upuścić go w dowolnym miejscu na stronie.

W bloku wybierz kanał Facebooka z utworzonym wcześniej Like Boxem.

Blok wyświetli następnie pole Like Box.

Ale co jeśli masz wiele stron na Facebooku i skonfigurowałeś Like Box dla każdej z nich za pomocą Smash Balloon?

Można również przełączać się między nimi na panelu bocznym ustawień bloków, wybierając kanał z menu rozwijanego „Wybierz kanał”.

Wszystko, co musisz teraz zrobić, to kliknąć przycisk „Aktualizuj”, aby zmiany stały się oficjalne.

Oto jak wygląda nasz Like Box na naszej witrynie demonstracyjnej:

Jeśli korzystasz z blokowego motywu WordPress, możesz również użyć Edytora całej witryny, aby dodać blok Facebook Like Box do szablonów stron twojego motywu.

Aby uzyskać więcej informacji na temat edytora pełnych witryn, przeczytaj nasz przewodnik dla początkujących.

Osadzanie widżetu Facebook Like Box w WordPressie

Jeśli korzystasz z klasycznego motywu WordPress, możesz chcieć wyświetlić Facebook Like Box w obszarze gotowym na widżet, takim jak panel boczny, nagłówek lub stopka. To świetny sposób na wyświetlenie Like Boxa bez odwracania uwagi użytkowników od głównej treści na stronie.

W wyskakującym okienku Osadzanie kanału wybierz opcję „Dodaj do widżetu”, aby przejść do edytora widżetów opartych na blokach.

Teraz, podobnie jak w poprzedniej metodzie, wystarczy kliknąć przycisk „+ Dodaj blok”, znaleźć blok Facebook Feed i przeciągnąć go na twój wybrany obszar.

Na naszej witrynie demonstracyjnej chcemy użyć Like Box jako panelu bocznego WordPress.

W bloku wybierz Facebook Feed z utworzonym wcześniej Like Boxem.

Następnie kliknij przycisk „Aktualizuj”, aby wprowadzić zmiany.

I gotowe!

Oto jak wygląda panel boczny na naszej witrynie testowej z widżetem Like Box:

Osadzanie widżetu Facebook Like Box za pomocą krótkiego kodu

Jeśli dwie poprzednie metody nie działają, zalecamy dodanie Facebook Like Box lub Fan Box za pomocą krótkiego kodu.

Wystarczy skopiować krótki kod z wyskakującego okienka osadzania kanału i dodać go w dowolnym miejscu na twojej witrynie internetowej.

Aby uzyskać więcej informacji na temat korzystania z krótkich kodów, możesz przeczytać nasz przewodnik na temat dodawania krótkich kodów w WordPress.

Metoda 2: Dodanie pola Lubię to na Facebooku za pomocą kodu

Jeśli jesteś zainteresowany tylko wyświetlaniem Like Boxa bez dodawania innych rodzajów kanałów Facebooka, to korzystanie z wtyczki do strony na Facebooku może wydawać się przesadą. W takim przypadku możesz dodać Like Box za pomocą kodu.

Ta metoda może wydawać się onieśmielająca dla początkujących, ale pokażemy ci niezawodny sposób na wstawienie kodu za pomocą WPCode. Jest to wtyczka WordPress, która ułatwia dodawanie własnych fragmentów kodu do WordPressa bez niszczenia twojej witryny.

Na potrzeby tego przewodnika wystarczy darmowa wersja WPCode, choć można uaktualnić ją do wersji Pro, aby uzyskać zaawansowane funkcje, takie jak tryb testowy i oparta na chmurze biblioteka fragmentów kodu.

Najpierw zainstalujmy wtyczkę w WordPressie. Po jej włączeniu przejdź do ” Fragmenty kodu” +„Dodaj fragment kodu”. Następnie wybierz „Add Your Custom Code (New Snippet)” i kliknij „Use snippet”.

Przejdziesz teraz do edytora kodu. Nadajmy najpierw nazwę twojemu własnemu fragmentowi kodu, abyś mógł go później łatwo zidentyfikować. W tym przypadku nazwiemy go „Facebook JavaScript SDK”, ponieważ właśnie to tutaj dodamy.

Teraz pozostaw tę kartę otwartą i utwórz nową kartę w twojej przeglądarce, aby przejść na stronę Facebook Developers.

W menu kliknij „Zaloguj się”, aby zalogować się na twoje konto na Facebooku.

Jeśli wchodzisz na stronę po raz pierwszy, wypełnij kreator wdrażania, aby utworzyć bezpłatne konto.

Następnie zostaniesz przekierowany do kokpitu Facebook Developers. Kliknijmy przycisk „Utwórz aplikację”.

Na następnej stronie wystarczy wybrać „Inne” dla przypadku użycia.

Następnie kliknij przycisk „Dalej”.

Teraz zobaczysz wszystkie różne aplikacje, które możesz utworzyć dla twojej strony na Facebooku.

Aby utworzyć Like Box, wystarczy wybrać „Biznes”, a następnie kliknąć „Dalej”.

Nadajmy teraz twojemu programowi nazwę. Może to być cokolwiek, ponieważ jest to tylko odniesienie. Możesz również wpisz swój adres e-mail i wybierz opcjonalne konto biznesowe.

Na koniec wystarczy kliknąć „Utwórz aplikację”.

Przejdźmy teraz do strony Facebook Developers dla wtyczek społecznościowych.

Następnie przewiń w dół, aż znajdziesz sekcję, jak na poniższym zrzucie ekranu:

W tym miejscu należy wpisać adres URL twojej strony na Facebooku, opróżnić pole „Karty” i w razie potrzeby określić szerokość i wysokość pola Like Box.

Możesz także wybrać mniejszy nagłówek, wyłączyć zdjęcie na okładkę i nie tylko. Zdecydowaliśmy się również dostosować Like Box do szerokości kontenera, aby jego rozmiar dostosowywał się responsywnie do miejsca, w którym jest umieszczony na witrynie internetowej.

Po zakończeniu kliknij przycisk „Pobierz kod”. Zobaczysz wyskakujące okienko, które pokazuje dwa rodzaje fragmentów kodu: JavaScript SDK i iFrame. Oba wyświetlą twój Like Box, ale ogólnie JavaScript SDK jest znacznie lepszą opcją.

Zestawy JavaScript SDK są zwykle szybsze, ponieważ są osadzane bezpośrednio na stronie internetowej, co pozwala im wczytywać się jako część głównego dokumentu. iFrames wymagają wczytywania całego dokumentu HTML, co może spowolnić czas ładowania strony.

W karcie JavaScript SDK upewnij się, że wybrana została utworzona wcześniej nazwa aplikacji.

Następnie skopiuj kod JavaScript SDK API z kroku 2. Teraz pozostaw tę kartę otwartą, ale przełącz się na kartę WPCode i wklej tam kod.

Fragment kodu można pozostawić jako „HTML Snippet”.

Teraz przewiń w dół do sekcji „Wstaw”.

Metodę wstawienia można pozostawić jako „Auto Insert”, natomiast Lokalizację należy zmienić na „Site Wide Body”.

Na koniec wystarczy włączyć kod i kliknąć „Zapisz fragment kodu”.

Następnie utworzysz drugi fragment kodu. Możesz wykonać te same kroki co poprzednio i nazwać go na przykład „Facebook Like Box”.

Następnie przejdź na stronę Facebook Developers dla wtyczek społecznościowych z wcześniejszego kroku i skopiuj kod z kroku 3.

Przejdź ponownie do karty WPCode i wklej kod z kroku 3 w polu Podgląd kodu. Fragmentem kodu może być rodzaj „HTML Snippet”.

Przewińmy w dół do sekcji „Wstawienie”.

Jeśli użyjesz opcji „Automatyczne wstawienie”, możesz sprawić, że Like Box pojawi się automatycznie w wielu miejscach, które pasują do kategorii Lokalizacja.

W naszym przykładzie zdecydowaliśmy się wybrać lokalizację „Site Wide Footer”, co oznacza, że Like Box pojawi się w stopce.

Istnieją również inne opcje, takie jak wstawienie przed wpisem, aby wyświetlić Like Box przed wszystkimi wpisami na Twoim blogu WordPress.

Z drugiej strony, metoda „Shortcode” umożliwia utworzenie własnego krótkiego kodu.

Następnie możesz dodać go do określonych części twojej witryny internetowej za pomocą bloku krótkiego kodu.

Po skonfigurowaniu ustawień wstawiania wystarczy włączyć kod i kliknąć „Zapisz fragment kodu”.

To wszystko! Następnie możesz przejść na twoją witrynę internetową, aby zobaczyć, jak wygląda Like Box:

Aby uzyskać więcej przewodników na temat wyświetlania kanałów społecznościowych na twojej witrynie WordPress, zapoznaj się z naszym artykułem na temat dodawania kanałów mediów społecznościowych w WordPress.

Bonus: Więcej sposobów na integrację Facebooka z WordPressem

Chcesz przenieść twoją integrację z Facebookiem na wyższy poziom? Sprawdź te dodatkowe przewodniki:

• Jak utworzyć wyskakujące okienko Facebook Like Box w WordPress – Zwiększ zaangażowanie dzięki strategicznie zaplanowanemu wyskakującemu okienku Like Box.
• Jak osadzaćwpisy o statusach z Facebooka w WordPressie – Udostępniaj określone aktualizacje z Facebooka bezpośrednio na twojej witrynie.
• Jak osadzaćFacebook Group Feed w WordPress – Wyświetlaj dyskusje społeczności na swojej witrynie internetowej.
• Jak wyświetlić recenzje Twojej strony na Facebooku w WordPress – Zaprezentuj dowód społeczny dzięki recenzjom klientów z Facebooka.
• Quick Ways to Get More Facebook Likes Using WordPress – Zastosuj te strategie, aby zwiększyć liczbę Twoich fanów na Facebooku.
• Jak wyświetlićTwittera i Facebooka autora na stronie profilu – Połącz swoich czytelników z autorami w mediach społecznościowych.
• How to Add Facebook Like Reactions to Your WordPress Posts – Wprowadź popularną funkcję reakcji Facebooka do swoich wpisów na blogu.
• Jak stworzyćstronę docelową Facebook Ads w WordPress – Zaprojektuj strony docelowe o wysokiej konwersji dla twoich kampanii reklamowych na Facebooku.
• Jakautomatycznie publikować wpisy na Facebooku z WordPressa – Usprawnij swoją strategię w mediach społecznościowych dzięki automatycznym wpisom.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać Facebook Like Box lub Fan Box w WordPress. Warto również zapoznać się z naszą ściągawką z mediów społecznościowych i listą najlepszych wtyczek do mediów społecznościowych dla WordPressa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.