IT

티스토리 블로그에 인스타그램 공유하기(피드 삽입하는 법)

필자가 이 블로그에 쓴 글 ‘윤스테이 촬영장소 구례 쌍산재 (인근 추천 여행지 포함)‘을 보면 윤스테이 촬영지 쌍산재의 공식 인스타그램을 플러그인 처럼 본문에 삽입했다. 인스타그램을 내용을 캡쳐하기 보다 플러그인처럼 삽입을 하면 실시간 업데이트 되는 내용과 댓글을 그대로 확인할 수 있는 장점이 있다. 그래서 개인적으로 캡쳐보다는 이런식의 삽입방법을 선호하는 편이다. 본문에 인스타그램 피드를 삽입하면서 혹시나 구독자 블로거 중에 필자와 같이 인스타그램을 삽입하는 방법을 궁금해 할 수 있을 거란 생각에 글을 작성해 본다. 이 글만 보면 누구나 할 수 있다. 사실 어려운 것도 전혀 없다. 복사 붙여넣기 기능만 알고 있으면 할 수 있는 방법이다.

티스토리 블로그에 인스타그램 공유하기

바로 인스타그램 피드를 본문에 삽입하는 방법을 소개하겠다.

 

본문에 삽입된 인스타그램 피드

위 이미지는 이전에 쓴 글에 인스타그램 피드를 삽입한 화면을 캡쳐했다. 위와 같이 본문에 적용이 된다. 인스타그랩에 올려진 이미지 뿐만 아니라 좋아요 갯수, 댓글 등을 실시간으로 확인이 가능하다.

 

단계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)

인스타그램 비활성화, 비활성화 해제

인스타그램 미여군 사칭 사기꾼의 DM

키워드마스터 블로그 키워드 글감 찾기

블로그 글 발행 시간 언제가 가장 좋을까?

티스토리 ‘블로그한경닷컴’ 다음(Daum) 메인에 소개, 포털의 위력 조회 수 1.1만

Bing 웹마스터 도구 블로그 등록 검색 노출 SEO 최적화

티스토리 블로그 네이버 검색 노출, 네이버 웹마스터도구 등록 하기 네이버 검색 최적화

티스토리 블로그 운영 11년, 누적 방문 600만, 애드센스 월 수익 1,000달러 달성 인증

Related Posts

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

사이트 주소에 WWW 포함 여부, 현대 웹사이트 주소의 트렌드와 선택 기준

웹사이트 도메인 주소에 “WWW”를 포함시키거나 포함시키지 않는 결정은 사용자 경험과 웹사이트 운영 측면에서 고려될 수 있는 전략이다. 최근의 트렌드는 기술적 중요성보다는 사용자의 편의성과 브랜드의 식별성을 중시하는 방향으로 나아가고…

SKT 다이렉트 플랜 요금제 결합할인 유의사항

SKT 다이렉트 플랜 요금제 결합할인 유의사항

통신비 부담을 줄이고 싶은데, 데이터 사용량은 줄이고 싶다. “SKT 통신비 다이어트, T 다이렉트 플랜”이 바로 그 해답을 제시한다. 조금만 잘 찾아보면 데이터 사용은 그대로 유지하면서 통신비는 줄일 수…

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

SKT 선택약정할인 할인반환금 휴대전화요금 25%할인 유의사항

선택약정할인제도 선택약정할인제도는 단말 지원금을 받지 않는 고객에게 요금 할인 혜택을 제공하는 제도이다. 이 제도는 지급 단말, 중고 단말, 신규 단말 이용 고객 모두에게 적용되며, 요금 상품 선택과 12/24개월의…

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

도장만들기 전자서명 전자결재용 도장 이미지 무료 생성 로또번호자동생성기 추천사이트 STAMPNG

취업, 이직 준비나 정부 지원금 신청 할 때, 문서 작업시 대부분 이름과 서명란이 있다. 매번 느끼지만 디지털과 아날로그의 경계에 있는 듯한 느낌이다. 서명란에 싸인이나 도장을 삽입하는 과정은 간단해…

GitHub 콘솔 git add, git commit, git push 명령어 정리

GitHub 콘솔(명령줄 인터페이스)에서 커밋하는 방법은 여러 단계로 구성된다. 여기서는 Git을 사용하여 변경사항을 커밋하고 GitHub 저장소에 푸시하는 기본적인 절차를 안내한다. 이 과정을 시작하기 전에, 로컬 컴퓨터에 Git이 설치되어 있어야…

알리익스프레스 Windows Hello 내돈내산 웹카메라 구매 후기 및 설치 드라이버

알리익스프레스 Windows Hello 카메라 내돈내산 후기 및 드라이버

필자가 가지고 있는 랩탑 레노버 씽크패드 P14S에서는 Windows Hello 기능이 지문과 얼굴인식으로 되어 전원을 켜거나 브라우저에서 로그인할 때, PIN번호를 누르지 않아도 지문 또는 얼굴인식으로 간단히 해결 할 수…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다