ID :   PW :   JOIN FIND

Rusty paradise

[TIP] 트위터 위젯 달기.

by Daily posted May 21, 2017

나는 늘 깔끔하게 트위터 위젯을 달고 싶었다. 그러나 아무리 트위터 위젯 만들기를 보고 따라해도 깔끔한 위젯이 나오질 않았다. 트위터 위젯 헤더 부분에 정체를 알 수 없는 대빵만한 @daily714님의 트윗 같은 글씨가 그 문제였다. 나는 알지 못했다. 트위터 개발자 페이지에 위젯에 대한 상세한 설명이 있었다는 것을. (이래서 영어를 배워야 합니다.) 아무튼, 이건 html 기초도 모르고 아무튼 이딴 건 1도 모른다. 나는 복사만 해서 내 홈페이지(어디든 html 문서를 사용하는 곳이라면)에 넣고 싶다!!! 라는 사람들을 위한 트위터 위젯 설정값 설명. (설명이 좀 불친절할 수도 있음.)



1. 트위터 -> 설정 및 개인 정보 -> 위젯 -> 위젯 생성 -> 생성 후 아래 코드 추가

show-replies="true/false" : 다른 트위터 계정에 대한 멘션 보이기/안 보이기
chrome="noheader nofooter noborders transparent noscrollbar" :  위젯 디자인 요소. 각각 헤더없음/푸터없음/보더없음/배경투명/노스크롤 (여기서 보더 없음이란 트위터 사이사이에 낀 가로줄)
theme="dark/light" : 배경&폰트 색상 값. (dark하면 어두운 테마, light하면 밝은 테마)
width="px" : 가로 값.
height="px" : 세로 값.
tweet-limit="1~20"/"undefined" : 탐라에 표시될 트윗 개수. 예시로 1개를 고정하면 height 값 소용없음.
link-color="#000000" : 해시태그와 @멘션을 포함한 링크 색상.
border-color="#000000" : 위젯 안의 보더 컬러 조정


    ※. 속성=""의 형태다. 그러나 나는 아직도 이게 무슨 소린지 모르겠다. 라면 아래 예시글을 보면 좀 더 쉽다.





2. 러스티 홈 메인 페이지에 달린 트위터 위젯 예시 :

aaa.png



[a class="twitter-timeline" href="https://twitter.com/daily714" data-widget-id="699311689565536256" data-theme="white" data-link-color="#cc0000" width="250" height="350" data-chrome="noheader nofooter noborders noscrollbar transparent" lang="ko"]@xxxxxxx 님의트윗[/a][script async src="//platform.twitter.com/widgets.js" charset="utf-8"][/script]



data-theme="white" : 나는 기본 테마를 화이트로 하겠다. (흰색 배경홈에 글자는 검정으로, 이게 아마도 기본값일 거다. 아마도? 아마도.)
data-link-color="#cc0000" : @멘션/링크/해시태그 컬러 값을 #cc0000으로 해라.
width="250" : 가로 사이즈 250px로
height="350" : 세로 사이즈 350px로
data-chrome="noheader nofooter noborders noscrollbar transparent" : 헤더없음/푸터없음/보더없음/스크롤없음/배경투명



※. 이대로 소스를 출력하면 테두리가 없다. 그러나 스샷에는 테두리가 있다. 왜냐면 트위터 위젯을 감싸는 다른 태그가 있기 때문임. (예를 들자면 div라는 태그 안에 트위터 위젯이 들어가 있는데, 그 div의 테두리 값이 [border: 1px solid #ddd;] 라는 소리.

※. 나도 데일리 너처럼 테두리를 넣고 싶어!!!!! 라면... (예시므로 너님의 홈페이지엔 적용이 안 될 수도 있다.)

헤더 안에 아래 소스를 넣으세요.
따로 css 파일이 있다면 거기에 추가해도 됨. (물론 대괄호[]ㅡ는 전부 <>이거로 바꾸셔야 합니다.)

[head]
[style]
  .twitter_wg {
width:너님 트위터 가로값;
height:너님 트위터 세로값;
border:1px solid #d2d2d2;  (두께 1px. 변경 가능 값이 클수록 두꺼움. #16진수컬러값. )
padding:0;}
[/sytle]
[/head]

body 태그 안에 너님이 트위터를 넣고 싶은 위치. 

[body]
[div class="twitter_wg"]
여기에 트위터 소스를 넣는다.
[/div]
[/body]



+ 쓸데없는 설명. (?) class="twitter_wg" 저건 뭐..? 스타일 태그 안에 들어가는 .twitter_wg 을 뜻함. 머리(head) 안에서 스타일(Style꾸미기)를 관장하는 애가 소리치는 거임.

스타일 왈 : class="twitter_wg" 얘한테 가로값을 OOpx로 주로, 세로값을 OOpx로 주고, 보더(테두리) 두께를 1px로 하고 색상을 #d2d2d2로 해!!!!!

이렇게 헤드(head)안의 스타일이 몸뚱아리(body)에게 존나게 소리치는 겁니다. 그럼 몸뚱아리(body)는 "아! 머리에서 이렇게 소리치는 구나! 몸뚱아리를 이렇게 보여야쥐~" 하고 머리에서 소리친 대로 보여주는 겁니다.

+ 스타일 태그 안에 twitter_wg 쓸 때 앞에 온점 [.] 빼먹으면 안 됩니다. 저 온점이 이것은 class = . 라는 뜻이므로.

+ 어려우면 댓글로 질문!


?

Coding&Design

html5, css, Jquey, JavaScript, photoshop, IIIustratot, zb4, XE

List of Articles
한 번만 읽어주세요 :D 1 file
5 [HTML] label + input 결합 (체크박스를 텍스트/이미지와 연결) 2017.05.22 12338
4 [XE] 체크박스 이미지로 구현하기 file 2017.05.22 1146
» [TIP] 트위터 위젯 달기. file 2017.05.21 2245
2 [ETC] Bracket 확장 프로그램 1 2017.05.21 2215
1 [ETC] Sublime Text Build 3114, 64bit 1 file 2017.05.21 91
목록
Board Pagination Prev 1 Next
/ 1