필자가 이 블로그에 쓴 글 ‘윤스테이 촬영장소 구례 쌍산재 (인근 추천 여행지 포함)‘을 보면 윤스테이 촬영지 쌍산재의 공식 인스타그램을 플러그인 처럼 본문에 삽입했다. 인스타그램을 내용을 캡쳐하기 보다 플러그인처럼 삽입을 하면 실시간 업데이트 되는 내용과 댓글을 그대로 확인할 수 있는 장점이 있다. 그래서 개인적으로 캡쳐보다는 이런식의 삽입방법을 선호하는 편이다. 본문에 인스타그램 피드를 삽입하면서 혹시나 구독자 블로거 중에 필자와 같이 인스타그램을 삽입하는 방법을 궁금해 할 수 있을 거란 생각에 글을 작성해 본다. 이 글만 보면 누구나 할 수 있다. 사실 어려운 것도 전혀 없다. 복사 붙여넣기 기능만 알고 있으면 할 수 있는 방법이다.
바로 인스타그램 피드를 본문에 삽입하는 방법을 소개하겠다.
위 이미지는 이전에 쓴 글에 인스타그램 피드를 삽입한 화면을 캡쳐했다. 위와 같이 본문에 적용이 된다. 인스타그랩에 올려진 이미지 뿐만 아니라 좋아요 갯수, 댓글 등을 실시간으로 확인이 가능하다.
단계1 티스토리 에디터 HTML모드로 전환
먼저, 인스타그램 피드를 삽입하기 위해서, 작성중인 본문 에디터의 전환이 필요하다. 기본모드로 되어있는 에디터를 HTML모드로 전환을 해준다. 새 에디터 우측 윗부분에 보면 기본모드라고 적혀있는 곳을 선택해 드랍메뉴를 불러와 HTML을 선택해주면 간단히 화면전환이 이루어지면서 에디터가 변환이 된다.
인스타그램 피드를 삽입할 위치를 HTML 편집기 내에서 찾아서 위치를 잡아 <center></center>를 입력한다. <center>는 가운데 정렬 태그이다. 삽입한 인스타그램 피드를 가운데에 정렬시켜주는 기능이다. 가운데 정렬을 원치 않는 경우 이 과정을 생략할 수 있다.
단계2 인스타그램 공유링크 복사
다음 단계는 블로그에 공유할 인스트그램 피드로 이동한다. 그리고 올라온 글 내용을 눌러 본문 내용 보기를 하면 상세한 내용이 보인다. 이 때 오른쪽 상단에 보면 점선 모양의 아이콘이 있다. 점선 아이콘을 눌러 메뉴를 불러온다. 메뉴에는 게시물로 이동, 공유대상, 링크복사, 퍼기가, 취소 등의 선택지가 나열된다. 이 중에서 ‘퍼가기‘를 선택한다.
엄청 길고 복잡한 코드가 생성이 된다. 코드에 집중할 것 없이 바로 Embed 태그 복사 버튼을 눌러 코드를 복사한다.
복사가 됐다는 문구가 드면 티스토리 편집화면으로 다시 이동한다.
단계3 티스토리에서 인스타그램 공유 Embed 태그 붙여넣기
다시 티스토리 편집화면으로 이동 후, <center></center>태그 사이에 인스타그램에 퍼가기로 복사한 Embed 태그그 붙여넣기 한다. <center>태그를 사용하는 이유는 embed되는 인스타그램 태그가 기본적으로 좌측정렬로 되어 왼쪽으로 치우쳐 붙어버리기 때문에 블로그 배열 구조상 보기가 않좋기 때문이다. 만약 인스타그램 피드를 왼쪽으로 정렬된 상태가 좋다면 <center>태그는 생략해도 된다.
코드 붙여넣기가 완료 되면, HTML모드에서 기본모드로 바꾸어 제대로 삽입이 됐는지 확인한다.
위와 같이 나오면 정상적으로 삽입이 된 상태다. 하단에 SCRIPT라고 적혀 있는 부분은 새 에디터로 업데이트 되면서 보여지는 부분이다. 미리보기나 글 발행 후에는 위 스크립트 부분은 나오지 않으니 신경쓰지 않아도 된다.
인스타그램 태그 붙여넣기 결과
정상적으로 반영이 되면 위와 같이 본문에 인스타그램 피드의 한 부분을 삽입할 수 있다. 화면 전환 과정이 두번 정도 있어서 다소 혼동이 될 수 있으나 천천히 본문을 다시 읽어보면서 순서를 익히면 전혀 어려울 것이 없다.
단계1 티스토리 에디터 HTML모드로 전환
단계2 인스타그램 공유링크 복사
단계3 티스토리에서 인스타그램 공유 Embed 태그 붙여넣기
위 순서가 다소 복잡하다고 여기면 단계2를 한 후 단계1과 3을 동시에 진행하면 화면 전환을 한 번만 하고도 삽입할 수 있기 때문에 보다 쉽게 할 수 있을 듯하다.
인스타그램 윈도우 PC버전 사용해보니(Feat. Microsoft Store)
티스토리 ‘블로그한경닷컴’ 다음(Daum) 메인에 소개, 포털의 위력 조회 수 1.1만
Bing 웹마스터 도구 블로그 등록 검색 노출 SEO 최적화