Jak wyświetlać zdjęcia z Instagrama w widżecie paska bocznego WordPress

Czy chcesz wyświetlać swoje zdjęcia z Instagrama w pasku bocznym WordPress?

Posty z Instagrama mogą stanowić świetną treść dla Twojej strony internetowej. Tworząc kanał na Instagramie, możesz utrzymywać świeżość i atrakcyjność swojej strony, jednocześnie promując swoje konto na Instagramie.

W tym artykule pokażemy Ci, jak wyświetlać Twoje zdjęcia i filmy z Instagrama w widżecie paska bocznego WordPress.

Dlaczego warto dodać kanał Instagram do swojej witryny WordPress?

Według naszych badań statystyk marketingowych, Instagram ma ponad 2 miliardy aktywnych użytkowników miesięcznie. Oznacza to, że jest to świetne miejsce do promowania Twoich produktów, usług i wpisów na blogu.

W zależności od branży Instagram może być nawet najlepszym miejscem do promowania Twojej witryny. Na przykład Instagram jest szczególnie popularny wśród najlepszych blogów o modzie, stron o gotowaniu, stylu życia i stron fotograficznych.

Jednak ludzie nie zobaczą Twoich postów na Instagramie, jeśli odwiedzą tylko Twoją stronę WordPress. Może to utrudnić rozwój liczby obserwujących na Instagramie i uzyskanie zaangażowania pod Twoimi zdjęciami i filmami.

Biorąc to pod uwagę, dobrym pomysłem jest dodanie kanału Instagram do Twojej strony WordPress. Pozwoli to zwiększyć ruch na Twojej stronie na Instagramie i zachęcić odwiedzających do interakcji z Twoimi postami, pozostawiając komentarze, klikając przycisk „Udostępnij” i nie tylko.

Biorąc to pod uwagę, przyjrzyjmy się, jak łatwo wyświetlić zdjęcia z Instagrama w widżecie paska bocznego WordPress.

Jak zainstalować wtyczkę zdjęć z Instagrama

Najlepszym sposobem na wyświetlanie zdjęć z Instagrama w pasku bocznym WordPress lub podobnym widżecie jest użycie Smash Balloon Social Photo Feed. Ta darmowa wtyczka pozwala wyświetlać zdjęcia z jednego lub więcej kont Instagram w w pełni konfigurowalnym kanale.

Po utworzeniu kanału możesz dodać go do paska bocznego za pomocą kodu krótkiego lub bloku.

Po umieszczeniu kanału na swojej stronie internetowej będzie on automatycznie aktualizowany za każdym razem, gdy opublikujesz nowy post na Instagramie. W ten sposób możesz utrzymać swoją witrynę świeżą i interesującą, bez konieczności ręcznego jej aktualizowania.

W tym przewodniku będziemy korzystać z darmowej wersji Smash Balloon, ponieważ ma ona wszystko, czego potrzebujesz do osadzenia kanału Instagram. Dostępna jest również wersja Pro, która pozwala na wyświetlanie kanałów z hashtagów, dodawanie w WordPressie zakupowych zdjęć z Instagrama i wiele więcej.

Przed rozpoczęciem musisz połączyć swoje konto Instagram z stroną na Facebooku. Jeśli masz osobiste konto na Instagramie, możesz również przekształcić je w konto biznesowe, ponieważ pozwoli to Smash Balloon na automatyczne wyświetlanie Twojego opisu profilu i nagłówka z Instagrama.

Aby uzyskać instrukcje krok po kroku, jak zrobić obie te rzeczy, zapoznaj się z naszą sekcją FAQ na końcu wpisu.

Gdy będziesz gotowy, zainstaluj i aktywuj wtyczkę Smash Balloon Social Photo Feed. Więcej szczegółów znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Jak połączyć konto Instagram z WordPress

Po aktywacji wtyczki nadszedł czas, aby połączyć swoje konto na Instagramie z WordPressem. Po prostu przejdź do Instagram Feed » Ustawienia, a następnie kliknij 'Dodaj nowy'.

Dzięki Smash Balloon Pro możesz tworzyć kanały z postów oznaczonych i hashtagów, a nawet tworzyć ścianę społecznościową, łącząc treści z wielu różnych stron internetowych.

Na przykład możesz wyświetlać najnowsze filmy z kanału YouTube, swoje ostatnie tweety, kanał grupy na Facebooku i inne.

Ponieważ używamy darmowej wtyczki Smash Balloon, po prostu wybierz „Oś czasu użytkownika”, a następnie kliknij „Dalej”.

Następnie będziesz musiał wybrać konto Instagram, którego użyjesz do utworzenia niestandardowego kanału zdjęć z Instagrama w WordPress.

Aby rozpocząć, kliknij „Dodaj źródło”.

Na następnym ekranie wybierz, czy chcesz wyświetlać zdjęcia z osobistego czy biznesowego konta na Instagramie.

Jeśli zaznaczysz pole wyboru obok opcji „Osobiste”, Smash Balloon domyślnie nie uwzględni awatara i opisu profilu Instagram w nagłówku. Możesz jednak zawsze dodać awatar i opis profilu ręcznie w ustawieniach wtyczki.

Po wybraniu „Osobiste” lub „Firmowe”, kliknij „Zaloguj się przez Facebooka”.

Możesz teraz sprawdzić konto Instagram, którego chcesz użyć, i kliknąć „Dalej”.

Następnie zaznacz pole wyboru obok strony na Facebooku, która jest połączona z Twoim kontem na Instagramie.

Po wykonaniu tej czynności kliknij „Dalej”.

Smash Balloon wyświetli teraz wyskakujące okienko z listą wszystkich informacji, do których będzie miał dostęp i akcji, które może wykonać.

Aby ograniczyć dostęp Smash Balloon do Twojego konta na Instagramie, kliknij dowolny przełącznik, aby zmienić go z „Tak” na „Nie”. Pamiętaj tylko, że może to wpłynąć na zdjęcia i filmy, które możesz osadzić na swoim blogu WordPress lub stronie internetowej.

Mając to na uwadze, zalecamy pozostawienie wszystkich przełączników włączonych.

Kiedy będziesz gotowy, kliknij „Gotowe”.

Zobaczysz teraz wyskakujące okienko z kontem Instagram, które właśnie połączyłeś z WordPress.

Po prostu zaznacz pole obok konta, a następnie kliknij „Dodaj”.

Smash Balloon automatycznie przeniesie Cię z powrotem do Kanały Instagram » Wszystkie kanały.

Aby utworzyć kanał mediów społecznościowych, zaznacz pole wyboru obok swojego konta na Instagramie. Następnie kliknij „Dalej”.

Wtyczka utworzy teraz kanał zdjęć z Instagrama dla Twojej witryny i otworzy go w edytorze Smash Balloon.

Jak dostosować swój kanał zdjęć na Instagramie

Możesz użyć edytora, aby dostosować wygląd zdjęć z Instagrama na swojej stronie internetowej.

Po prawej stronie zobaczysz podgląd swojego kanału zdjęć z Instagrama. Po lewej stronie znajdują się wszystkie ustawienia, których możesz użyć do dostosowania kanału zdjęć.

Większość tych ustawień jest samoopisująca, ale szybko omówimy kilka kluczowych obszarów.

Na początek możesz zmienić układ kanału i dodać odstępy, wybierając „Układ kanału” z menu po lewej stronie. W miarę wprowadzania zmian podgląd będzie się automatycznie aktualizował, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co najlepiej działa dla Twojego kanału zdjęć z Instagrama.

Domyślnie Smash Balloon wyświetla taką samą liczbę postów na komputerach stacjonarnych i urządzeniach mobilnych.

Możesz zobaczyć podgląd, jak kanał Instagram będzie wyglądał na komputerach stacjonarnych, tabletach i smartfonach, korzystając z wiersza przycisków w prawym górnym rogu. Testując różne układy, możesz stworzyć kanał Instagram, który będzie świetnie wyglądał, niezależnie od urządzenia, z którego korzysta odwiedzający.

Smartfony i tablety zazwyczaj mają mniejsze ekrany i mniejszą moc obliczeniową, dlatego możesz chcieć wyświetlać mniej zdjęć i filmów na urządzeniach mobilnych.

Aby to zrobić, po prostu wpisz inną liczbę w polu „Mobilne” w sekcji „Liczba postów”.

Domyślnie kanał Facebook wyświetla mniej kolumn na smartfonach i tabletach w porównaniu do komputerów stacjonarnych. Pomaga to dopasować Twoje zdjęcia i filmy do mniejszych ekranów.

Po przetestowaniu mobilnej wersji Twojej witryny WordPress możesz być niezadowolony z tego, jak kolumny wyglądają na smartfonach i tabletach. W takim przypadku możesz wyświetlić mniej kolumn, zmieniając liczby w sekcji „Kolumny”.

Gdy będziesz zadowolony z wprowadzonych zmian, kliknij link „Dostosuj”.

Spowoduje to powrót do głównego edytora Smash Balloon, gdzie możesz przejść do następnego ekranu ustawień, którym jest „Schemat kolorów”.

Domyślnie Smash Balloon używa schematu kolorów dziedziczonego z Twojego motywu WordPress, ale ma również motywy 'Jasny' i 'Ciemny', których możesz użyć.

Inną opcją jest stworzenie własnego schematu kolorów, wybierając 'Niestandardowy', a następnie używając kontrolek do zmiany koloru tła, koloru przycisku, zmiany koloru tekstu i nie tylko.

Domyślnie Smash Balloon dodaje nagłówek do Twojego kanału, którym jest zdjęcie profilowe Twojego Instagrama i nazwa Twojej strony. Może to dodać dodatkowy kontekst, zamiast po prostu osadzać Instagram w WordPressie bez wyjaśnienia.

Aby zmienić wygląd tej sekcji, kliknij „Nagłówek” w menu po lewej stronie.

Na tym ekranie możesz zmienić rozmiar i kolor nagłówka oraz wyświetlić lub ukryć swoje bio na Instagramie.

Czasami możesz chcieć pokazać inne zdjęcie profilowe. Na przykład Twój awatar na Instagramie może nie pasować do Twojego motywu WordPress.

Aby to zrobić, po prostu kliknij „Dodaj obraz” w sekcji „Pokaż niestandardowy awatar”.

Następnie możesz wybrać obraz z biblioteki multimediów WordPress lub przesłać nowe zdjęcie z komputera.

Podobnie możesz wyświetlić inny opis profilu. Na przykład możesz chcieć przedstawić swój kanał Instagram lub zachęcić ludzi do obserwowania Cię po więcej świetnych treści.

Aby zastąpić bio z Instagrama, po prostu wpisz je w polu „Dodaj niestandardowe bio”.

Smash Balloon automatycznie analizuje Twoje zdjęcia z Instagrama i wyświetla je w najlepszej rozdzielczości. Chociaż domyślne ustawienia powinny być odpowiednie dla większości stron internetowych, możliwe jest powiększenie lub pomniejszenie obrazów.

Aby zmienić rozmiar obrazu, kliknij „Wpisy” w menu po lewej stronie. Następnie wybierz opcję „Obrazy i filmy”.

Teraz możesz wybierać między miniaturką, średnim a pełnym rozmiarem za pomocą menu rozwijanego. Więcej na ten temat znajdziesz w naszym przewodniku dla początkujących po rozmiarach obrazów w WordPressie.

Jeśli nie jesteś zadowolony z wyników, możesz w dowolnym momencie wrócić do tego ekranu i wybrać z menu rozwijanego opcję „Automatyczne wykrywanie (zalecane)”.

Domyślnie Smash Balloon dodaje przycisk „Załaduj więcej” na dole Twojego kanału na Instagramie, który pozwala odwiedzającym przewijać więcej Twoich zdjęć i filmów.

Ponieważ jest to tak ważny przycisk, możesz go dostosować, wybierając opcję „Przycisk Załaduj więcej” z menu po lewej stronie.

Tutaj możesz pomóc wyróżnić „Załaduj więcej” poprzez zmianę koloru tła, koloru tekstu i stanu najazdu.

Możesz również zmienić etykietę przycisku, wpisując tekst w polu „Tekst”.

Inną opcją jest całkowite usunięcie przycisku poprzez kliknięcie przełącznika „Włącz”. W ten sposób możesz zachęcić ludzi do odwiedzenia Twojego Instagrama, ograniczając liczbę postów, które mogą zobaczyć na Twojej stronie internetowej.

Jeśli odwiedzającym spodoba się to, co zobaczą, mogą zdecydować się na obserwowanie Cię na Instagramie, korzystając z przycisku „Obserwuj na Instagramie”, który Smash Balloon dodaje automatycznie.

Mając to na uwadze, możesz chcieć, aby przycisk wyróżniał się, wybierając „Przycisk Obserwuj” w menu po lewej stronie.

Tutaj możesz zmienić kolor tła przycisku, stan najazdu i kolor tekstu.

Domyślnie przycisk ma ogólny napis 'Obserwuj na Instagramie'.

Możesz zastąpić to własnym komunikatem, wpisując tekst w polu „Tekst”.

Kiedy będziesz zadowolony z wyglądu kanału Instagrama, nie zapomnij kliknąć „Zapisz”, aby zachować zmiany. Teraz możesz dodać kanał Instagrama do widżetu paska bocznego WordPress.

Jak dodać zdjęcia z Instagrama w widżecie paska bocznego WordPress

Teraz możesz dodać kanał Instagram do paska bocznego lub podobnej sekcji za pomocą bloku Kanał Instagram.

Jeśli utworzyłeś więcej niż jeden kanał za pomocą Smash Balloon, będziesz musiał znać kod kanału.

Po prostu przejdź do Instagram » Wszystkie kanały, a następnie skopiuj wartość z kolumny „Skrócony kod”. Na poniższym obrazku będziemy musieli użyć instagram-feed feed=1.

Po wykonaniu tej czynności przejdź do Wygląd » Widżety w panelu administracyjnym WordPressa.

Następnie kliknij niebieski przycisk „+”.

W pasku wyszukiwania wpisz „Kanał Instagram” i wybierz odpowiedni widżet, gdy się pojawi.

WordPress ma wbudowany widżet Instagram, więc upewnij się, że wybierasz ten, który wyświetla oficjalne logo Instagram.

Następnie po prostu przeciągnij widżet do obszaru, w którym chcesz pokazać kanał z Instagrama, na przykład do paska bocznego lub podobnej sekcji.

Widżet automatycznie wyświetli jeden z kanałów, które utworzyłeś za pomocą Smash Balloon.

Aby zamiast tego wyświetlić inny kanał, po prostu wpisz krótki kod kanału w polu „Ustawienia krótkiego kodu”, a następnie kliknij „Zastosuj zmiany”.

Możesz teraz kliknąć przycisk „Aktualizuj”, aby udostępnić widżet. Więcej informacji znajdziesz w naszym przewodniku krok po kroku na temat dodawania i używania widżetów w WordPressie.

Jeśli używasz motywu obsługującego bloki, możesz dodać kanał Instagram do paska bocznego za pomocą edytora pełnej witryny. Aby rozpocząć, przejdź do Wygląd » Edytor.

W edytorze kliknij, aby wybrać sekcję paska bocznego, a następnie kliknij przycisk „+”.

Następnie możesz zacząć wpisywać „Kanał Instagram” i wybrać odpowiedni blok, gdy się pojawi.

Domyślnie edytor pełnej witryny wyświetli jeden z kanałów Instagram, które utworzyłeś za pomocą Smash Balloon. Aby wyświetlić inny kanał, po prostu dodaj skrócony kod, wykonując ten sam proces opisany powyżej.

Gdy będziesz zadowolony z wyglądu kanału Instagram, kliknij „Zapisz”.

Jak wyświetlić konkretne zdjęcie z Instagrama w WordPress

Czasami możesz chcieć wyświetlić konkretny post na Instagramie na swojej stronie internetowej. Może to być Twoje najpopularniejsze zdjęcie, ponadczasowy post, a nawet konkurs w mediach społecznościowych, który obecnie prowadzisz.

W przeszłości można było łatwo osadzić post na Instagramie w WordPress, używając protokołu znanego jako oEmbed. Jednak Facebook zmienił sposób działania oEmbed, więc nie można już łatwo osadzać zdjęć z Instagrama w WordPress.

Dobra wiadomość jest taka, że Smash Balloon może naprawić problem z osadzaniem oEmbed na Facebooku i Instagramie. Pozwala to łatwo osadzić konkretny post z Instagrama na dowolnej stronie, wpisie lub obszarze gotowym na widżety, takim jak pasek boczny. Możesz również łatwo utworzyć niestandardowy kanał na Facebooku w WordPress.

Aby włączyć tę funkcję, przejdź do Kanał Instagram » oEmbeds. Następnie możesz kliknąć przycisk „Włącz” obok „Instagram”.

Następnie przejdź do Wygląd » Widżety i kliknij niebieski przycisk „+”.

W pasku wyszukiwania wpisz 'Osadź', aby znaleźć odpowiedni blok.

Gdy pojawi się blok „Osadź”, przeciągnij go na obszar, w którym chcesz pokazać zdjęcie.

W polu „Osadź” po prostu wklej adres URL posta na Instagramie, który chcesz wyświetlić na swojej stronie internetowej. Następnie kliknij „Osadź”.

WordPress wyświetli teraz konkretny post z Instagrama.

Jeśli jesteś zadowolony z wyglądu, kliknij „Aktualizuj”, aby opublikować zmiany.

Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz na żywo post z Instagrama.

Jeśli używasz motywu obsługującego bloki, musisz dodać konkretne posty z Instagrama za pomocą edytora całego serwisu.

Aby to zrobić, po prostu włącz funkcję oEmbed Smash Balloon i uzyskaj adres URL posta z Instagrama, wykonując ten sam proces opisany powyżej.

Następnie otwórz edytor pełnej witryny, przechodząc do Wygląd » Edytor w panelu WordPress. Gdy znajdziesz się w edytorze pełnej witryny, kliknij przycisk „+” w sekcji paska bocznego, a następnie wpisz „Osadź”.

Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do paska bocznego.

Następnie możesz dodać adres URL posta, który chcesz osadzić, i kliknąć przycisk „Osadź”.

Edytor pełnej witryny wyświetli teraz post z Instagrama.

Jeśli jesteś zadowolony z wyglądu, kliknij „Zapisz”, aby opublikować to zdjęcie lub film w bocznym pasku z obsługą bloków.

Najczęściej zadawane pytania dotyczące wyświetlania postów z Instagrama w WordPressie

Smash Balloon ułatwia tworzenie niestandardowego kanału na Instagramie, a nawet wyświetlanie konkretnych postów z Instagrama na Twojej stronie WordPress.

Biorąc to pod uwagę, oto niektóre z najczęściej zadawanych pytań dotyczących wyświetlania postów z Instagrama w WordPress.

Jak założyć konto biznesowe na Instagramie?

Smash Balloon może wyświetlać zdjęcia z osobistego lub firmowego konta Instagram.

Jednak Smash Balloon nie może automatycznie pobrać awatara i bio z osobistego konta Instagram. Zamiast tego będziesz musiał dodać awatar i bio ręcznie w ustawieniach wtyczki.

Mając to na uwadze, możesz sprawdzić, czy masz konto osobiste czy firmowe, a następnie przełączyć się na konto firmowe, jeśli jest to konieczne.

Aby to zrobić, po prostu odwiedź swoje konto na Instagramie i kliknij ikonę z liniami w bocznym menu.

Następnie kliknij „Ustawienia”.

Jeśli nie masz konta firmowego, w menu po lewej stronie zobaczysz opcję „Przełącz na konto profesjonalne”.

Jeśli obecnie masz konto osobiste i chcesz przełączyć się na konto biznesowe, po prostu kliknij ten link.

Jak połączyć stronę na Facebooku z kontem na Instagramie?

Zanim będziesz mógł wyświetlać zdjęcia z Instagrama w WordPress, najpierw musisz połączyć swoje konto na Instagramie z stroną na Facebooku.

Aby to zrobić, przejdź do strony Facebook, której chcesz użyć, a następnie kliknij „Ustawienia” w menu po lewej stronie.

Gdy to zrobisz, kliknij 'Połączone konta'.

Teraz możesz wybrać „Instagram” i kliknąć przycisk „Połącz”.

Facebook pokaże teraz wszystkie akcje, które może wykonać, i informacje, do których ma dostęp.

Jeśli jesteś zadowolony z tego, kliknij przycisk „Połącz”.

Pamiętaj tylko, że osoby zarządzające Twoją stroną na Facebooku mogą widzieć Twoje wiadomości z Instagrama i odpowiadać na nie. Jeśli chcesz zachować prywatność swoich wiadomości, kliknij, aby wyłączyć przełącznik.

Gdy będziesz gotowy do przejścia do następnego ekranu, kliknij „Potwierdź”.

Otworzy się okno podręczne, w którym możesz wpisać swoją nazwę użytkownika lub adres e-mail i hasło.

Po tym kliknij przycisk 'Zaloguj się'.

Po kilku chwilach zobaczysz komunikat informujący, że Twoje konta na Instagramie i Facebooku są teraz połączone.

Jak wyświetlić zdjęcia z Instagrama w WordPressie?

W przeszłości można było łatwo osadzać obrazy z Instagrama w WordPressie, używając protokołu znanego jako oEmbed.

Jednak Facebook zmienił sposób działania oEmbed, więc nie można już łatwo osadzać obrazów z Instagrama w WordPressie.

Zamiast tego musisz teraz zarejestrować aplikację i użyć tokena klienta, aby pobrać dane z Facebook Graph API, zanim będziesz mógł osadzić treści z Instagrama w WordPress.

Na szczęście łatwo jest naprawić problem z osadzaniem Instagrama w WordPressie za pomocą wtyczki Smash Balloon Social Photo Feed. Następnie możesz osadzać konkretne zdjęcia z Instagrama na swojej stronie internetowej.

Możesz nawet dodać zdjęcia z Instagrama do obszarów gotowych na widżety, takich jak stopka na Twojej stronie WordPress, nagłówek, pasek boczny i inne. Pozwala to łatwo wyświetlać ten sam obraz na całej stronie internetowej.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać zdjęcia z Instagrama w widżecie paska bocznego WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak osadzić film z Facebooka w WordPress lub naszymi ekspertyzami dotyczącymi najlepszych wtyczek social proof dla WordPress i WooCommerce.

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.