kminek.pl

Sflaczers – czyli moje podejście do tematu widgetu Flakera Grzegorz Wójcik

26 May, 2009 | Artykuły, JavaScript

Dla niezorientowanych – [1] flaker.pl to popularny w niektórych kręgach (zwłaszcza tzw. [2] geeków i [3] nerdów) serwis na modłę Twittera. Taki mikro-blog i agregator RSS w jednym. Sflaczers to prosty skrypt działający w oparciu o [4] 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 [5] zobaczyć tutaj.

Instalacja

[6] 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

[7] sflaczers.js (wersja skompresowana)

-----

Wydrukowano z: https://www.kminek.pl/sflaczers/

Lista adresów URL występujących w tekście:

[1] http://flaker.pl/
[2] http://pl.wikipedia.org/wiki/Geek
[3] http://pl.wikipedia.org/wiki/Nerd
[4] http://jquery.com/
[5] /lab/sflaczers/
[6] #pobierz
[7] /lab/sflaczers/sflaczers.js