티스토리 블로그에 유튜브·인스타·트위터 삽입하는 확실한 방법

SNS 콘텐츠를 블로그에 넣고 싶다면 어떻게 해야 할까요?

티스토리 블로그에서 콘텐츠의 깊이와 생동감을 더하는 가장 쉬운 방법은
유튜브, 인스타그램, 트위터 같은 SNS 콘텐츠를 함께 삽입하는 것입니다.
텍스트 중심의 블로그와 이미지·영상 중심의 SNS는 서로를 보완하면서
사용자 경험을 크게 향상시켜줍니다. 이번 글에서는 각 플랫폼별 삽입 방법과
삽입 후 반응형 처리, 에디터 팁까지 구체적으로 알려드립니다.

유튜브 영상 삽입: HTML 코드로 더 유연하게

유튜브는 티스토리에서 가장 안정적으로 삽입되는 SNS입니다.
기본 에디터에서도 지원하지만 HTML 코드로 삽입하면
더 세밀한 크기 조절과 반응형 설정이 가능합니다.

삽입 방법	설명
기본 방식	글쓰기 에디터 → '동영상' → 유튜브 URL 입력
HTML 방식	유튜브 영상 → 공유 → 퍼가기 → iframe 코드 복사

HTML 코드 예시:

이 코드를 HTML 편집 모드에서 본문 원하는 위치에 삽입하시면 됩니다.

---

인스타그램 포스트 삽입: 외부 콘텐츠 허용 체크 필수

인스타그램은 이미지 기반 콘텐츠와 잘 어울리며
사용자 참여 유도에도 효과적입니다.
단, 삽입 전 인스타그램 게시물 공유 설정이 ‘공개’ 상태인지 확인하세요.

삽입 단계	설명
1단계	인스타그램 PC버전에서 게시물 클릭
2단계	오른쪽 상단 '…' 클릭 → '퍼가기(Embed)' 선택
3단계	코드 복사 → 티스토리 HTML 편집 모드에 붙여넣기

반응형을 고려하려면 width="100%"와 같은 조정이 필요합니다.
특히 블로그 스킨이 좁은 경우에는 가로폭 조절이 중요합니다.

---

트위터 게시물 삽입: 대화형 콘텐츠 강화에 효과적

트위터는 실시간성 있는 정보나 짧은 인용 콘텐츠를 삽입할 때
가장 적합한 SNS입니다.

삽입 순서	설명
1단계	트윗 우측 상단 '…' 클릭 → 'Embed Tweet' 선택
2단계	HTML 코드 복사
3단계	티스토리 HTML 편집 모드에 붙여넣기

삽입된 트윗은 프로필, 시간, 해시태그까지 함께 표시되어
정보 밀도가 높은 콘텐츠 구성이 가능합니다.

---

SNS 삽입 시 HTML 편집 모드 사용하는 것이 좋습니다

티스토리 기본 에디터에서도 일부 SNS는 링크 형태로 붙지만,
제대로 보이게 하려면 HTML 편집 모드를 사용하는 것이 가장 확실합니다.
특히 유튜브, 인스타그램, 트위터 모두 iframe 또는 script 형태로
코드가 삽입되기 때문에 HTML 편집 모드가 안정적입니다.

또한 SNS 콘텐츠 주변에 해시태그, 부연설명, 링크 버튼을 함께 배치하면
체류 시간도 길어지고 사용자 전환도 유도할 수 있습니다.

---

반응형 스킨에서는 가로폭 설정이 핵심 포인트

모바일 대응이 잘 되도록 하려면 SNS 코드 삽입 시
width를 100%로, height는 300~400px 내외로 설정하는 것이 좋습니다.

또한 <div style="max-width: 600px; margin:auto">...</div>
같은 코드로 감싸면 콘텐츠 정렬도 개선됩니다.

요소	권장 설정
width	100% 또는 max-width: 600px
height	300~400px
정렬	가운데 정렬 (margin:auto)

이런 방식으로 삽입 시 모바일에서도 콘텐츠가 깔끔하게 보여집니다.

---

SNS 삽입 위치는 본문 중간 혹은 하단이 좋습니다

삽입 위치는 콘텐츠 흐름을 고려하여
본문 중간이나 마무리 구간에 배치하는 것이 가장 자연스럽습니다.
유튜브는 요약 영상이나 설명용으로 중간에,
인스타그램은 사진 강조용으로 상단 또는 하단에,
트위터는 참고자료로 하단 배치하면 효과적입니다.

특히 SNS 삽입 이후 요약 문장이나 CTA 문장을 넣으면
콘텐츠 전환율도 더욱 높일 수 있습니다.

 

 

티스토리 블로그 꼭 봐야할 BEST3

네이버 서치어드바이저 등록, 한 번에 끝내는 핵심 가이드

티스토리 블로그 개설 완벽 가이드

 

티스토리 블로그 검색최적화 꿀팁 대방출