Chcesz wzbogacić swoją stronę internetową o dynamiczne materiały wideo z mediów społecznościowych? Zamiast zmuszać użytkowników do opuszczania Twojej witryny, możesz sprawić, by rolki (Reels) oraz TikToki odtwarzały się bezpośrednio na niej.
W tym krótkim poradniku pokażę Ci, jak w kilku prostych krokach skopiować odpowiedni kod osadzania (Embed) z Facebooka, TikToka oraz Instagrama, a następnie wrzucić go do panelu Sanity CMS.
Spis treści
- Krok 1: Jak skopiować kod z Facebooka?
- Krok 2: Jak skopiować kod z TikToka?
- Krok 3: Jak skopiować kod z Instagrama?
- Krok 4: Dodawanie rolki w panelu Sanity CMS
- Zwykły link czy kod Embed – jaka jest różnica?
1. Krok 1: Jak skopiować kod z Facebooka?
Otwórz wybraną rolkę na Facebooku (najwygodniej zrobić to na komputerze). W prawym dolnym rogu, tuż pod przyciskami polubień, komentarzy i udostępnień, znajdziesz ikonę trzech kropek (...). Kliknij w nią.
Z rozwiniętego menu wybierz opcję Osadź (oznaczoną ikoną nawiasów klamrowych </>).
Na ekranie pojawi się nowe okienko z wygenerowanym kodem <iframe>. Wystarczy, że klikniesz niebieski przycisk Skopiuj kod na samym dole.
2. Krok 2: Jak skopiować kod z TikToka?
Przejdź do interesującego Cię filmu na TikToku. W pasku po prawej stronie ekranu zlokalizuj ikonę strzałki (Udostępnij), znajdującą się na samym dole pod ikoną zapisanych (zakładki).
Po najechaniu na nią lub kliknięciu pojawi się menu z różnymi opcjami udostępniania. Wybierz okrągłą, turkusową ikonę </> podpisaną jako Osadź.
W kolejnym oknie zobaczysz długi fragment kodu zaczynający się od <blockquote.... Kliknij przycisk Skopiuj kod, aby zapisać go w schowku.
3. Krok 3: Jak skopiować kod z Instagrama?
Otwórz swój post lub rolkę na Instagramie w przeglądarce. W prawym górnym rogu posta (obok nazwy Twojego profilu) zobaczysz ikonę trzech kropek (...). Kliknij w nią.
W menu, które wyskoczy na środku ekranu, odszukaj i kliknij opcję Embed (lub Osadź, w zależności od wersji językowej).
Teraz zobaczysz okienko z gotowym kodem (możesz tu również odznaczyć opcję Include caption, jeśli nie chcesz wyświetlać opisu pod filmem). Kliknij niebieski przycisk Copy Embed Code.
4. Krok 4: Dodawanie rolki w panelu Sanity CMS
Gdy masz już skopiowany kod, zaloguj się do swojego panelu administracyjnego Sanity CMS.
- W lewej kolumnie (Content) przejdź do zakładki Rolki i Posty Social Media.
- Wybierz istniejący wpis z listy lub utwórz nowy za pomocą ikony plusa (
+). - Po prawej stronie zobaczysz formularz edycji, w którym znajdują się dwa kluczowe pola:
- Link do rolki / posta na social media: Tutaj wklejasz klasyczny, bezpośredni adres URL do filmu (np. skopiowany z paska przeglądarki lub za pomocą opcji „Kopiuj link”).
- Kod Embed z TikToka / Instagrama / FB (opcjonalnie): W to większe pole wklejasz cały skopiowany w poprzednich krokach kod osadzenia (
<iframe>lub<blockquote>).
Ważne: Po uzupełnieniu pól oczywiście publikujemy wszystkie wprowadzone zmiany, klikając zielony guziczek Publish znajdujący się w prawym dolnym rogu ekranu! ;)
(Opcjonalnie: Jeśli automatycznie pobrana miniaturka z social mediów nie wygląda dobrze na stronie, na samym dole formularza w polu Własna okładka / Cover możesz wgrać własne zdjęcie w wysokiej rozdzielczości).
5. Zwykły link czy kod Embed – jaka jest różnica?
W panelu Sanity widoczne są dwa miejsca na linki. Dlaczego warto uzupełniać oba i czym one się właściwie różnią?
- Zwykły link (Link do rolki / posta): Udostępnia materiał do zobaczenia bezpośrednio na urządzeniu w natywnej aplikacji lub przeglądarce. Gdy użytkownik kliknie w taki odnośnik, zostanie przekierowany na platformę społecznościową (Facebook, TikTok, Instagram).
- Kod osadzenia (Kod Embed): Odpowiada za osadzenie wideo na witrynie. Pozwala na załadowanie rolki w formie interaktywnego odtwarzacza, dzięki czemu film odtwarza się bezpośrednio na Twojej stronie internetowej, bez konieczności jej opuszczania!
