티스토리 뷰

반응형

트위터 타임라인 위젯 속성적용하기

 

기본 위젯 소스

<a class="twitter-timeline" href="https://twitter.com/xxxxxxxx" 

data-widget-id="123456789123456789">@xxxxxxxx 님의 트윗</a>

 

타임라인 위젯에 속성을 적용하려면 위 소스에 추가를 해주면됩니다.

 

타임라인에 적용할 수 있는 속성으로는

 

테마 : data-theme="dark" 혹은 data-theme="white"

링크색 : data-link-color="색상“ ex) data-link-color="#cc0000"

위젯넓이 : width="넓이" ex) width="300" *넓이는 180이 최소 520이 최대

위젯높이 : height="높이“ ex) height="500" *높이는 200이 최소

크롬 : data-chrome="속성" 크롬에는 다섯가지 속성이 있습니다.

-noheader : 상단에있는 팔로우버튼 영역을 없애줍니다.

-nofooter : 하단에 있는 글쓰기 영역을 없애줍니다.

-noborders : 테두리를 없애줍니다.

-noscrollbar : 스크롤바를 없애줍니다.

-transparent : 위젯을 배경을 투명하게 바꾸어줍니다.

 

각 속성들은 동시에 사용할 수 있습니다.

-> data-chrome="noheader nofooter noborders transparent"

테두리색 : data-border-color="색상" ex) data-border-color="#cc0000"

언어 : 위젯의 언어를 설정합니다. lang="국가“ ex) lang="ko" or lang="en"

트윗제한 : 보여줄 트윗의 개수를 제한합니다. data-tweet-limit="5" 5개 제한

 

위 속성들을 사용해서 적용한 위젯

- 소스 -

<a class="twitter-timeline" href="https://twitter.com/xxxxxxx" data-widget-id="123456789123456789" data-theme="white" data-link-color="#cc0000" width="200" height="300" data-chrome="noheader nofooter noborders transparent" lang="ko">@xxxxxxx 님의트윗</a>

- 예제 -

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/02   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함