Czy wiesz? W 2025 roku 62% Amerykanów deklarowało posiadanie akcji — wskaźnik ten utrzymuje się od 2023 roku, według Gallupa. To duża grupa odbiorców, która interesuje się tym, gdzie znajdują się rynki.
Chcesz mieć na swojej stronie aktualne dane rynkowe — listę obserwowanych pozycji na blogu finansowym, ceny kryptowalut na stronie projektu, kilka tickerów w nagłówku — a zwykłe metody ciągle zawodzą. Darmowe osadzenia z dużych portali finansowych mają branding i ciężko je stylować; kopiowane iframes psują układ, a samodzielne rozwiązanie wymaga obsługi API i biblioteki wykresów.
Łatwiejszą opcją jest Elfsight Stocks widget, narzędzie bez kodowania, które wyświetla akcje, pary forex i kryptowaluty jako przewijający się ticker, karty, tabelę lub listę. Wartości aktualizują się automatycznie bez ponownego ładowania strony, wygląd można dostosować, a osadzenie działa na każdej stronie, która akceptuje niestandardowy blok HTML.
- Najszybszy bezkodowy sposób osadzenia tickera giełdowego
- Jak metody dostępne porównują się pod kątem wysiłku, kontroli i kosztów
- Który z pięciu układów najlepiej pasuje na Twojej stronie?
- Wskazówki konfiguracji i optymalizacji, wykraczające poza oczywiste
Szybki start: Dodaj notowania akcji na swojej stronie
Jeśli chcesz po prostu uruchomić to na żywo i nie potrzebujesz uzasadnień dla każdej decyzji — te cztery kroki doprowadzą cię do celu.
- Otwórz Edytor widżetu akcji i wybierz szablon.
- Dodaj zasoby, które chcesz pokazać.
- Kliknij „Dodaj do strony za darmo”, aby wygenerować kod osadzania.
- Wklej kod do niestandardowego bloku HTML na swojej stronie i opublikuj.
Zbuduj swój ticker giełdowy w interaktywnym edytorze poniżej ↓
Najlepsze metody wyświetlania notowań akcji na Twojej stronie
Zanim zdecydujesz się na jedną drogę, warto zobaczyć, jak prezentują się realistyczne możliwości — bo „najlepsza” konfiguracja strony z notowaniami zależy całkowicie od zakresu kontroli i utrzymania, na jaki jesteś gotów.
| Metoda | Poziom trudności | Dostosowywanie | Automatyczne aktualizacje | Koszt |
|---|---|---|---|---|
| Widżet Notowań Elfsight | Bez kodowania | Wysokość (układ, kolory, czcionki, CSS) | Tak | Darmowy plan / plany cenowe |
| Widżet osadzalny z portalu danych finansowych | Kopiuj-wklej | Niskie (szablony dostawcy) | Tak | Zwykle darmowy |
| Ręczny iframe / API danych rynkowych | Deweloper | Pełny (sam to zbudujesz) | Zależy od twojego kodu | API darmowe i płatne |
Wtyczka Elfsight sprawdzi się dla każdego, kto chce mieć kontrolę nad projektem bez konieczności kodowania. Darmowy, osadzalny widget z portalu danych finansowych to najszybszy sposób na łatwe wdrożenie, jeśli nie masz nic przeciwko brandingowi i ograniczeniom stylizacji dostawcy.
Układ i umiejscowienie: Gdzie osadzić widżet notowań
Wybór układu nie jest kwestią designu — to decyzja o strategicznym rozmieszczeniu. Lokalizacja tickera na Twojej stronie decyduje, który z pięciu układów będzie naprawdę działał, więc warto ustalić to na początku.
Dopasuj układ do miejsca, w którym się znajduje
Każdy układ ma naturalne miejsce. Zastanów się nad miejscem na stronie, zanim pomyślisz o stylu.
| Układ | Najlepsze miejsce | Dlaczego to pasuje |
|---|---|---|
| Ticker (tryb Topbar) | Pasek na całej stronie u góry każdej podstrony | Stały pasek informacyjny „rynkowy puls” — jak nagłówki na portalu informacyjnym |
| Ticker (tryb inline) | W artykule lub sekcji | Przewijany wiersz, który mieści się w treści, a nie jest przypięty do górnej części |
| Siatka kart / Stos kart | Wyróżniony blok na stronie głównej lub w poście | Większe karty z mini-wykresami przyciągającymi wzrok; przewijanie układa się jedno za drugim na wąskich ekranach |
| Tabela | Dedykowana strona „Rynki” | Sortowalne kolumny i pole Wolumen do porównania obok siebie |
| Lista | Pasek boczny lub wąska kolumna | Kompaktowe, pionowe wiersze mieszczące się w szerokości 300–500 px |
Dwie praktyczne uwagi. Po pierwsze, wszystko, co znajduje się powyżej widoku, konkuruje z Twoim głównym przekazem — pełny ticker w górnym pasku na stronie docelowej może odciągać uwagę od Twojego wezwania do działania, więc zarezerwuj go dla treści, gdzie dane rynkowe są sednem. Po drugie, układy Ticker i List najlepiej radzą sobie z wąskimi szerokościami mobilnymi; szerokie siatki i tabele wielokolumnowe reflowują, ale sprawdź je na telefonie przed publikacją.
Czy to odpowiednie narzędzie dla Twojej strony?
Warto być szczerym co do dopasowania — widget robi niektóre rzeczy dobrze, a inne całkiem nie.
Przydatne dla: wyselekcjonowana lista obserwacyjna, kontekst rynkowy na blogu finansowym, ceny kryptowalut na stronie projektu, pary forex na stronie podróżniczej lub przekazów pieniężnych, albo element wiarygodności, który pokazuje, że jesteś na bieżąco.
Nieprzeznaczony dla: panelu handlowego, narzędzia decyzji w czasie rzeczywistym oraz terminala analitycznego z danymi fundamentalnymi i filtrami.
Notowania są regularnie aktualizowane, ale nie gwarantujemy notowań w czasie rzeczywistym; katalog aktywów zawiera ponad 100 wyselekcjonowanych pozycji, a dane ograniczone są do ceny, zmian, wolumenu i mini-wykresu — bez kapitalizacji rynkowej, P/E ani danych o zyskach.
Konfigurowanie widżetu notowań akcji od podstaw
Gdy określisz lokalizację, oto pełny przewodnik — ten sam przebieg, bez względu na to, czy wybierasz WordPress, Shopify czy stronę kodowaną ręcznie.
Krok 1: Wybierz szablon startowy
Otwórz edytor — trafisz do galerii szablonów z ponad 20 gotowymi punktami startowymi. Najpierw wybierz ten, który najlepiej odpowiada twojemu celowi, abyś modyfikował, a nie zaczynał od zera.
Najpopularniejsze opcje
- Jasny motyw notowań / Ciemny motyw notowań
- US Tech Stocks Ticker / Ticker Tape — pre-built scrolling strips for a header band.
- Najważniejsze kryptowaluty — siatka skoncentrowana na kryptowalutach, jeśli to twoja grupa odbiorców.
Szablony ustawiają tylko wartości domyślne — każdy kolor, układ i zasób można później edytować, więc nie przesadzaj z tym wyborem. Kliknij „Kontynuuj z tym szablonem”, aby przejść dalej.
Krok 2: Dodaj zasoby
Następnie otwórz zakładkę Pozycje. To tutaj budujesz swoją listę obserwowanych. Kliknij Dodaj pozycję, aby otworzyć panel wyszukiwania, w którym możesz filtrować według Wszystko, Akcje, Forex lub Kryptowaluty i przeszukać alfabetyczny katalog.
W jednym widżecie możesz swobodnie łączyć typy aktywów — kilka akcji technologicznych obok Bitcoina i pary walutowej — to całkiem w porządku.
Krok 3: Wybierz układ
Teraz przejdź do zakładki Układ i wybierz, jak aktywa będą rozmieszczone. To krok, który zajmuje najwięcej czasu — poświęć mu chwilę, bo układ decyduje o tym, jak widget będzie czytał na stronie.
Pięć dostępnych układów
- Siatka kart — wielokolumnowa siatka kart zasobów z ceną, zmianą i miniwykresem.
- Karty w stosie — pojedyncza karta na raz w przesuwnym karuzelu z kropkami nawigacyjnymi.
- Ticker — przewijany baner informacyjny, z trybami wyświetlania Inline lub Topbar i suwakiem prędkości przewijania.
- Tabela — kolumny sortowalne, w tym kolumna Objętość; najlepsza na dedykowaną stronę z rynkami.
- Lista — kompaktowe pionowe wiersze pasujące do paska bocznego.
Jeśli nie jesteś pewien, układ Ticker sprawdza się w około 80% nagłówków stron — jest zwarty, przyciąga wzrok ruchem i na urządzeniach mobilnych radzi sobie bezproblemowo. Wybieraj układ Tabela tylko wtedy, gdy celem jest porównanie, ponieważ potrzebuje dużo miejsca w poziomie.
Krok 4: Ustaw opcje wyświetlania
Po wybraniu układu dopracuj, co wyświetla każde aktywo. Ogólne kontrole — Pokaż ikonę aktywa, Pokaż mini-wykres i Format zmiany ceny (Wartość, Procent lub oba) — pojawiają się dla każdego układu. Układ Ticker dodaje suwak prędkości przewijania i przełącznik Topbar; układ Tabela pozwala włączać/wyłączać poszczególne kolumny.
Kolumny tabeli
- Cena — aktualne notowanie.
- Zmiana (absolutna) — ruch wartości dolara.
- Zmiana (%) — ruch procentowy.
- Wolumen obrotu — dodatkowe dane, poza ceną i zmianą.
- Miniwykres
To pełny zestaw pól danych, które oferuje widget. Brak wartości rynkowej, wskaźnika P/E ani zakresu dziennego — jeśli planowałeś pokazać dane fundamentów, ten moment to dostosowania oczekiwań.
Krok 5: Dostosuj styl motywu
Otwórz kartę Motyw i kliknij Dostosuj motyw, aby dopasować widget do identyfikacji wizualnej marki.
Elementy konfigurowalne
- Kolory tła i konturu
- Zwiększ/zmniejsz parametry cen
- Rozmiar i kolor tytułu widżetu
- Promień zaokrąglenia narożników
- Rodzina czcionek i kolor tekstu
Dostępne są także pola CSS niestandardowe i JS niestandardowe, jeśli czujesz się komfortowo z kodowaniem i chcesz mieć większą kontrolę.
Krok 6: Dostosuj język i ustawienia
W zakładce Ustawienia możesz ustawić język interfejsu, skorzystać z Edytuj teksty, aby przeformułować dowolne komunikaty interfejsu, oraz otworzyć edytory niestandardowego CSS lub Custom JS.
Krok 7: Pobierz kod i dodaj go na swoją stronę
Gdy widget będzie wyglądał dobrze, kliknij “Dodaj na stronę za darmo”, aby wygenerować kod instalacyjny, a następnie wklej ten fragment tam, gdzie chcesz, aby pojawiał się ticker. Kod działa na każdej platformie obsługującej niestandardowy blok HTML, w tym WordPress, Shopify, Wix, Squarespace, i Webflow. Kroki konfiguracji różnią się nieznacznie w zależności od CMS — skorzystaj z podlinkowanych przewodników dla wersji CMS-owych.
Na WordPressie najczęściej wybierane miejsce docelowe: otwórz stronę w Edytorze bloków, dodaj blok Własny HTML, wklej kod i opublikuj. To cała instalacja.
Szybkie sprawdzanie problemów
- Widżet się nie pojawia: Upewnij się, że kod trafił do bloku Niestandardowy HTML, a nie do standardowego bloku tekstowego.
- Pojawia się dopiero po odświeżeniu: Na motywach z nawigacją AJAX skrypt platformy może wymagać załadowania w sekcji <head> strony.
- Stara wersja nadal się wyświetla: Wyczyść pamięć podręczną wtyczki buforującej lub bufor CDN po wklejeniu.
- Scrollbars inside the widget: Kontener osadzania jest zbyt wąski — powiększ blok HTML, aż znikną.
Inne sposoby dodania notowań do Twojej strony
Widget nie jest jedyną drogą — w zależności od Twoich potrzeb inna metoda może być lepsza.
Osadzalny widget z portalu danych finansowych
Kilka serwisów z danymi rynkowymi oferuje darmowe widgety z notowaniami do kopiowania i wklejania na stronę.
- Otwórz kreator widżetów w portalu danych i wybierz widżet notowań lub listę symboli.
- Wybierz symbole i podstawowy schemat kolorów.
- Skopiuj wygenerowany fragment osadzenia.
- Wklej to do niestandardowego bloku HTML na swojej stronie.
Ręczny iframe lub API danych rynkowych
Jeśli masz zasoby programistyczne, możesz zbudować ticker samodzielnie. Niektórzy szukają darmowych kodów tickerów giełdowych do zastosowań na stronach internetowych i łączą je z API danych rynkowych oraz biblioteką wykresów.
- Zarejestruj się po API danych rynkowych i uzyskaj klucz API.
- Napisz kod do pobierania notowań i obsługi interwału odświeżania.
- Wyświetl wartości przy użyciu biblioteki wykresów lub własnego kodu HTML.
- Osadź wynik za pomocą iframe’a lub skryptu inline.
Wskazówki optymalizacji dla Twojego tickera giełdowego
Masz działający widget — to właśnie te korekty odróżniają ten, który po prostu działa, od tego, który zajmuje miejsce na stronie.
- Utrzymuj listę obserwowanych aktywów na krótko. Pięć do dziesięciu istotnych aktywów czyta się znacznie lepiej niż ściana z pięćdziesięciu. Skoncentrowana lista sygnalizuje redaktorską ocenę; wyczerpująca lista sugeruje, że wrzuciłeś każdy symbol, jaki znalazłeś.
- Dodaj obok zastrzeżenie o opóźnionych danych. Krótka uwaga, na przykład “Notowania mogą być opóźnione i służą wyłącznie celom informacyjnym”, chroni Cię jako wydawcę i ustala realistyczne oczekiwania, ponieważ widget nie jest strumieniem notowań w czasie rzeczywistym.
- Regularnie sprawdzaj swoje pozycje. Tickers są często przemianowywane lub wycofywane — zwłaszcza kryptowaluty — więc od czasu do czasu zerknij na widżet, aby potwierdzić, że nadal pokazuje to, co miało być wyświetlane.
- Dopasuj szerokość do kontenera. Ticker o szerokości 1200 px powinien być w pasku o pełnej szerokości; umieść tę samą szerokość w pasku bocznym, a dostaniesz overflow lub paski przewijania. Dopasuj rozmiar do miejsca, w którym go umieszczasz.
FAQ (często zadawane pytania)
Czy mogę dodać notowania akcji do dowolnego kreatora stron?
Czy ticker giełdowy wyświetli się prawidłowo na urządzeniach mobilnych?
Jak aktualne są dane giełdowe?
Jakie aktywa może wyświetlać widget notowań akcji na stronie?
Czy mogę dostosować wygląd tickera notowań?
Podsumowanie
Dodanie notowań akcji na stronę sprowadza się do trzech decyzji: gdzie je umieścisz, który z pięciu układów pasuje do tego miejsca i które aktywa trafią do twojej watchlisty. Gdy to ustalisz, proces tworzenia to przebieg bez kodu: wybierz szablon, dodaj aktywa, wystylizuj i wklej jeden fragment. Widget obsługuje akcje, forex i kryptowaluty z wyselekcjonowanego katalogu, aktualizuje się automatycznie i mieści w jasnych granicach: kontekst rynkowy buduje wiarygodność, a nie terminal handlowy.
Jeśli masz już rozplanowane rozmieszczenie i zasoby, następnym krokiem jest otwarcie edytora Widżetu akcji i zbudowanie go — albo najpierw przejrzyj pełną listę funkcji, aby potwierdzić, że pasuje.
