이온디
12년 전
대한민국 사회에서 예전 싸이월드의 미니홈피와 같이 하나의 소통 도구로 익숙해진 트위터 위젯은 블로그에서처럼 XE 레이아웃에서도 빛을 발합니다.
익숙한 UI와 간결하고 짧은 메세지는 방문자와 소통할 때 그 전달력에 있어서 아주 유용한 도구입니다.
웹에이전시의 작업 현황을 알리거나 개발의 진척을 알릴 때 혹은 자사의 상품이 출시되었을 경우 등등 가장 효과적인 공지판이 될 수 있습니다.
그런데 레이아웃에 트위터의 위젯을 넣으려면 설정 가능한 항목이 별로 없습니다. 그게 트위터의 매력…
대한민국 사회에서 예전 싸이월드의 미니홈피와 같이 하나의 소통 도구로 익숙해진 트위터 위젯은 블로그에서처럼 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 파일로 올려두겠습니다.
twitter.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;}
