대한민국 사회에서 예전 싸이월드의 미니홈피와 같이 하나의 소통 도구로 익숙해진 트위터 위젯은 블로그에서처럼 XE 레이아웃에서도 빛을 발합니다.
익숙한 UI와 간결하고 짧은 메세지는 방문자와 소통할 때 그 전달력에 있어서 아주 유용한 도구입니다.
웹에이전시의 작업 현황을 알리거나 개발의 진척을 알릴 때 혹은 자사의 상품이 출시되었을 경우 등등 가장 효과적인 공지판이 될 수 있습니다.
그런데 레이아웃에 트위터의 위젯을 넣으려면 설정 가능한 항목이 별로 없습니다. 그게 트위터의 매력이지만 디자인을 고려하면 좀 아쉬운 점이 있습니다.
다행히 자세히 보면 트위터 개인화 설정 위에 '커스텀 옵션' 링크가 있습니다.
https://dev.twitter.com/docs/embedded-timelines#customization
간단하게 예제를 통해 살펴보도록 하겠습니다.
<a class="twitter-timeline"data-theme="dark"data-link-color="#cc0000"width="300" height="500" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="nofooter noborders transparent" lang="EN" data-tweet-limit="3">Tweets by @twitterapi</a>
대표적으로 설정할 수 있는 항목은 다음과 같습니다. (여기서 다 다룬 것은 아니니 좀 더 자세한 설명은 커스텀 옵션 페이지를 참조하세요.)
1. 테마 data-theme
2. 링크 색상 data-link-color
3. 넓이 width
4. 높이 height
5. 푸터 data-chorome="nofooter"
하단에 메세지 보내는 창입니다.
6. 보더 data-chorome="noborders"
트위터와 트위터 메세지 사이의 가로줄입니다.
7. 투명 data-chorome="transparent"
배경색상을 투명하게 설정합니다.
8. 언어 lang
9. 표시하는 트위터 갯수 data-tweet-limit
이렇게 설정이 가능하지만 여기서도 우리는 만족하지 못할 수도 있습니다. -_-;
그래서 XE Lab에 소개된 글을 가져와 붙입니다.
http://www.xelab.net/index.php?mid=forum&category=2400&act=dispForumContent&document_srl=1963&cpage=1
간단하게 트윗 내용만 가져와서 뿌려줄 때 유용합니다. 상하단의 트위터 링크나 이미지는 디자이너 맘대로구요. CSS 설정도 가능합니다.
tweeter.js 파일로 올려두겠습니다.
var t_username = 'kantsoft'; // username 대신 여러분의 아이디를 넣으세요
이 부분만 수정해서 사용하시면 됩니다.
그리고 위 파일을 레이아웃 파일에서 불러와줍니다.
이런 식으로요.
<load target="./js/twitter.js" />
그리고 출력을 원하는 장소에 아래 코드를 집어넣습니다.
<div id="twitter_update_list" class="conts"></div>
이제 나머지 스타일시트를 작성해줍니다.
예제는 원 링크의 예제 그대로 가져다 붙입니다.
#twitter_update_list {overflow:hidden;}
#twitter_update_list li {border-bottom:1px solid #eaeaea; list-style:none; font-family:verdana;color:#999;padding:0;margin:5px 0;line-height:15px;position:relative;left:-1px;}
#twitter_update_list li:first-child {margin:0 0 5px 0;}
#twitter_update_list li a {color:#2893BB;text-decoration:none;}
#twitter_update_list .twt_slash{ font-size:85%; color:#777;}
#twitter_update_list .twt_time{ font-size:85%; color:#666;}
#twitter_update_list .twt_time:hover{color:#2F7FBD;}
#twitter_update_list .twt_reply{ font-size:85%; color:#666;}
#twitter_update_list .twt_reply:hover{color:#2F7FBD;}