홈페이지나 개인 블로그를 운영하고 계시는 많은 분들은 페이스북 혹은 트위터와 같은 SNS를 홍보 수단으로 많이 이용하고 계십니다. 필요한 내용을 찾고 계신 분들에게 도움이 되고자, 본인 계정의 트위터 피드(프로필 페이지)를 본인의 홈페이지나 블로그에 삽입하는 방법에 대해 간략하게 기록해두었습니다. 본문 내용 참고하셔서 트위터 피드를 본인의 공간에 담아 보시기 바랍니다.
- UPDATE 2019-03-11 : 이미지 및 문구 수정
트위터 피드를 홈페이지, 블로그에 삽입 방법
트위터 피드를 홈페이지 혹은 개인 블로그에 삽입하는 방법입니다. HTML 편집 기능이 있는 텍스트 에디터를 활용해주시면 됩니다. 트위터의 피드나 프로필 공유에 관한 모든 내용은 Twitter Publish에 잘 정리되어 있으니 다른 공유 방법이 궁금하신다면 해당 페이지를 참고하시면 됩니다.
1) Twitter Publish 페이지로 이동하셔서 ‘A profile’을 선택합니다. ▼
프로필을 공유하고자 하는 목적이 아니시라면 다른 옵션을 선택하시면 됩니다.
2) 원하는 디스플레이 옵션을 선택합니다. 일반적으로 왼쪽 디스플레이를 트위터 피드 임베딩에 많이 사용합니다. ▼
3) 현재 표시되는 코드는 예시 코드이므로, 본인의 개인 피드에 맞게 변경해주셔야 합니다. 먼저, 상단에 있는 ‘set customization options’를 선택합니다. ▼
4) ‘가로/세로/색상/언어’를 본인의 입맛에 맞게 설정합니다. 사이드바에 넣으실 트위터 피드를 원하신다면 아래 설정을 그대로 따라가셔도 좋을 듯합니다. ▼
5) 이제 완성된 코드를 복사하여 가져옵니다. 공유 페이지에서 설정을 업데이트하긴 했지만 여전히 수정이 필요합니다. 아래 내용 참고 바랍니다.
피드 임베드 코드 ▼
<a class="twitter-timeline" href="https://twitter.com/Mac_In_June" data-lang="en" data-width="324" data-height="400" data-theme="light">Tweets by Mac in June</a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
- 상단 제목 이름
- 본인의 트위터 프로필 주소
- 가로 길이
- 세로 길이
6) 완성된 코드를 본인의 페이지에 붙여넣어주시면 됩니다. 추가로, 센터 태그를 사용하시면 가운데 정렬을 하실 수 있습니다. <center> 내용 </center> 사이에 넣어주시면 됩니다.
<center><a class="twitter-timeline" href="https://twitter.com/Mac_In_June" data-lang="en" data-width="324" data-height="400" data-theme="light">Tweets by Mac in June</a></center> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
이상입니다.
참고