본문 바로가기
블로그 & 애드센스

티스토리 새 에디터로 본문에 트위터 트윗 넣기

by lifeasy88 2020. 3. 23.

이번 포스트에서는 티스토리 새 에디터를 이용해서 본문 안에 트윗을 넣는 방법을 소개해볼게요.

 

트위터는 블로그를 홍보하거나 블로그 주제가 인용된 출처를 소개하는 수단으로 많이 사용돼요. 특히 후자의 경우 트위터의 트윗을 본문에 바로 넣어주면 시각적으로도 좋고, 블로그 본문과 출처에 대한 신뢰도 올라가는 효과가 있어요. 또한 트위터는 글자 수 제한이 140자로 정해져 있어서 화면과 본문 내용 안에서 차지하는 비율이 크지 않아서 인용하기에 적합한 매체예요. 그런 이유에서 저도 트윗을 본문에 자주 인용하고 있어요. 

 간단하게 트위터가 제공하는 본문 첨부 기능을 이용해서 티스토리에 넣는 방법을 정리해볼게요.

 

트윗 링크 가져오기

먼저 본문에 넣으려고 하는 트윗을 정해주세요. 그리고 트윗의 오른쪽 상단에 있는 아래 화살표를 누르면 메뉴가 등장해요. 메뉴 중에서 "트윗 담아가기"를 눌러주세요. 

 

그러면 사진처럼 해당 트윗의 전문을 포함하고 있는 html 태그 및 소스들을 복사할 수 있는 화면이 등장해요. 텍스트 박스에 있는 내용을 직접 복사하거나, 우측에 있는 "Copy Code" 버튼을 눌러서 복사할 수 있어요.

 

버튼 하단에는 복사한 코드가 어떤 식으로 화면에 보이는지 미리보기를 제공해요. 이제 트윗을 가져왔고 티스토리에 넣을 차례입니다.

 

티스토리 분문에 트윗 넣기

티스토리의 구 에디터에서는 "외부컨텐츠" 기능으로 입력하는 방법이 있었는 새 에디터로 넘어오면서 외부컨텐츠 기능이 없어졌어요. 그래서 새 에디터에서는 "에디터 모드""기본 모드"가 아닌 "HTML 모드" 변경해서 넣어야 돼요.

 

기본 모드에서 트윗 코드를 입력하면 사진과 같이 미리보기와는 전혀 다르게, 제대로 출력되지 않아요. 이번에는 HTML 모드로 변경해서 동일한 코드를 입력해볼게요.

 

먼저 에디터 우측 상단에 있는 "기본모드" 버튼을 눌러서 "HTML"로 바꿔주세요. 

 

 

사진과 같이 기본에 입력한 컨텐츠를 포함해서 html 코드로 편집이 가능한 에디터로 변경됩니다.

 

 

이 상태에서 아까 복사했던 트윗 코드를 입력해 주세요. 한 가지 팁은, 본문에 내용을 많이 넣은 후에 html 모드로 트윗을 넣으려고 하면 본문 내용을 기준으로 어느 위치에 넣을지 눈에 잘 안 들어와요. 그래서 글 내용이 어느 정도 작성되기 전이나, 아예 맨 처음에 트윗 코드를 입력하는게 글을 작성하는데 더 편리해요.

 

 

 

그리고 글 작성을 완료하고 확인해 보면 아까와는 다르게 트윗이 정상적으로 첨부된 걸 확인할 수 있어요. 이런 식으로 실제 트위터 어플에서와 거의 동일한 형태로, 작성자의 프로필로 이동하거나, 여러 버튼들과 상호 작용이 가능해요.

 

주의사항

저도 처음에 헷갈린 부분인데, 글을 발행하기 전 "미리보기"로는 트윗이 정상적인 모양으로 출력되지 않아요. 아마 트윗의 html 코드 중 javascript 코드가 실행되지 않는 게 원인인 것 같아요. 그래서 미리보기로 확인하실 수 없고, 혹시 정상적으로 출력되는지 확인을 위해서는 비공개로 발생한 후 확인하시는 걸 권장드려요.

 

 

 

태그

댓글0