지난 주말 빈연구소에서 인터넷에 집짓기 쁘로젝트 2박 3일간의 일정을 마쳤습니다.
별다른 결과물은 없고, <해방촌 사람들> 홈페이지에 페이스북 그룹의 목록을 붙였는데, 그게 이상하게 xe에서는 안됩니다. 그 이유가 우선 모바일 페이지에서는 전혀 다른 곳에서 javascript에러가 나는 바람에 jsonp가 제대로 실행이 안 되는 것 같고, 기본 pc 페이지에서는 jQuery가 정의되지 않았다면서 안 되더군요. jQuery를 다시 불러오면 됩니다만 어쩐지 찝찝해요. 되다 안 되다 이상 <해방촌 사람들> 상황입니다.
여하튼 페이스북 페이지는 자체 rss도 가지고 있고, 뭐 여기저기 위젯을 통해서 홈페이지에 가져다 붙일 수 있는 경우가 많습니다만 페이스북 그룹은 찾아봤는데, 없더군요.
그래서 공개그룹이라면 rss를 제공할 테고, 그것을 jsonp형태로 바꿔서 홈페이지에 ajax로 불러오는 위젯을 만들자는 그림을 그리고 그렇게 해봤습니다.
우선 페이스북 그룹 아이디를 알아야 합니다.
http://wallflux.com/facebook_id/
이 사이트에서 페이스북 그룹 아이디를 알 수 있습니다.
가령 해방촌 사람들 그룹 주소는 http://www.facebook.com/groups/haebang/ 인데
요것을 저기에 넣으면 뒤에 15자리 숫자가 나오는 데 그게 아이디입니다.
wallflux도 facebook 그룹 feed를 제공하는데, 맨 앞에 광고가 뜨더군요. 가입해서 어찌어찌하면 없어질지 모르겠는데, 어지간하면 가입 같은 거 하지 말자는 주의라서 다른 곳을 찾아봤습니다.
https://facebook-rss.herokuapp.com/
이런 앱이 있네요. 페이스북에 본인이 가입한 그룹을 쭈르륵 보이고 그곳의 피드를 제공합니다.
자 여기서 해방촌 사람들을 클릭하면
해방촌 사람들의 feed URL이 https://facebook-rss.herokuapp.com/rss/275890219139353 게 나옵니다.
다음엔 요것을 홈페이지에 적당히 나타내면 되는데, 서버 간 통신은 보안상의 문제로 jsonp를 이용합니다. xml을 jsonp로 바꿔주면 되는 데 요것이 사실상 처음부터 jsonp를 제공하는 게 아니라면 어디선가 jsonp스타일로 바꿔줘야 합니다.
자기 서버에서 할 수도 있고, 어디서든 할 수 있지만, 보통 사람들은 서버를 가지고 있지 않다는 게 함정입니다. ㅋ
구글에서 공짜로 할 수 있습니다. 조금 느리지만 뭐 잘 변환됩니다.
http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=4&q=여기에 페이스북 그룹 rss주소를 넣는 겁니다.
그럼 짠하고 구글이 xml을 jsonp로 변환해 줍니다. num=4는 4개를 보여주겠다는 거고 num=10이라면 10개를 보여주게 됩니다. 최대 20개까지 볼 수 있는 것 같네요.
그럼 데이터에 대한 것은 끝입니다. 요기 뿌려진 데이터를 입맛에 맞게 가공하면 됩니다.
그런데 아쉽게도 xml을 jsonp로 가공하면서 여러 가지 정보가 사라져버렸습니다.
그걸 되살려야 하는데, 막강한 jquery는 그런 걸 아무렇지도 않게 다 해버립니다.
우선 사용자의 썸네일을 불러오고, 사용자 이름은 썸네일에 올렸을 때만 나타나게끔 했습니다.
그리고 시간인데, 구글 서버 시간으로 나오는 걸, 현재 시간으로 나타나게끔 바꿨습니다.
텍스트는 워낙에 복잡다단하게 쌓여 있어서 첫 번째 tr에 있는 div안에 있는 텍스트를 불러와서 몇 글자만 보이도록 했네요. 이 말은 댓글은 보이지 않고, 처음 글쓴이의 글만 140자 정도 보여준다는 말입니다. 물론 설정에 따라 댓글도 보일 수 있습니다.
그 결과물입니다.
http://jsfiddle.net/bouquins/에서 직접 테스트도 해볼 수 있고요.
웹사이트에 적용은
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>이런 식으로 head에 jquery를 불러왔다는 전제에서
페이스북 그룹이 나타나게 할 부분에
$(document).ready(function () {
var count = 7; // 글이 보여질 개수
var facebookGroupId = 275890219139353; // 페이스북 그룹 ID
$.ajax({
url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num="+count+"&q=https://facebook-rss.herokuapp.com/rss/"+facebookGroupId+"",
dataType: "jsonp",
jsonp: "callback",
cache: true,
success: function (c) {
$.each(c.responseData.feed.entries, function (i, a) {
b = $("img", a.content).attr("src");
al = $("a", a.content).attr("href");
c = $("img[src]", a.content).length - 1 ; // 댓글 개수
d = a.publishedDate;
e = new Date(d);
s = e.getFullYear() + '년 ' + (e.getMonth() + 1) + '월 ' + e.getDate() + '일 ' + e.getHours() + '시 ' + (e.getMinutes() < 10 ? '0' : '') + e.getMinutes() + '분';
co = $('tr:nth-child(1) div', a.content).text();
desc = $.trim(co.substr(0, 140)); // 글자 수
z = '<a href="' + a.link + '"><span class="faceboook-content">' + desc + "</span></a>";
if (c > 0 ) ( z ='<span class="fcomment">' + c + '</span>' + z + '');
if (a.title != "") {
$('#facebook-group').append('<li class="une"><a href="' + al + '"><img src="' + b + '" class="thumb" title="' + a.author + '" /></a>' + z + '<span class="date">' + s + '</span></li>');
}
});
}
});
});맨 첫 줄과 두번 째 줄은 설정입니다. 몇개를 보일 것인가와, 페이스북 그룹 아이디입니다.
간단한 스타일입니다.
ul, li {list-style-type:none;margin:0; padding:0;}
#facebook-group .thumb {float:left; margin-right:10px;border:1px solid #ddd ; padding:3px;}
#facebook-group .author {margin-right:10px}
#facebook-group li:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; margin-bottom:5px;}
#facebook-group .date {margin-right:10px;display:inline-block; border:1px solid #ddd; background:#ddd;border-radius:4px;padding:5px;}
#facebook-group .faceboook-content a {text-decoration:none;}
#facebook-group li {min-height:58px; height:58px; height:auto; *margin-bottom:10px;position:relative}
#facebook-group .fcomment { width:15px; height:14px; background:#b01a07; color:white; position:absolute;display:block;text-align:center; font-size:11px;top:43px;left:43px; border-radius:15px;padding-top:1px;}대강 이렇습니다.
전체는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>페이스북 그룹 위젯 / facebook group widget</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var count = 7; // 글이 보여질 개수
var facebookGroupId = 275890219139353; // 페이스북 그룹 ID
$.ajax({
url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num="+count+"&q=https://facebook-rss.herokuapp.com/rss/"+facebookGroupId+"",
dataType: "jsonp",
jsonp: "callback",
cache: true,
success: function (c) {
$.each(c.responseData.feed.entries, function (i, a) {
b = $("img", a.content).attr("src");
al = $("a", a.content).attr("href");
c = $("img[src]", a.content).length - 1 ; // 댓글 개수
d = a.publishedDate;
e = new Date(d);
s = e.getFullYear() + '년 ' + (e.getMonth() + 1) + '월 ' + e.getDate() + '일 ' + e.getHours() + '시 ' + (e.getMinutes() < 10 ? '0' : '') + e.getMinutes() + '분';
co = $('tr:nth-child(1) div', a.content).text();
desc = $.trim(co.substr(0, 140)); // 글자 수
z = '<a href="' + a.link + '"><span class="faceboook-content">' + desc + "</span></a>";
if (c > 0 ) ( z ='<span class="fcomment">' + c + '</span>' + z + '');
if (a.title != "") {
$('#facebook-group').append('<li class="une"><a href="' + al + '"><img src="' + b + '" class="thumb" title="' + a.author + '" /></a>' + z + '<span class="date">' + s + '</span></li>');
}
});
}
});
});
</script>
<style>
ul, li {list-style-type:none;margin:0; padding:0;}
#facebook-group .thumb {float:left; margin-right:10px;border:1px solid #ddd ; padding:3px;}
#facebook-group .author {margin-right:10px}
#facebook-group li:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; margin-bottom:5px;}
#facebook-group .date {margin-right:10px;display:inline-block; border:1px solid #ddd; background:#ddd;border-radius:4px;padding:5px;}
#facebook-group .faceboook-content a {text-decoration:none;}
#facebook-group li {min-height:58px; height:58px; height:auto; *margin-bottom:10px;position:relative}
#facebook-group .fcomment { width:15px; height:14px; background:#b01a07; color:white; position:absolute;display:block;text-align:center; font-size:11px;top:43px;left:43px; border-radius:15px;padding-top:1px;}
</style>
</head>
<body>
<h1>페이스북 그룹 위젯<h1>
<ul id="facebook-group"></ul> <!-- 보여질 위치 -->
</body>
</html>