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 punktu login: '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>
|
Pobierz
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ż (: