Jak dodać pole lub ramkę polubień na Facebooku w WordPress

Ciężko pracowałeś, aby zbudować swoją bazę fanów na Facebooku, ale odwiedzający Twoją stronę internetową nie łączą się z Twoją stroną. Frustrujące, prawda?

Przetestowaliśmy różne sposoby integracji Facebooka z WordPressem i odkryliśmy, że proste Pole Polubień może mieć realny wpływ na rozwój Twojej społeczności.

Dobrze umieszczone pole Polubień na Facebooku wypełnia lukę między Twoją witryną a mediami społecznościowymi, pozwalając odwiedzającym na interakcję z Twoją stroną na Facebooku bez opuszczania witryny. Jest to jeden z tych małych dodatków, które mogą mieć duży wpływ na Twój dowód społeczny.

W tym przewodniku pokażemy Ci dwa proste sposoby dodania pola polubień na Facebooku do Twojej witryny WordPress: podejście z wtyczką pola polubień na Facebooku i rozwiązanie kodowe.

Dlaczego warto dodać Facebook Like Box na swojej stronie WordPress?

Dodanie pola Polubień na Facebooku do Twojej witryny WordPress ma kilka świetnych zalet.

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

Ponadto pole Polubień strony 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 samouczek pokaże Ci dwa sposoby dodania pola polubień Facebooka: jeden za pomocą wtyczki społecznościowej, a drugi za pomocą kodu. Możesz użyć poniższych szybkich linków, aby przejść przez nasz artykuł:

Metoda 1: Użycie wtyczki WordPress Facebook Like Box (przyjazna dla początkujących)

Ta pierwsza metoda jest najłatwiejszym i zalecanym sposobem dla początkujących na dodanie pola polubień Facebooka do ich witryn. Pozwoli Ci również wyświetlić swój kanał Facebook na Twojej stronie internetowej, jeśli chcesz.

Ta metoda wykorzystuje Smash Balloon, przyjazną dla użytkownika wtyczkę WordPress, która pozwala osadzać różne kanały mediów społecznościowych w WordPressie, wraz z polem Polubień.

W tym samouczku możesz użyć bezpłatnej wersji wtyczki Smash Balloon Social Post feed. Ale jeśli potrzebujesz więcej funkcji poza polem Polubień (takich jak wyświetlanie filmów, zdjęć i wydarzeń), zalecamy uaktualnienie do wersji Pro.

Skonfiguruj wtyczkę Smash Balloon Facebook Feed

Najpierw musisz zainstalować wtyczkę WordPress w obszarze administracyjnym. Następnie przejdź do Facebook Feed » All Feeds i kliknij „Add New”.

Teraz wybierz typ kanału „Timeline”.

Następnie po prostu kliknij przycisk „Dalej”.

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

Musisz kliknąć przycisk „Dodaj nowy”.

Smash Balloon przekieruje Cię do nowego ekranu.

Tutaj po prostu wybierz „Strona” jako typ źródła, a następnie kliknij „Połącz z Facebookiem”.

Teraz musisz zalogować się na swoje konto na Facebooku.

Następnie wybierz strony, dla których chcesz wyświetlić pole Polubień na swoim blogu WordPress lub stronie internetowej. Następnie kliknij „Next”.

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

Teraz kliknij „Gotowe”.

Ostatnie okno dialogowe po prostu potwierdzi, że pomyślnie połączyłeś Smash Balloon z Facebookiem.

Po prostu kliknij „OK”, aby kontynuować.

Smash Balloon przekieruje Cię teraz do obszaru administracyjnego, gdzie musisz wybrać stronę na Facebooku do użycia w swoim kanale.

Po prostu wybierz stronę i kliknij „Dodaj”.

Teraz zobaczysz stronę na Facebooku, którą właśnie połączyłeś jako źródło na stronie wtyczki Smash Balloon.

Po prostu wybierz to i kliknij „Dalej”.

Dostosuj pole polubień na Facebooku

Na tym etapie Smash Balloon przeniesie Cię do edytora kanału Facebook.

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

Po prostu przewiń w dół do sekcji „Liczba postów”.

Następnie ustaw liczbę zarówno dla komputera, jak i dla urządzeń mobilnych na 0. Spowoduje to usunięcie wyświetlania wszystkich Twoich najnowszych postów, a kanał będzie wyświetlał tylko pole „Lubię to”.

Alternatywnie, jeśli chcesz również pokazać swój kanał na Facebooku wraz z polem Polubień, możesz skorzystać z naszego samouczka na temat tworzenia niestandardowego kanału na Facebooku w WordPressie.

Teraz wróć na górę.

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

Na tym etapie możesz usunąć nagłówek swojego kanału na Facebooku.

Należy przejść do sekcji „Sekcje” i wybrać „Nagłówek”.

To ustawienie nagłówka określa, jak będzie wyglądał nagłówek 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łu i otwórzmy ustawienie „Like Box”. Następnie po prostu włącz funkcję „Like Box”.

Na tej stronie możesz również dostosować rozmiar, pozycję, wyświetlanie zdjęcia w tle, niestandardową szerokość, niestandardowy tekst wezwania do działania i tak dalej w przypadku pola polubień.

Gdy to zrobisz, po prostu kliknij przycisk „Zapisz” w prawym górnym rogu.

Osadź pole Polubień na Facebooku na swojej stronie lub wpisie w WordPress

Na tym etapie możesz wyświetlić pole Polubień na Facebooku na stronie lub w obszarze gotowym na widżety, takim jak pasek boczny.

Aby to zrobić, kliknij „Osadź” w prawym górnym rogu. Teraz pojawi się okno „Osadź kanał”, dając Ci dwie opcje wyświetlania pola polubień.

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

Jeśli chcesz dodać pole polubień do konkretnej strony, kliknij przycisk „Dodaj do strony”.

Teraz po prostu wybierz stronę, do której chcesz dodać funkcję, i kliknij „Dodaj”.

Teraz przejdziesz do edytora bloków Gutenberga.

Kliknij przycisk „+ Dodaj blok”, zgodnie z instrukcjami Smash Balloon.

Gdy biblioteka wstawiania bloków zostanie otwarta, musisz znaleźć blok Kanał na Facebooku.

Następnie po prostu przeciągnij i upuść go tam, gdzie najlepiej wygląda na stronie.

W bloku wybierz kanał Facebook z polem „Lubię to”, które właśnie utworzyłeś wcześniej.

Następnie blok wyświetli pole polubień.

Ale co, jeśli masz wiele stron na Facebooku i ustawiłeś pole polubień dla każdej z nich za pomocą Smash Balloon?

Możesz także przełączać się między nimi w bocznym panelu ustawień bloku, 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 nasze pole polubień na naszej stronie demonstracyjnej:

Jeśli używasz motywu blokowego WordPress, możesz również użyć Edytora Pełnej Witryny, aby dodać blok Polubień na Facebooku do szablonów stron Twojego motywu.

Więcej informacji o Edytorze Pełnej Witryny znajdziesz w naszym przewodniku dla początkujących po edycji pełnej witryny.

Osadzanie widżetu Polubień na Facebooku w WordPress

Jeśli używasz klasycznego motywu WordPress, możesz chcieć wyświetlić pole Polubień na Facebooku w obszarze gotowym na widżety, takim jak pasek boczny, nagłówek lub stopka. To świetny sposób na pokazanie pola Polubień bez odwracania uwagi użytkowników od głównej treści strony.

W oknie podręcznym „Osadź kanał” wybierz „Dodaj do widżetu”, aby przejść do edytora widżetów opartych na blokach.

Teraz, podobnie jak w poprzedniej metodzie, po prostu kliknij przycisk „+ Dodaj blok”, znajdź blok Kanał na Facebooku i przeciągnij go na pożądany obszar.

Na naszej stronie demonstracyjnej chcemy użyć pola „Lubię to” jako widżetu paska bocznego WordPress.

W bloku wybierz Kanał Facebook z polem polubień, który utworzyłeś wcześniej.

Następnie kliknij „Zaktualizuj”, aby wprowadzić zmiany na żywo.

I gotowe!

Oto jak wygląda pasek boczny na naszej stronie testowej z widżetem Pudełko polubień:

Osadź widżet Facebook Like Box za pomocą krótkiego kodu

Jeśli dwie poprzednie metody nie działają, zalecamy dodanie pola Polubień lub Fan Box na Facebooku za pomocą kodu krótkiego.

Po prostu skopiuj krótki kod z wyskakującego okienka osadzania kanału wcześniej i dodaj go w dowolnym miejscu na swojej stronie internetowej.

Więcej informacji na temat używania kodów krótkich znajdziesz w naszym przewodniku jak dodawać kody krótkie w WordPressie.

Metoda 2: Dodawanie pola polubień na Facebooku za pomocą kodu

Jeśli interesuje Cię tylko wyświetlanie pola Fan Box lub Like Box na Facebooku bez dodawania innych typów kanałów z Facebooka, to użycie wtyczki strony na Facebooku może wydawać się przesadą. W takim przypadku możesz dodać pole 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 wstawiania kodu za pomocą WPCode. Jest to wtyczka WordPress, która ułatwia dodawanie niestandardowych fragmentów kodu do WordPressa bez psucia witryny.

Do tego poradnika wystarczy darmowa wersja WPCode, chociaż możesz zaktualizować do wersji Pro, aby uzyskać zaawansowane funkcje, takie jak tryb testowania i biblioteka fragmentów kodu w chmurze.

Najpierw zainstaluj wtyczkę w WordPressie. Po jej aktywacji przejdź do Fragmenty kodu » + Dodaj fragment. Następnie wybierz „Dodaj własny kod (nowy fragment)” i kliknij „+ Dodaj własny fragment”.

Teraz przejdziesz do edytora kodu. Najpierw nadaj swojemu niestandardowemu fragmentowi kodu nazwę, abyś mógł go łatwo zidentyfikować później. W tym przypadku nazwiemy go „Facebook JavaScript SDK”, ponieważ właśnie to dodamy tutaj.

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

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

Jeśli to Twoja pierwsza wizyta na tej stronie, ukończ kreatora konfiguracji, aby utworzyć bezpłatne konto.

Następnie zostaniesz przekierowany do panelu deweloperów Facebooka. Kliknijmy przycisk „Utwórz aplikację”.

Na następnej stronie po prostu wybierz „Inne” dla przypadku użycia.

Następnie kliknij przycisk „Dalej”.

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

Aby utworzyć pole polubień, możesz po prostu wybrać „Biznes”, a następnie kliknąć „Dalej”.

Nadajmy teraz aplikacji nazwę. Może to być cokolwiek, ponieważ służy to tylko celom referencyjnym. Możesz również podać swój adres e-mail i wybrać opcjonalne konto biznesowe.

Na koniec po prostu kliknij „Utwórz aplikację”.

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

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

Tutaj upewnij się, że wypełniłeś adres URL swojej strony na Facebooku, opróżnij pole „Zakładki” i w razie potrzeby określ szerokość i wysokość pola Like Box.

Możesz również wybrać mniejszy nagłówek, wyłączyć zdjęcie w tle i inne opcje. Postanowiliśmy również dostosować Pole Polubień do szerokości kontenera, aby rozmiar dostosowywał się responsywnie do miejsca, w którym jest umieszczony na stronie internetowej.

Po zakończeniu kliknij przycisk „Pobierz kod”. Zobaczysz wyskakujące okienko z dwoma typami fragmentów kodu: JavaScript SDK i iFrame. Oba wyświetlą Twoje pole Like Box, ale ogólnie JavaScript SDK jest znacznie lepszą opcją.

SDK JavaScript są zazwyczaj szybsze, ponieważ są bezpośrednio osadzone na stronie internetowej, co pozwala im ładować się jako część głównego dokumentu. iFrame wymagają ładowania całego dokumentu HTML, co może spowolnić czas ładowania strony.

W zakładce JavaScript SDK upewnij się, że wybrano wcześniej utworzoną nazwę aplikacji.

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

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

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

Metoda wstawiania może pozostać jako „Automatyczne wstawianie”, natomiast Lokalizacja powinna zostać zmieniona na „Cała witryna – Treść”.

Na koniec po prostu aktywuj kod i kliknij „Zapisz fragment”.

Następnie utworzysz drugi fragment kodu. Możesz wykonać te same kroki, co poprzednio, i nazwać go na przykład „Pole polubień Facebooka”.

Następnie przejdź do strony Facebook Developers dla wtyczek społecznościowych z poprzedniego kroku i skopiuj kod z Kroku 3.

Przejdź ponownie do zakładki WPCode i wklej kod z Kroku 3 w polu Podgląd kodu. Typ kodu może być „Fragment HTML”.

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

Jeśli użyjesz opcji „Automatyczne wstawianie”, pole polubień może pojawić się automatycznie w wielu miejscach pasujących do kategorii Lokalizacja.

W naszym przykładzie zdecydowaliśmy się wybrać lokalizację „Stopka całej witryny”, co oznacza, że pole Like Box pojawi się w stopce.

Istnieją również inne opcje, takie jak Wstaw przed postem, aby wyświetlić pole polubień przed wszystkimi wpisami na blogu WordPress.

Z drugiej strony, metoda „Shortcode” pozwala na utworzenie niestandardowego krótkiego kodu.

Możesz następnie dodać go do określonych części swojej witryny za pomocą bloku kodu krótkiego.

Po skonfigurowaniu ustawień wstawiania, po prostu aktywuj kod i kliknij „Zapisz fragment”.

To wszystko! Następnie możesz odwiedzić swoją stronę internetową, aby zobaczyć, jak wygląda Pole Polubień:

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

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

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

• Jak utworzyć wyskakujące okienko Facebook Like Box w WordPressie – Zwiększ zaangażowanie dzięki strategicznie zaplanowanemu wyskakującemu okienku Like Box.
• Jak osadzić posty z aktualnościami na Facebooku w WordPressie – Udostępniaj konkretne aktualizacje z Facebooka bezpośrednio na swojej stronie.
• Jak osadzić kanał grupy na Facebooku w WordPressie – Wyświetlaj dyskusje swojej społeczności na swojej stronie internetowej.
• Jak wyświetlać recenzje swojej strony na Facebooku w WordPressie – Prezentuj dowody społeczne za pomocą recenzji klientów z Facebooka.
• Szybkie sposoby na zdobycie większej liczby polubień na Facebooku za pomocą WordPress – Wdróż te strategie, aby zwiększyć liczbę fanów na Facebooku.
• Jak wyświetlić Twitter i Facebook autora na stronie profilu – Połącz swoich czytelników z Twoimi współpracownikami w mediach społecznościowych.
• Jak dodać reakcje polubienia na Facebooku do swoich postów w WordPress – Przenieś popularną funkcję reakcji z Facebooka do swoich postów na blogu.
• Jak utworzyć stronę docelową reklam na Facebooku w WordPress – Projektuj strony docelowe o wysokiej konwersji dla swoich kampanii reklamowych na Facebooku.
• Jak automatycznie publikować na Facebooku z WordPress – Usprawnij swoją strategię mediów społecznościowych dzięki automatycznemu publikowaniu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać pole polubień na Facebooku lub pole fanów w WordPress. Możesz również zapoznać się z naszym ostatecznym arkuszem ściągawki dotyczącym mediów społecznościowych i listą najlepszych wtyczek do mediów społecznościowych dla WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.