트위터 타임라인 위젯 삽입하기

  아임웹 연구소 소장 해준  |  2017 . 09 . 18

시작에 앞서
이번 강좌에서는 아임웹 디자인 모드에서 [코드 위젯]을 사용해, 트위터 타임라인을 삽입하는 방법을 알아보겠습니다. 아래는 트위터 타임라인을 삽입해본 사이트입니다. 아래 링크에서 확인해보실 수 있습니다.

https://imwebstarteredu.imweb.me/twitter-widget





1단계, 코드 위젯 삽입하기
트위터 타임라인을 임베딩할 메뉴에, [코드 위젯]을 선택해 삽입합니다.





2단계, 코드 위젯 설정 창 열기
삽입한 코드 위젯에 마우스를 대고, 우클릭하여, [코드 설정] 버튼을 클릭합니다.





3단계, 트위터 타임라인 코드 입력하기
코드를 작성할 수 있는 창이 뜨면, 이 곳에 트위터 위젯 코드를 작성해야 합니다. 작성하셔야 할 코드는 아래에서 복사하여 편집해 사용해보세요.



트위터 타임라인 위젯 코드
<a class="twitter-timeline" data-lang="ko" data-tweet-limit= 5 href="https://twitter.com/haejoonjin"></a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

1) data-tweet-limit= 5 // 타임라인에 표시될 트윗의 숫자를 1-20 사이로 지정할 수 있습니다.
2) href="https://twitter.com/haejoonjin" // 본인의 트위터 주소를 입력해주세요.




4단계, 미리보기 및 게시하기
디자인 모드 우측 상단에 위치한 [미리보기] 버튼을 클릭해, 정상적으로 적용되었는지 확인할 수 있습니다.
정상적으로 적용되는 것을 확인하신 후 [게시하기]를 눌러 실제 홈페이지에 적용해주세요.





참조, 더 다양한 트위터 위젯 알아보기
아래 주소를 클릭해, 더 다양한 트위터 위젯 코드를 생성해, 디자인 모드에 추가할 수 있습니다. 생성한 코드는 모두 위에서 알려드린 것처럼 [코드 위젯]을 사용해주세요.

https://publish.twitter.com



해준
배우고 익히고 나누는 | 해준씨 | 유용한 콘텐츠 마케팅 | 네이버 카페 '아임웹 연구소' 소장
jin@haejoon.com

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버페이, KCP 공식파트너입니다.