대한민국 사회에서 예전 싸이월드의 미니홈피와 같이 하나의 소통 도구로 익숙해진 트위터 위젯은 블로그에서처럼 XE 레이아웃에서도 빛을 발합니다.

익숙한 UI와 간결하고 짧은 메세지는 방문자와 소통할 때 그 전달력에 있어서 아주 유용한 도구입니다.

웹에이전시의 작업 현황을 알리거나 개발의 진척을 알릴 때 혹은 자사의 상품이 출시되었을 경우 등등 가장 효과적인 공지판이 될 수 있습니다.


그런데 레이아웃에 트위터의 위젯을 넣으려면 설정 가능한 항목이 별로 없습니다. 그게 트위터의 매력이지만 디자인을 고려하면 좀 아쉬운 점이 있습니다. 


scr_twt_wdg.png


다행히 자세히 보면 트위터 개인화 설정 위에 '커스텀 옵션' 링크가 있습니다. 

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;}


 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기