Dla niezorientowanych – flaker.pl to popularny w niektórych kręgach (zwłaszcza tzw. geeków i nerdów) serwis na modłę Twittera. Taki mikro-blog i agregator RSS w jednym. Sflaczers to prosty skrypt działający w oparciu o jQuery, który jest efektem mojej zabawy z API flaker.pl i który z powodzeniem może być stosowany na blogach i innych stronach jako zamiennik ich domyślnego widgetu (który jest nader ograniczony IMHO).
Główne zalety Sflaczersa:
- możesz nie tylko pokazać np. 5 ostatnich wpisów ale również przejrzeć wcześniejsze za pomocą przycisków Starsze wpisy / Nowsze wpisy (np. aż do momentu założenia konta) – to wszystko bez potrzeby instalowania żadnych skryptów po stronie serwera!
- brak reklam we wpisach
- wsparcie avatarów i komentarzy
- łatwość integracji z layoutem Twojej strony: semantyczny kod HTML widgetu jest w całości generowany dynamicznie i ma mnóstwo klas – wystarczy, że podepniesz swój CSS i jesteś w domu :)
- możesz umieścić kilka takich widgetów na stronie
Demo
Skrypt w działaniu (wraz z przykładowym kodem CSS) można zobaczyć tutaj.
Instalacja
- Pobierz plik sflaczers.js i bibliotekę jQuery. Dołącz skrypty na swojej stronie w sekcji
<head>:
<head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="sflaczers.js"></script></head>
Wskazówka: jQuery możesz podlinkować bezpośrednio z serwerów Google w ten sposob:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- W kodzie HTML strony, w miejscu gdzie ma pojawić się widget, umieść pusty element
<div>i nadaj mu jakieśid:
<body><div id="flaker"></div></body>
- Uruchom Sflaczersa – możesz to zrobic umieszczając następujący kod bezpośrednio pod divem z drugiego punktu:
<script type="text/javascript">var sflaczers1 = new Sflaczers({id: 'flaker', //id diva z drugiego punktulogin: 'jankowalski' //twój login na flaker.pl});</script>
Wskazówka: jeśli wrzucanie kodu JS w kod HTML strony mąci Twoje poczucie estetyki, możesz podpiąć powyższy kod pod event DOM ready w jQuery:
$(document).ready(function () {var sflaczers1 = new Sflaczers({id: 'flaker', login: 'jankowalski'});});
- W tym momencie Sflaczers powinien już działać. Pozostaje tylko dostosować wygląd widgetu za pomocą CSS. Poniżej zaprezentowany jest dynamicznie generowany kod HTML widgetu wraz z klasami CSS:
<div id="flaker"><div class="sflaczers-nav"><a href="#" class="sflaczers-nav-newest">« Nowsze wpisy</a><a href="#" class="sflaczers-nav-oldest">Starsze wpisy »</a></div><ul class="sflaczers-entries"><li class="sflaczers-entries-li"><a class="sflaczers-author-link">Jan Kowalski</a> <a class="sflaczers-source">(flaker)</a>:Tekst wpisu... <a class="sflaczers-comments-link">komentarze (1)</a><ol class="sflaczers-comments"><li class="sflaczers-comments-li"><a class="sflaczers-commenter-link">Pan Komentarz</a>: tekst komentarza...</li></ol></li></ul></div>
Pozostałe opcje
Parametr limit pozwala określić liczbę wyświetlanych wpisów:
<script type="text/javascript">var sflaczers1 = new Sflaczers({id: 'flaker',login: 'jankowalski',limit: 5 //pokaż 5 wpisów});</script>
Parametr avatars aktywuje wyświetlanie avatarów (1 sposób):
<script type="text/javascript">var sflaczers1 = new Sflaczers({id: 'flaker',login: 'jankowalski',limit: 5,avatars: true //pokaż avatary});</script>
Avatary mają swoje klasy CSS i umieszczane są w elementach listy w następujący sposób (dla wpisów i komentarzy):
<li class="sflaczers-entries-li"><img src="avatar.jpg" class="sflaczers-author-avatar">...<li class="sflaczers-comments-li"><img src="avatar.jpg" class="sflaczers-commenter-avatar">...
Alternatywnie, za pomocą parametru cssavatars, avatary mogą być „wypluwane” jako obrazki tła CSS w elementach listy (2 sposób):
<script type="text/javascript">var sflaczers1 = new Sflaczers({id: 'flaker',login: 'jankowalski',limit: 5,cssavatars: true //pokaż avatary jako obrazki tła elementów <li>});</script>
<li style="background-image: url(avatar.jpg); background-repeat: no-repeat; background-position: 0pt 0pt;" class="sflaczers-entries-li"><a class="sflaczers-author-link">Jan Kowalski</a>...<li style="background-image: url(avatar.jpg); background-repeat: no-repeat; background-position: 0pt 0pt;" class="sflaczers-comments-li"><a class="sflaczers-commenter-link">Pan Komentarz</a>
Będzie możliwość przefiltrowania pobieranych wpisów przez tag i typ (link, obrazek, tekst)?
No właśnie, wyświetlanie tylko flaków z określonym tagiem byłoby naprawdę fajne ;-)
Dodaj obsługę tagów, to będziesz moim fanem, jak mówi dzisiejsza młodzież (: