간단하게 트위터 페이지 만드는 법.

 

 

현재 jquery-1.2.6.min.js 파일이 제역할을 하지 않고 있어

 

이 포스트 내용은 사용할 수 없습니다.

 

그래서 제가 지금 사용하는 Daily log ( http://yiyuni.com/notice/3478 ) 페이지의 트위터 위젯은 트위터의 공식위젯 https://twitter.com/about/resources/widgets 으로 사용하고 있습니다.

 

2012.12.26

 

 

 

 

 

 

seevaa님이 설명 ( http://seevaa.net/348 ) 해주신 것을 갖고
일반적인 트위터 위젯이 아닌 트위터 페이지를 적용해보았습니다.
트위터만 사용하는 저는 다른것은 필요없고, 트위터 위젯을 웹페이지 하나에 가득채우려니 웹폰트도 적용이 안되고 맘에 들지 않았습니다. 그래서 seevaa님의 글을 읽고 적용시켰습니다.

먼저 seevaa님이 설명해주신대로,

BuildYourSocialPage.zip

링크 : http://css-tricks.com/805-build-your-own-social-home/

다운받아 압축을 푼 다음,

js폴더에 있는 jquery-1.2.6.min.js 파일을 본인의 티스토리에 업로드시킵니다.(파일업로드 이용)

그리고 나서 HTML편집기에 가서 </head> 위부분에다가 다음의 스크립트를 붙여넣기합니다.

<script type="text/javascript" src="./images/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 
 
 $.getJSON('http://twitter.com/status/user_timeline/본인의트위터아이디들어갈곳.json?count=10&callback=?', function(data){
  $.each(data, function(index, item){
   $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p><strong>' + relative_time(item.created_at) + '</strong></p></div>');
  });
 
 });
 
 function relative_time(time_value) {
   var values = time_value.split(" ");
   time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
   var parsed_date = Date.parse(time_value);
   var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
   var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
   delta = delta + (relative_to.getTimezoneOffset() * 60);
  
   var r = '';
   if (delta < 60) {
  r = 'a minute ago';
   } else if(delta < 120) {
  r = 'couple of minutes ago';
   } else if(delta < (45*60)) {
  r = (parseInt(delta / 60)).toString() + ' minutes ago';
   } else if(delta < (90*60)) {
  r = 'an hour ago';
   } else if(delta < (24*60*60)) {
  r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';
   } else if(delta < (48*60*60)) {
  r = '1 day ago';
   } else {
  r = (parseInt(delta / 86400)).toString() + ' days ago';
   }
  
   return r;
 }
 
 String.prototype.linkify = function() {
  return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {
   return m.link(m);
  });
 };
 
});
</script>

소스 다운받기

social log.txt

그리고 글쓰기 로 가서 HTML로 글쓰기 체크하여 

<DIV id=twitter></DIV>

만 넣고 저장하시면 저와같은 트위터 페이지를 만들수 있습니다. 
매우 간단합니다. 거기에 홈페이지에 맞게 CSS를 작성하시면 됩니다.

#twitter  {  }
#twitter a  { font:9px verdana;}
#twitter a:link   { color:#aaa; } 
#twitter a:hover { font:9px verdana; color:#666; }

#flickr {  overflow: hidden; }
#flickr a img { margin: 0 20px 20px 0; width: 100px; height: 80px; }

대충 이런식으로 추가해 주시면 됩니다.
(저는 CSS를 전혀 모르기에 http://jinnysh.tistory.com/ 에서 도움을 얻었습니다. ^^;)