개요

웹 앱을 만들고 싶어 공부하기 시작했습니다. 다양한 웹 앱을 참고로 하고 있다고 눈에 들어오는 것이 '트위터 타임라인'이었습니다.

트위터의 타임라인을 어떻게 포함시키는지를 조사한 비망록을 남깁니다. 결국 다음과 같이 할 수있었습니다. (이번에는 Twitter의 API를 사용하지 않고 구현하고 있습니다. API를 사용하는 것이 일반적?)

개발 환경

웹 브라우저: Google Chrome

Twitter

만들어 보자

포함할 URL 입력

Twitter Publish 방문.

다음과 같은 화면이 나오므로 Twitter의 계정 URL을 입력한다.
제 경우에는 다음 URL을 입력합니다.

https://twitter.com/kmaepu

위젯 유형 선택

화면을 아래로 스크롤하여 위젯 유형을 선택합니다. 왼쪽의 Embedded Timeline을 선택합니다.


참고로 이대로 사용했을 경우의 웹 화면은 다음과 같습니다.


그건 그렇고,
오른쪽의 '트위터 버튼'을 선택하면 다음과 같이 팔로우 또는 멘션 버튼을 포함할 수 있습니다.

위젯 옵션 설정

이대로 진행하면 화면 가득 타임 라인이 표시되어 버리므로 성형합니다. 위젯 선택 화면 아래에서 "set customization options"를 선택합니다.


타임라인형 위젯의 경우 다음과 같은 설정 화면이 표시됩니다.
위젯
- 높이(px)
- 폭(px)
- 디자인(화이트 or 블랙)
- 표시 기본 언어

를 입력합니다. 설정이 끝나면 오른쪽 하단의 Update 버튼을 누릅니다.

HTML 코드 복사

다음과 같이 HTMK의 코드가 나타나므로 오른쪽의 "Copy Code"를 두면. 코드를 복사할 수 있습니다. 나머지는 사용하고 싶은 htmk 파일에 붙여 넣기만 하면 됩니다.

완성!

결론

위젯을 삽입하는 것만으로, 코드를 작성하지 않고 실현할 수 있어 편리했습니다. 여담입니다만, 취미로 수경 재배나 가정 채소밭을 하고 있어 그 모습을 Twitter로 중얼거리고 있습니다.
↓
Follow @kmaepu