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?
Przetestowaliśmy różne sposoby integracji Facebooka z WordPressem i odkryliśmy, że prosty Like Box może mieć realny wpływ na wzrost liczby Twoich fanów.
Dobrze umieszczony Facebook Like Box wypełnia lukę między twoją witryną internetową a mediami społecznościowymi, umożliwiając odwiedzającym zaangażowanie się w 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 dwie proste metody dodania Facebook Like Box do twojej witryny WordPress: podejście oparte na wtyczce Facebook Like Box i rozwiązanie oparte na kodzie.

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:
Uwaga: Pole „Lubię to” na Facebooku różni się od przycisku „Lubię to”. Jeśli zamiast tego chcesz wyświetlić go na swojej witrynie internetowej, zapoznaj się z naszym przewodnikiem krok po kroku, jak dodać przycisk Lubię to na Facebooku w WordPress.
Metoda 1: Korzystanie z wtyczki WordPress Facebook Like Box (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 wersji 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 Facebook Fan Box lub Like Box bez dodawania innych rodzajów kanałów Facebooka, to użycie wtyczki do strony na Facebooku może wydawać się przesadą. W takim przypadku można 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 Snippet. Następnie wybierz „Add Your Custom Code (New Snippet)” i kliknij „+ Add Custom 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.
Hajjalah
Indeed, adding a Facebook like box is a great feature to get more reputation on the platform. Since some website users may not have the time to search for your page on Facebook but just offer you a like directly on the website. This is an amazing feature I am looking forward to implementing. Thanks WPBeginner for this idea.
Mrteesurez
This is awesome. It’s really a useful feature, it will let users quickly like my contents directly from my website. But can it show like count ?
WPBeginner Support
Unless Facebook has made a change it should show the like count.
Admin
dharm
i complete all steps but my website show error plz help me i dont understend proprly
nareshdetruja
Aewson information bro nice a article
Hector Jayat
Amazing Tip, I was able to set this up in only 5 minutes. Thanks
Tina Gleisner
Thanks for explaining the JavaScript code can go in the footer, and not the header as indicated by Facebook … although I’m only guessing at why this is better & would appreciate knowing the real reason (load time?)
Richard
To update your post, sadly it looks like the official Facebook plugin is now (2015) no longer official.
It also has not been updated in a year and a half and now has a poor user rating.
Kitty
One question: I use the plugin, but why wordpress tells me that it’s not a valid facebook page url. It’s my own facebook site. How can I get the right url?
Jurgen
I’ve got the same issue … it says not a valid facebook url and it is mine
Peter
I installed the plugin but I then received a warning the it is not compatible with WordPress seo by Yoast.
Here is the message below.
The Facebook plugin(s) might cause issues when used in conjunction with WordPress SEO by Yoast.
Both WordPress SEO by Yoast and Facebook create OpenGraph output, which might make Facebook, Twitter, LinkedIn and other social networks use the wrong texts and images when your pages are being shared.
Recommended solution
We recommend you deactivate Facebook and have another look at your WordPress SEO configuration using the button above.
I will try to install it manually and see if that works.
WPBeginner Staff
You are probably using WordPress.com see our guide on the difference between WordPress.com and WordPress.org.
frank jer
why i cannot use the wordpress plugins?
carol neumann
Am confused; WordPress plugins do not download into Widgits. Plugins can only be placed before and/or after a post, not in the sidebar.
Sohail
WELL DONE nice job Thats the real way to explain some thing. Thanks again for making such good tuts
Chrys
Hi,
I’ve tried everything to add it manually but the like box won’t appear! I really cannot figure out why..I put the codes in the right places though…
Any idea?
Kind regards
Chrissy
Simple. Real and to the point. Thank you guys as usual very helpful!
Jeanette O'Hagan
Great post, thanks. Just what I needed.
rajeshwar sharma
great work …keep the good work going…
giacomo
Hello! thanks for the tips…everything works like a charm
Pummy
Hi Sayyed.
Your header and footer plugin is awesome. I think this is a must have plugin for wp beginners,
You publish great posts with great detail.
Thanks.
Ankit
Great piece of information.
Ajay
I use Jetpack’s widgets to add the Facebook box. I’ve found it easy to use with decent number of options
Bob Downs
I’m with Ajay – the Jetpack Facebook Like Box widget is simple and easy to use without adding any other plugins than the Jetpack one.
Editorial Staff
Agreed that’s why we have it mentioned at the top because most folks find it easier.
Admin
Scott
iframe seems like the easiest way, not having to deal with the javascript. Are there any major disadvantages to using iframe?
Editorial Staff
The only major disadvantage is that you can’t see Facebook Insights data.
Admin