jquery friendfeed widget

friendfeed를 embed할때 friendfeed에서 제공하는 방식은 너무 무겁고 코드가 번잡해서 사용자화하려면 상당히 번거롭다. 그러다 발견한 방식이 friendfeedbadge인데 friendfeed api를 호출해서 다이렉트로 뿌려주기때문에 상당히 가볍고 사용자화도 간편했다.

그런데 이스크립트는 타임존을 처리하는부분에서 문제가 있기에 이부분을 수정하려다가 아예 jquery용으로 다시 만들어보았다.

짜집기코드이므로 퀄리티를 논하지 말자!

html, CSS

<style type="text/css">
.friendfeed {}
.friendfeed li {}
.friendfeed_icon {
	float: left;
	width: 16px;
}
.friendfeed_text {
	display: block;
	padding-left: 24px;
}
.friendfeed_text img {}
.friendfeed_date {
	display: block;
	margin: .5em 0;
}
</style>
...
<div id="friendfeed-badge"></div>

javascript

/* calculate our timeZone */
var d = new Date();
var offset = (d.getTimezoneOffset()/60);             

// Used internally, takes ISO timestamp, makes it pwetty
// http://ejohn.org/projects/javascript-pretty-date
function prettyDate(time){
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," "));

	date.setHours(date.getHours()-offset);
	diff = (((new Date()).getTime() - date.getTime()) / 1000);
	day_diff = Math.floor(diff / 86400);

	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 ) {
		return;
	}

	return day_diff === 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}
 
$(document).ready(function() {
	// Friendfeed User Settings
	var settings = {
		userName : 'gtgrf', // user name
		nam : 'gtgrf',
		itemsToShow : 10, // Number of items to retrieve
		imageSize : 70 // thumbnail size
	};

	$.getJSON('http://friendfeed.com/api/feed/user/' + settings.userName + '?num=' + settings.itemsToShow + '&callback=?',
		function(data) {
			$('#friendfeed-badge').append('<ul class="friendfeed"></ul>');
			var container = $('#friendfeed-badge ul');

		// loop for each friendfeed entry retrieved
		$.each(data.entries, function(i, entry) {
			if (entry.hidden !== true) {
				var svc = entry.service;

				var t = '';

				t += '<li>';
				t += '<a href="'+svc.profileUrl+'" title="View '+settings.nam+'\'s profile on '+svc.name+'" class="friendfeed_icon">';
				t += '<img src="'+svc.iconUrl+'" alt="'+svc.name+'">';
				t += '</a>';
				t += '<span class="friendfeed_text">';
				t += '<a href="'+entry.link+'" title="'+entry.title+'">';
				if (/flickr|tumblr|youtube/i.test(entry.service.id)) {
					if (entry.media.length > 0) {
					t += '<img width="'+settings.imageSize+'" src="'+entry.media[0].thumbnails[0].url+'" alt="'+entry.title+'" />';
					}
					else {
					t += entry.title;
					}
				}
				else {
					t += entry.title;
				}
				t += '</a>';
				t += '<span class="friendfeed_date">';
				t += prettyDate(entry.published);
				t += '</span>';
				t += '</span>';
				t += '</li>';

				// append content to container
				container.append(t);
			}
		});
	});
});

참조 스크립트

3 thoughts on “jquery friendfeed widget

  1. Q

    안녕하세요. friendfeed 이용자인데, 검색하다가 들르게 되었네요.

    그런데, 제가 자바스크립트나 이런것에 대해서 잘 몰라서요. friendfeedbadge나 님이 작성하신 소스를 가져다가 쉽게 쓰는 법에 대해서 설명좀 해주십사 부탁드릴려고 이럿게 댓글 남깁니다.

  2. jay Post author

    자바스크립트를 손쉽게 사용하기위해서 만들어진 jquery라는 녀석이 있습니다. 이 스크립트는 그 jquery와 같이 사용하셔야 합니다.

    만약 이미 jquery를 사용하고 있지 않으시다면 이방법은 배보다 배꼽이 더 커질수 있기때문에 이방법이나 friendfeed기본 스크립트를 사용하시는게 좋을거 같습니다.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    위 스크립트를 header안에 넣으시고 이 글에 있는 스크립트를 복사해서 .js파일로 만드신후 30번라인의 var settings = {}안에 Q님의 계정과 나오게 할 아이템갯수를 입력하신후 동일한 방법으로 header안에 넣어주시면 됩니다.

    그리고 friendfeed가 나오게 하고 싶으신곳에 <div id="friendfeed-badge"></div>를 넣어주시고 위의 css를 기준으로 원하는 모양으로 다듬어주시면 됩니다.

Comments are closed.