Twitter API 를 이용해서 권한을 인증받고 나면 실질적으로 데이터를 가져올 수 있게 되는데
서버에 직접적으로 요청하는 것은 Twitter에서 막혀있기도 하고, 인증 정보는 모두 임시 서버에서 가지고 있게 되어서 Twitter에 요청 하는 것을 맡겨야 한다. 또한 가지고 온 데이터들을 화면에 적절하게 뿌려주는 작업도 해주어야 한다.
main.html @Tomcat Server
<!DOCTYPE html>
<html>
<head>
<title>twitter</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<meta charset='UTF-8'>
<style>
@font-face {
font-family: 'myIcon';
src: url('https://abs.twimg.com/a/1394742182/font/t1/rosetta-icons-Regular.eot'); /* IE9 Compat Modes */
src: url('https://abs.twimg.com/a/1394742182/font/t1/rosetta-icons-Regular.eot') format('embedded-opentype'), /* IE6-IE8 */
url('https://abs.twimg.com/a/1394742182/font/t1/rosetta-icons-Regular.woff') format('woff'), /* Modern Browsers */
url('https://abs.twimg.com/a/1394742182/font/t1/rosetta-icons-Regular.ttf') format('truetype') /* Safari, Android, iOS */
}
.tweet{
width : 510px;
border : 1px solid black;
border-radius : 6px;
padding : 10px;
margin : 5px;
}
.tweet:hover{
border : 2px solid pink;
padding: 9px;
}
.tw_date{
font-size: 13px;
color: #8899a6;
}
.text{
color: #292f33;
font-size: 14px;
}
.rt_count{
display: inline-block;
font-size: 12px;
color: #6e9a2e;
}
.rt_count:before{
font-family : myIcon;
content: "\f152";
}
.fv_count:before{
font-family : myIcon;
content: "\f147";
}
.fv_count{
display: inline-block;
font-size: 12px;
color: #ff9b00;
}
</style>
</head>
<body>
<h1>Get Twitter Timeline</h1>
<a id='btn' href='#'>Get timeline</a>
<div id='tweets'></div>
<script>
$('#btn').click(function(event){
event.preventDefault();
$.getJSON('http://192.168.200.27:8884/getUserTimeline?screen_name=bourn0914', function(result){
$.each(result, function(index, item){
$('<div>').addClass('tweet').appendTo('#tweets')
.append($('<div>').addClass('tw_date').text(item.tw_date))
.append($('<div>').addClass('text').text(item.text))
.append($('<div>').addClass('rt_count').text(item.rt_count))
.append($('<div>').addClass('fv_count').text(item.fv_count));
});
});
});
</script>
</body>
</html>
댓글 없음:
댓글 쓰기