Jak dodać (osadzić) post z instagrama na blogu?

Jeśli jednocześnie prowadzisz bloga i instagrama to warto te kanały reklamować wzajemnie u siebie: na instagramie odsyłać do blogowych wpisów, a w blogowych postach umieszczać zdjęcia z instagrama. Ale jak dodać instagramowy post w treści wpisu na blogu? Dziś pokażę Ci jak osadzić post z instagrama!

 

1. Wybierz post który chcesz udostępnić. 

Zakładam, że wpis blogowy piszesz na komputerze więc w nowym oknie otwórz instagram i kliknij w zdjęcie, które chcesz umieścić na blogu. Dodam, że można tak zrobić z każdym zdjęciem, nie tylko z Twojego profilu - jest tylko jeden warunek: profil musi być publiczny. Jeśli osadzisz zdjęcie z profilu prywatnego, to na blogu zdjęcie się nie załaduje. 

Gdy wybrane zdjęcie się powiększy, wybierz trzy kropeczki obok awatara.

2. Kliknij w "kod osadzania"

Po kliknięciu w trzy kropeczki pojawią się możliwe opcje. Możesz wybrać między innymi skopiowanie linku czy udostępnienie, ale nas interesuje "kod osadzania" :)

3. Skopiuj kod osadzania

Teraz możesz skopiować kod. Zauważ, że tuż nad buttonem, haczykiem możesz zaznaczyć czy zdjęcie ma się pojawić z opisem czy też bez. Domyślnie "dołącz opis" jest włączone - jeśli go nie chcesz odznacz haczyk przed skopiowaniem kodu. Teraz kliknij na "kopiuj kod osadzania"

4. Przejdź do edycji posta

Teraz wróć do tworzenia posta i wybierz z paska narzędziowego ikonkę ołówka (pierwszą z lewej strony).

5. Wybierz "Widok HTML"

Po kliknięciu w ołówek będziesz mieć możliwość przełączania się między widokiem tworzenia (czyli tym w którym obecnie jesteś), a trybem HTML. Teraz wybierz "Widok HTML" - żeby kod osadzania zadziałał musi być dodany do kodu posta.

6. Zmień ułożenie kodu

Domyślnie, w nowej wersji, Blogger zbija kod w jedną linijkę. W takim widoku łatwo się pomylić dlatego polecam Ci wybrać z paska narzędziowego ikonkę "Formatuj HTML" - dzięki temu kod będzie bardziej przejrzysty.

 

7. Wklej kod osadzania wybranego zdjęcia

Teraz pozostaje wkleić kod, który wcześniej skopiowaliśmy. Jesteśmy w trybie HTML i każdy symbol ma tam znaczenie więc nic nie kasuj. Znajdź fragment tekstu po/przed którym chcesz umieścić zdjęcie z instagrama i wklej tam kod osadzania. Pamiętaj, że tego elementu nie przesuniesz później w "widoku tworzenia" - masz wtedy do wyboru albo przesuwać tekst nad/pod osadzone zdjęcie lub znów przejść do widoku HTML.

8. Opcjonalnie: zmień szerokość osadzonej ramki lub wyśrodkuj ją

Domyślnie kod osadzania określa, że ramka będzie miała maksymalnie 540px. Jeśli chcesz by zdjęcie było szerokości posta znajdź w skopiowanym kodzie osadzania 540px i zamień je na 100% (miejsce zaznaczone na żółto na graficie w punkcie 7). 

Jeśli chcesz by rozmiar pozostał, ale ramka była wyśrodkowana względem treści posta, musisz kod osadzania wkleić między znaczniki <center> ... </center>, co powinno wyglądać tak:

<center>

KOD OSADZANIA

</center>

Efekt?

Poniżej możesz zobaczyć post z mojego instagramowego profilu, bez dołączonej treści i powiększony do 100% szerokości wpisu blogowego :)

 

Wyświetl ten post na Instagramie.

Post udostępniony przez Karolina | Odczarujmy bloggera (@karografia)

Proste, prawda?

Jeśli jednak coś poszło nie tak lub chcesz o coś zapytać, to śmiało! Nie ma głupich pytań!