트위터 타임라인 위젯의 디자인 변경에 관한 메모

개인적으로는 표준으로 지원되는 것을 그대로 사용하는것을 적극 추천하고자 하는 바이지만..
디자이너의 입장에서 생각해보면 사이트에 가장 적합하다고 생각되는 디자인을 반영하고 싶어하는 마음도 이해가 되긴한다. 일단, 최종본은 다음과 같다.

 

예전에는 아무 위젯이나 생성한 뒤에 아이디만 바꾸어 주면 변경이 용이했던 것으로 기억했는데…
data-widget-id로 생성된 코드가 없이 단순아이디의 변경으로는 더이상 적용이 되지 않는것 같다.
보안을 위한 방안인듯한데 아님말고. 일단, 첫번째로 트위터에서 자동생성된 내용은 아래와 같다.

<a class="twitter-timeline" href="https://twitter.com/xxxxx" data-widget-id="xxxxx">Tweets by @xxxxx</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

위의 자동생성된 내용에 아래의 소스를 추가해주면 아래와 같은 초기설정의 결과물을 확인할 수 있다.

 

두번째로, 위와 같이 만들어진 기본디자인에 아래의 옵션을 추가한다.

data-chrome="transparent noborders nofooter noheaders" /*배경색, 보더라인, 헤더, 푸터*/
data-tweet-limit="3" /*트윗의 개수를 지정하여 스크롤바등을 생기지 않게 할 수 있다.*/
data-border-color="#333" /*각 트윗의 보더라인색*/

필요할 경우는 width="180px" height="200px" 처럼 width, height도 추가 가능하며 width의 최소, 최대치는 각각 180px, 520px. height의 최소치는 200px이라고 한다. 

세번째로, 기본적으로는 위의 수정만으로도 원하는 결과물을 얻을 수 있겠지만, 조금더 디자인적으로 많은 수정을 원한다면 아래의 js를 추가해주는 것으로 가능해진다. 이 js는 css에 의한 수정이 가능하게끔 도와주는 js로 디자이너가 원하는 결과물에 가깝게 작업할 수 있다. 사용법은 $el.find(".timeline-header").css(/*스타일 변경*/); 부분을 각자가 필요로 하는 <id>나 <class>를 적절하게 변경해주면 된다.

<script type="text/javascript">
	function decorateWidget(id) {
	  var $twwgt = $(id);
	  var decorate = function($el) {
	    $el.find(".timeline-header").css(/*스타일 변경*/);
	    return $el;
	  };
	  if ($twwgt.length > 0 && $twwgt[0].contentWindow.document.body.innerHTML !== "") {
	    decorate($($twwgt[0].contentWindow.document));
	  } else {
	    setTimeout(function() {
	      decorateWidget(id);
	    }, 500);
	  }
	}
	decorateWidget("#twitter-widget-0");
</script>

js소스 출처 : http://qiita.com