Jak utworzyć niestandardowy kanał zdjęć na Instagramie w WordPress

Opublikowany: 2023-08-26


Czy chcesz utworzyć niestandardowy kanał Instagram w WordPress?

Kanał na Instagramie może sprawić, że Twoja witryna będzie świeża i wciągająca, a jednocześnie zapewni Ci więcej polubień, udostępnień i obserwujących na Instagramie.

W tym artykule pokażemy, jak utworzyć niestandardowy kanał zdjęć na Instagramie dla Twojej witryny WordPress.

How to create a custom Instagram photo feed in WordPress

Po co umieszczać kanał Instagram w swojej witrynie WordPress?

Dodanie kanału Instagram do witryny WordPress pozwala wyświetlać odwiedzającym świeże treści bez dużej ilości dodatkowej pracy. Zachęca także czytelników do śledzenia Cię na Instagramie.

Zamiast ręcznie dodawać obrazy w edytorze bloków WordPress, możesz po prostu utworzyć kanał, który będzie aktualizowany automatycznie za każdym razem, gdy opublikujesz nowe zdjęcia na Instagramie. Możesz nawet wyświetlać zdjęcia innych osób w swojej witrynie, tworząc kanał hashtagów.

Na poniższym obrazku widać przykład marki, która wykorzystuje niestandardowy kanał Instagram do wyświetlania treści generowanych przez użytkowników.

An example of user-generated Instagram content

W ten sposób możesz użyć niestandardowego kanału na Instagramie, aby zapewnić cenny dowód społecznościowy i zarobić więcej pieniędzy w Internecie.

Powiedziawszy to, zobaczmy, jak utworzyć niestandardowy kanał zdjęć na Instagramie w WordPress.

Jak utworzyć niestandardowy kanał zdjęć na Instagramie w WordPress

Najprostszym sposobem na dodanie kanału zdjęć z Instagrama do swojej witryny jest użycie wtyczki Smash Balloon Instagram Feed. To najlepsza wtyczka Instagrama do WordPressa, która umożliwia błyskawiczne wyświetlanie treści z Twojego konta na Instagramie.

To także najprostszy sposób na rozwiązanie problemu z oEmbedem na Facebooku i Instagramie w WordPressie.

W naszym samouczku omówimy kilka kroków. Możesz skorzystać z poniższych szybkich łączy, aby przejść do różnych sekcji:

Jak połączyć konto na Instagramie z WordPress

Najpierw musisz zainstalować i aktywować wtyczkę Smash Balloon Instagram Feed. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress.

Uwaga: w przewodniku używamy wersji premium Smash Balloon, ponieważ umożliwia ona utworzenie całkowicie niestandardowego kanału na Instagramie. z kanałami hashtagowymi i obrazami, które można kupić. Jeśli dopiero zaczynasz lub masz niewielki budżet, dostępna jest również bezpłatna wtyczka Smash Balloon Social Photo Feed.

Po zainstalowaniu wtyczki przejdź do Aktualności na Instagramie »Ustawienia .

Możesz teraz wprowadzić klucz licencyjny Smash Balloon w polu „Klucz licencyjny”.

Adding a license to Smash Balloon's Instagram plugin

Informacje te znajdziesz w e-mailu z potwierdzeniem, który otrzymałeś przy zakupie Smash Balloon, a także na swoim koncie Smash Balloon.

Po dodaniu klucza licencyjnego kliknij przycisk „Aktywuj”.

Gdy już to zrobisz, możesz utworzyć niestandardowy kanał na Instagramie. Aby rozpocząć, wybierz opcję Kanał Instagrama »Wszystkie kanały , a następnie kliknij przycisk „Dodaj nowy”.

Creating an Instagram feed for WordPress

Smash Balloon pokaże teraz wszystkie rodzaje kanałów na Instagramie, które możesz utworzyć.

Po prostu wybierz typ kanału, który chcesz dodać do WordPressa i kliknij „Dalej”.

How to add an Instagram timeline feed to WordPress

Jeśli chcesz tylko wyświetlać swoje zdjęcia na Instagramie, możesz skorzystać z osobistego konta na Instagramie. Będziesz jednak potrzebować konta biznesowego na Instagramie, jeśli chcesz utworzyć kanał hashtagów lub pokazać posty, w których oznaczono Twoje konto.

Wskazówka: nie masz konta firmowego? Aby przekształcić swoje osobiste konto na Instagramie w konto firmowe, postępuj zgodnie ze szczegółowymi instrukcjami Smash Balloon.

Jeśli wybierzesz opcję „Opublikuj hashtag”, będziesz musiał wpisać hashtagi, których chcesz użyć. Aby wyświetlić wiele hashtagów w tym samym kanale, po prostu oddziel każdy hashtag przecinkiem.

Adding Instagram hashtags to your WordPress website

Gdy już to zrobisz, po prostu kliknij „Dalej”.

Czy chcesz wyświetlać posty, w których oznaczono Twoje konto? Zamiast tego będziesz musiał wybrać „Otagowane posty”, a następnie kliknąć „Dalej”.

How to show tagged posts in a custom Instagram feed

Bez względu na to, jaki rodzaj kanału tworzysz, będziesz musiał połączyć WordPress ze swoim kontem na Instagramie.

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

Creating a custom Instagram photo feed in WordPress

Następnie wybierz, czy chcesz wyświetlać obrazy z konta osobistego czy firmowego.

Jeśli wybierzesz przycisk obok opcji „Osobiste”, Smash Balloon nie będzie domyślnie zawierać awatara i biografii z Instagrama w nagłówku. Zawsze możesz jednak dodać awatar i biografię Instagrama ręcznie w ustawieniach wtyczki.

Choose between a personal and business Instagram account

Po wybraniu opcji „Osobiste” lub „Firmowe” wystarczy kliknąć „Zaloguj się przez Facebook”.

Możesz teraz wybrać konto na Instagramie, które chcesz umieścić na swojej stronie WordPress, i kliknąć „Dalej”.

Connecting to an Instagram account

Następnie zaznacz pole obok strony na Facebooku powiązanej z kontem na Instagramie, którego chcesz używać.

Po wykonaniu tej czynności należy kliknąć przycisk „Dalej”.

Connecting a Facebook page to WordPress

Zobaczysz teraz wyskakujące okienko ze wszystkimi informacjami, do których Instagram Feed Pro będzie miał dostęp i działaniami, które może wykonać.

Aby ograniczyć dostęp wtyczki do Twojego konta na Instagramie, po prostu kliknij dowolny przełącznik, aby przełączyć go z „Tak” na „Nie”. Pamiętaj tylko, że może to mieć wpływ na zdjęcia wyświetlane na Twoim blogu lub stronie WordPress.

Mając to na uwadze, zalecamy pozostawienie wszystkich przełączników włączonych. Kiedy będziesz zadowolony z konfiguracji kanału, kliknij „Gotowe”.

Giving Smash Balloon access to your Instagram account

Zobaczysz teraz wyskakujące okienko z kontem na Instagramie, które właśnie dodałeś do swojej witryny.

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

How to connect Instagram to WordPress using Smash Balloon

Instagram Feed Pro przeniesie Cię teraz z powrotem do ekranu Kanały na Instagramie »Wszystkie kanały .

Aby utworzyć niestandardowy kanał na Instagramie, po prostu zaznacz pole obok konta na Instagramie, którego chcesz używać. Następnie kliknij „Dalej”.

Creating a new Instagram feed in WordPress

Wtyczka utworzy teraz kanał zdjęć na Instagramie, który możesz dodać do dowolnej strony, postu lub obszaru gotowego do widżetów.

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

Domyślnie Smash Balloon otworzy Twój kanał w swoim edytorze, gotowy do dostosowania.

Po prawej stronie zobaczysz podgląd swojego kanału zdjęć na Instagramie. Po lewej stronie znajdują się wszystkie ustawienia, których możesz użyć do dostosowania kanału mediów społecznościowych.

How to create a custom Instagram feed with Smash Balloon

Większość tych ustawień jest oczywista, ale szybko omówimy niektóre kluczowe obszary.

Aby zmienić układ, po prostu kliknij „Układ kanału” w menu po lewej stronie. Możesz teraz wybrać układ Siatka, Mur lub Karuzela.

Switching to a different Instagram layout

Dostępny jest również układ Wyróżnione, który domyślnie wyróżnia co trzecie zdjęcie.

Po kliknięciu różnych opcji podgląd na żywo zostanie automatycznie zaktualizowany, aby pokazać nowy układ. Ułatwia to wypróbowanie różnych projektów i znalezienie tego, który najbardziej Ci odpowiada.

Domyślnie Smash Balloon wyświetla tę samą liczbę zdjęć na komputerach stacjonarnych i urządzeniach mobilnych. Możesz podejrzeć, jak kanał Instagram będzie wyglądał na komputerach stacjonarnych, tabletach i smartfonach, korzystając z rzędu przycisków w prawym górnym rogu.

Previewing an Instagram feed on desktop, mobile, and tablet

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

Aby to zrobić, po prostu wpisz inny numer w polu „Urządzenie mobilne” w sekcji „Liczba postów”.

How to show a different number of Instagram posts on mobile

Domyślnie Smash Ballon podzieli Twoje zdjęcia na 4 kolumny na komputerze, 2 kolumny na tabletach i jedną kolumnę na telefonie komórkowym.

Czy chcesz użyć innej liczby kolumn? Następnie przewiń do sekcji „Kolumny” w menu po lewej stronie.

Możesz teraz wpisać nowy numer w polach Komputer, Tablet lub Telefon komórkowy.

Showing a different number of columns in a custom Instagram feed

Aby mieć pewność, że Twój kanał na Instagramie będzie dobrze wyglądał na urządzeniach mobilnych, mądrze jest wyświetlić mobilną wersję swojej witryny WordPress.

Po dokonaniu zmian kliknij link „Dostosuj”. Spowoduje to powrót do głównego edytora Smash Balloon, gdzie możesz przejść do następnego ekranu ustawień, czyli „Schematu kolorów”.

Changing the Instagram feed color scheme

Domyślnie Smash Balloon używa schematu kolorów odziedziczonego z motywu WordPress, ale ma także motywy „Jasne” i „Ciemne”, których możesz użyć w swoim kanale na Instagramie.

Możesz nawet stworzyć własny schemat kolorów, wybierając opcję „Niestandardowy”, a następnie korzystając z ustawień, aby zmienić kolor łącza, kolor tła, kolor tekstu w WordPress i nie tylko.

Changing the Instagram color scheme

Domyślnie Smash Balloon dodaje nagłówek do kanału na Instagramie, który jest Twoim zdjęciem profilowym i nazwą Twojej strony. Może to zapewnić przydatny dodatkowy kontekst, dzięki któremu odwiedzający zrozumieją, skąd pochodzą te obrazy.

Aby zmienić wygląd tej sekcji, wróć do głównego ekranu ustawień i wybierz opcję „Nagłówek”.

Adding a header to a custom Instagram photo feed

Na tym ekranie możesz zmienić kolor tła, wyświetlić biografię na Instagramie, zmienić rozmiar nagłówka i wiele więcej.

Domyślnie nagłówek zawiera zdjęcie profilowe na Instagramie. Możesz jednak chcieć wyświetlić inny obraz, na przykład niestandardowe logo swojej witryny.

Aby zmienić zdjęcie profilowe, 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.

Adding a custom Instagram avatar to your WordPress website

Możesz także dodać inną biografię. Możesz na przykład dodać wezwanie do działania zachęcające ludzi do odwiedzenia Twojej strony na Instagramie.

Aby utworzyć unikalną biografię na Instagramie, po prostu wpisz ją w polu „Dodaj własną biografię”.

Adding a custom Instagram bio to your WordPress website

Gdy będziesz zadowolony z wyglądu nagłówka, kliknij link „Dostosuj”, aby wrócić do głównego ekranu ustawień.

Teraz musisz kliknąć „Posty”.

Creating a custom Instagram photo feed in WordPress

Na początek możesz przełączać się pomiędzy układami pudełkowymi i zwykłymi dla poszczególnych postów w kanale Instagram.

Aby to zrobić, wybierz opcję „Styl postu”.

Customizing an embedded Instagram photo feed

Możesz teraz kliknąć, aby wybrać układ, którego chcesz użyć.

Jeśli wybierzesz opcję „W ramce”, możesz zmienić kolor tła, dodać cień ramki i zwiększyć promień obramowania, aby utworzyć zakrzywione rogi.

Adding a box style to an embedded social media feed

Gdy będziesz zadowolony ze zmian, po prostu kliknij link „Posty”, aby powrócić do poprzedniego ekranu Smash Balloon.

Tym razem wybierz „Obrazy i filmy”.

Changing the resolution of an embedded Instagram feed

Smash Balloon automatycznie analizuje Twoje zdjęcia na Instagramie i wyświetla je w najlepszej rozdzielczości. Zalecamy użycie tych ustawień domyślnych, ponieważ mają one na celu zwiększenie szybkości i wydajności WordPressa. Możesz jednak powiększyć lub zmniejszyć obrazy na Instagramie, jeśli zajdzie taka potrzeba.

Aby zmienić rozmiar obrazu, po prostu otwórz menu „Rozdzielczość” i wybierz z listy jeden z domyślnych rozmiarów obrazu WordPress.

Changing the resolution for an embedded Instagram feed

Aby powrócić do poprzedniego ekranu, kliknij ponownie link „Posty”.

Tym razem wybierz „Napis”. Na następnym ekranie możesz wyświetlić podpis na Instagramie obok każdego obrazu, klikając suwak „Włącz”.

Showing Instagram captions on your WordPress website

Jeśli dodasz napisy na Instagramie do swojego kanału, możesz zmienić rozmiar i kolor tekstu oraz ustawić maksymalną długość tekstu.

Po wykonaniu tej czynności wystarczy kliknąć link „Posty”, aby powrócić do poprzedniego ekranu.

Showing social media captions on a website or blog

Następne ustawienie to „Podsumowanie polubień i komentarzy”.

Tutaj możesz dodać lub ukryć całkowitą liczbę polubień i komentarzy do każdego obrazu. Jeśli Twoje posty na Instagramie cieszą się dużym zainteresowaniem, liczby te mogą zachęcić ludzi do odwiedzenia Twojej strony na Instagramie lub rozpoczęcia obserwowania Cię w mediach społecznościowych.

Showing social media comments and likes on a website or blog

Jak zawsze, aby powrócić do poprzedniego ekranu, należy kliknąć „Posty”.

Ostatnią opcją jest „Stan najechania”, czyli nakładka, którą Smash Balloon dodaje do wpisu po najechaniu na niego myszką.

Customizing the hover state for an embedded social media photo feed

W tym miejscu możesz wybrać informacje wyświetlane przez Smash Balloon, gdy ktoś najedzie kursorem na post, korzystając z ustawień w sekcji „Informacje do wyświetlenia”.

Możesz także zmienić kolor nakładki po najechaniu myszką.

Adding a custom Instagram feed to WordPress

Jeśli jesteś zadowolony z wprowadzonych zmian, kliknij link „Dostosuj”.

Spowoduje to powrót do głównej strony ustawień Smash Balloon, gdzie możesz kliknąć przycisk „Załaduj więcej”.

Adding a load more button to a custom Instagram photo feed in WordPress

Tutaj możesz wyróżnić przycisk „Wczytaj więcej”, zmieniając jego kolor tła, kolor tekstu i stan najechania.

Możesz także spróbować dodać własną wiadomość do przycisku, wpisując ją w polu „Tekst”.

Customizing the load more button on a custom Instagram photo feed

Chociaż zalecamy pozostawienie tego przycisku włączonego, możesz go usunąć. Możesz na przykład zachęcić ludzi do odwiedzenia Twojego Instagrama, ograniczając liczbę zdjęć, które mogą zobaczyć w Twojej witrynie.

Aby usunąć przycisk, po prostu wyłącz suwak „Włącz”, tak aby zmienił kolor na szary.

Removing the 'Load More' button on a custom Instagram photo feed

Jeśli odwiedzającym podoba się to, co widzą, mogą zdecydować się na subskrypcję za pomocą przycisku „Śledź na Instagramie”, który pojawia się pod osadzonym kanałem.

Ponieważ jest to tak ważny przycisk, możesz dodać niestandardową stylizację, aby go wyróżnić. Aby to zrobić, wybierz opcję „Dostosuj”, aby powrócić do głównego ekranu ustawień. Następnie wybierz „Przycisk Obserwuj” w menu po lewej stronie.

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

Customizing the Instagram follow button

Domyślnie na przycisku znajduje się etykieta „Śledź na Instagramie”.

Możesz zastąpić tę wiadomość własną wiadomością, wpisując ją w polu „Tekst”.

Adding your own messaging to an Instagram CTA button

Smash Balloon ma wbudowany lightbox, który pozwala odwiedzającym otwierać zdjęcia i filmy na Instagramie bez opuszczania Twojej witryny.

Aby skonfigurować tę funkcję, wróć do głównego ekranu ustawień Smash Balloon, a następnie kliknij „Lightbox”.

The Smash Balloon lightbox feature

Tutaj możesz zmienić liczbę komentarzy Smash Balloon wyświetlanych w lightboxie.

Jeśli nie chcesz korzystać z funkcji Lightbox, możesz ją wyłączyć za pomocą suwaka „Włącz”.

Enabling the WordPress lightbox feature

Gdy będziesz zadowolony z wyglądu kanału na Instagramie, nie zapomnij kliknąć „Zapisz”, aby zapisać zmiany.

Możesz teraz dodać kanał Instagram do swojej witryny WordPress.

Wyświetlanie kanału Twoich zdjęć z Instagrama w WordPress

Możesz dodać niestandardowy kanał Instagram do swojej witryny za pomocą bloku, widżetu lub krótkiego kodu.

Jeśli utworzyłeś więcej niż jeden kanał za pomocą Smash Balloon, będziesz musiał znać kod kanału, aby móc korzystać z widżetu lub bloku.

Aby otrzymać ten kod, przejdź do Aktualności na Instagramie »Wszystkie kanały , a następnie skopiuj tekst w obszarze „Krótki kod”.

Na poniższym obrazku będziemy musieli użyć instagram-feed feed=4 .

Getting a shortcode for your custom Instagram feed

Jeśli chcesz osadzić kanał Instagram na stronie lub w poście, możesz użyć bloku Kanał Instagram.

Po prostu otwórz stronę lub post, w którym chcesz osadzić swój niestandardowy kanał na Instagramie. Następnie kliknij ikonę „+”, aby dodać nowy blok i zacznij wpisywać „Kanał na Instagramie”.

Gdy pojawi się odpowiedni blok, kliknij, aby dodać go do strony lub wpisu.

Adding the Feeds for Instagram block to your WordPress website

Blok domyślnie wyświetli jeden z Twoich kanałów na Instagramie. Jeśli chcesz wyświetlić inny kanał Smash Balloon, znajdź „Ustawienia skrótu” w menu po prawej stronie.

Tutaj po prostu dodaj krótki kod, a następnie kliknij „Zastosuj zmiany”.

Adding a social media feed to WordPress using shortcode

Jeśli podoba Ci się wygląd niestandardowego kanału na Instagramie, możesz opublikować lub zaktualizować stronę.

Inną opcją jest dodanie widżetu Instagram Feed do swojej witryny. To świetny sposób na pokazanie kanału Instagram na każdej stronie Twojej witryny. Na przykład możesz dodać widżet Instagram do paska bocznego lub stopki motywu WordPress.

Aby dodać widżet Kanał Instagram do swojej witryny, przejdź do Wygląd »Widżety . Następnie możesz kliknąć niebieską ikonę „+” w górnej części ekranu.

Adding an Instagram feed to a widget-ready area

W wyświetlonym panelu wpisz „Instagram Feed”, aby znaleźć odpowiedni widget.

Jak widać na poniższym obrazku, istnieją dwa widżety kanału Instagram, więc upewnij się, że używasz właściwego.

Adding the Instagram feed widget to a WordPress sidebar

Następnie po prostu przeciągnij widżet na obszar, w którym chcesz wyświetlić kanał Instagrama, na przykład na pasek boczny lub podobną sekcję.

Widżet automatycznie wyświetli jeden z kanałów, które utworzyłeś za pomocą Smash Balloon. Jeśli nie jest to właśnie utworzony niestandardowy kanał na Instagramie, wpisz kod kanału w polu „Ustawienia krótkiego kodu”.

Następnie kliknij „Zastosuj zmiany”.

Możesz teraz aktywować widżet, klikając przycisk „Aktualizuj”. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym dodawania i używania widżetów w WordPress.

An example of an embedded Instagram feed

Inną opcją jest osadzenie kanału Instagram na dowolnej stronie, poście lub obszarze gotowym na widget za pomocą krótkiego kodu.

Po prostu przejdź do Aktualności na Instagramie »Wszystkie kanały i skopiuj kod z kolumny „Krótki kod”. Możesz teraz dodać ten kod do dowolnego bloku Shortcode. Aby uzyskać pomoc dotyczącą umieszczania krótkiego kodu, zapoznaj się z naszym przewodnikiem dotyczącym dodawania krótkiego kodu.

Czy używasz motywu z włączoną funkcją blokowania? Następnie możesz użyć pełnego edytora witryny, aby dodać blok kanału Instagram w dowolnym miejscu na swojej stronie WordPress.

W panelu przejdź do Wygląd »Edytor .

How to add an Instagram feed to WordPress using the full-site editor

Domyślnie edytor całej witryny pokaże szablon główny motywu.

Jeśli chcesz dodać kanał Instagram do innego obszaru, kliknij „Szablon” lub „Części szablonu”.

Adding an Instagram feed to a WordPress template

Edytor wyświetli teraz listę wszystkich części szablonu tworzących motyw WordPress.

Po prostu kliknij szablon, w którym chcesz wyświetlić kanał Instagram.

A list of templates, in the WordPress full-site editor (FSE)

WordPress wyświetli teraz podgląd projektu.

Aby edytować ten szablon, kliknij małą ikonę ołówka.

Editing the WordPress homepage template using the full-site editor

Po wybraniu szablonu po prostu najedź myszką na obszar, w którym chcesz dodać kanał zdjęć na Instagramie.

Następnie kliknij niebieski przycisk „+”.

How to add a block to a template using full-site editor (FSE)

Gdy już to zrobisz, musisz wpisać „Kanał na Instagramie”.

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

Adding a Instagram feeds block using the full-site editor (FSE)

Jak zawsze, Smash Balloon domyślnie wyświetli kanał. Możesz zmienić ten kanał, dodając krótki kod, postępując zgodnie z tym samym procesem opisanym powyżej.

Bonus: Pozwól klientom kupować Twoje produkty za pośrednictwem Instagrama

Jeśli masz sklep internetowy, możesz również użyć niestandardowego kanału na Instagramie, aby łatwo sprzedawać swoje produkty.

Smash Balloon Instagram Feed Pro umożliwia oznaczanie zdjęć na Instagramie linkami do produktów, dzięki czemu użytkownicy mogą je kliknąć i kupić bezpośrednio, zamiast przeglądać strony produktów. Może to zwiększyć sprzedaż i zwiększyć zyski w Twoim sklepie.

How to add a shoppable link to an Instagram post

Aby uzyskać więcej informacji, zapoznaj się z naszym kompletnym przewodnikiem na temat dodawania obrazów do zakupów na Instagramie w WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak utworzyć niestandardowy kanał Instagram w WordPress. Możesz także zapoznać się z naszym porównaniem najlepszych wtyczek do rozdawania nagród WordPress, aby zwiększyć liczbę obserwujących w mediach społecznościowych i dowiedzieć się, jak utworzyć biuletyn e-mailowy.

Jeśli spodobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zapoznać się z samouczkami wideo WordPress. Można nas znaleźć także na Twitterze i Facebooku.