gt.grf

jquery friendfeed widget

Written on 2009.03.07, 2:19 pm by jay

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

참조 스크립트

• Read Friendfeed Using jquery
• Friendfeedbadge
• Javascript Pretty Date

• Tagged with : friendfeed, jquery, lifestream