본문 바로가기
연습장/etc.

[Tistory] 인스타그램 피드 삽입하기

by Ruas 2024. 1. 8.
728x90

 

블로그 포스팅 시 아래 포스트 처럼 인스타그램의 피드를 그대로 블로그에 삽입할 수 있는 방법이 있다.

 

 

[강원] 설악산

Instagram에서 이 게시물 보기 Ruas Travel(@ruas_travel)님의 공유 게시물

hororok-daily.tistory.com

 

Instagram에서 제공하는 API를 사용하는 방법으로,
글 작성 화면에서 간단하게 삽입할 수 있다.


1. 삽입 할 피드에서 정보 가져오기

 

 

삽입할 인스타그램 피드에서  퍼가기를 누르면

 

 

Embeded 태그 복사 라는 버튼을 확인할 수 있다.

해당 버튼을 눌러 태그를 복사하고 블로그 포스팅 화면으로 이동한다.

 


2. 포스팅 삽입

 

복사한 Embeded 태그는 우리가 흔하게 포스트를 작성하는 화면에서 적용할 수 없다.

이를 적용하기 위해서는 편집 화면을 HTML 버전으로 변경해야 한다.

 

위의 사진에 있는 기본모드를 클릭하여 HTML로 변경하면

 

 

편집화면이 이렇게 변경된다.

이 곳에 복사해온 Embeded 태그를 붙여넣기만 하면 된다.

 


3. 정렬

 

하지만 이렇게 삽입한 경우 인스타그램 피드가 좌측으로 정렬되어 있는 경우가 있다.

 

 

 

 

이를 가운데 정렬하기 위해서는 위의 코드에 가운데 정렬을 위한 코드를 삽입해줘야 한다.

 

코드는 두 가지 종류가 있다.

 

<center></center>
<div align = 'center'></div>

 

이 두가지 방법 중 하나만 사용하면 되는데,
개인적으로는 첫 번째 방식을 사용해도 무관하니 간단한걸 추천한다.

 

각각 적용 방법을 보여주자면,

<center><embeded code></center>
<div align = 'center'><embeded code></div>

 

이렇게 적용하면 아래 처럼 가운데 정렬된 인스타그램 피드를 블로그 포스트에 삽입할 수 있다.

 

 

728x90

'연습장 > etc.' 카테고리의 다른 글

[Tistory] 구글 지도 삽입하기  (1) 2024.01.09

댓글