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

Sflaczers - logo

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

  1. Pobierz plik sflaczers.js i bibliotekę jQuery. Dołącz skrypty na swojej stronie w sekcji <head>:
  1. <head>
  2. <script type="text/javascript" src="jquery.js"></script>
  3. <script type="text/javascript" src="sflaczers.js"></script>
  4. </head>

Wskazówka: jQuery możesz podlinkować bezpośrednio z serwerów Google w ten sposob:

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  1. W kodzie HTML strony, w miejscu gdzie ma pojawić się widget, umieść pusty element <div> i nadaj mu jakieś id:
  1. <body>
  2. <div id="flaker"></div>
  3. </body>
  1. Uruchom Sflaczersa – możesz to zrobic umieszczając następujący kod bezpośrednio pod divem z drugiego punktu:
  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker', //id diva z drugiego punktu
  4. login: 'jankowalski' //twój login na flaker.pl
  5. });
  6. </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:

  1. $(document).ready(function () {
  2. var sflaczers1 = new Sflaczers({id: 'flaker', login: 'jankowalski'});
  3. });
  1. 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:
  1. <div id="flaker">
  2.  
  3. <div class="sflaczers-nav">
  4. <a href="#" class="sflaczers-nav-newest">« Nowsze wpisy</a>
  5. <a href="#" class="sflaczers-nav-oldest">Starsze wpisy »</a>
  6. </div>
  7.  
  8. <ul class="sflaczers-entries">
  9. <li class="sflaczers-entries-li">
  10.  
  11. <a class="sflaczers-author-link">Jan Kowalski</a> <a class="sflaczers-source">(flaker)</a>:
  12.  
  13. Tekst wpisu... <a class="sflaczers-comments-link">komentarze (1)</a>
  14.  
  15. <ol class="sflaczers-comments">
  16. <li class="sflaczers-comments-li"><a class="sflaczers-commenter-link">Pan Komentarz</a>: tekst komentarza...</li>
  17. </ol>
  18.  
  19. </li>
  20. </ul>
  21.  
  22. </div>

Pozostałe opcje

Parametr limit pozwala określić liczbę wyświetlanych wpisów:

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5 //pokaż 5 wpisów
  6. });
  7. </script>

Parametr avatars aktywuje wyświetlanie avatarów (1 sposób):

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5,
  6. avatars: true //pokaż avatary
  7. });
  8. </script>

Avatary mają swoje klasy CSS i umieszczane są w elementach listy w następujący sposób (dla wpisów i komentarzy):

  1. <li class="sflaczers-entries-li"><img src="avatar.jpg" class="sflaczers-author-avatar">...
  2. <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):

  1. <script type="text/javascript">
  2. var sflaczers1 = new Sflaczers({
  3. id: 'flaker',
  4. login: 'jankowalski',
  5. limit: 5,
  6. cssavatars: true //pokaż avatary jako obrazki tła elementów <li>
  7. });
  8. </script>
  1. <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>...
  2. <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

Czytaj więcej:
Artykuły » JavaScript
Tagi:
, ,

Grzegorz Wójcik

Grzegorz Wójcik jest założycielem internetowego magazynu kminek.pl. Pasjonat i twórca lekkich, dostępnych i użytecznych stron internetowych budowanych w oparciu o standardy sieciowe i najlepsze praktyki. Prywatnie wielki miłośnik ambitnego kina sci-fi oraz grunge-rocka z lat 90.

Zobacz wszystkie artykuły tego autora (15)

  1. ruiz 1

    Będzie możliwość przefiltrowania pobieranych wpisów przez tag i typ (link, obrazek, tekst)?

  2. No właśnie, wyświetlanie tylko flaków z określonym tagiem byłoby naprawdę fajne ;-)

  3. Dodaj obsługę tagów, to będziesz moim fanem, jak mówi dzisiejsza młodzież (:

  1. […] wrzucił link na Flakera przez Dashboard przed chwilą #Sflaczers . kminek.pl/sflaczers . Dobre wykup reklamę […]

  2. […] #flaker'owi przydał by się regulamin (w kwestii reklam in-flak), ponieważ widget z tej strony kminek.pl/sflaczers (patrz zapis: "brak reklam we wpisach") dyma wszystkich którzy kupili reklamę ;) via @jacek […]

Dodaj komentarz * pola obowiązkowe

 
 

Dozwolone tagi HTML: <strong> <em> <a href="" title=""> <code> <pre lang=""> <blockquote cite="">

Komentarze są moderowane. Mile widziane wpisy wnoszące nowe, ciekawe informacje do omawianego tematu
lub sygnalizujące ewentualne błędy merytoryczne. Wszelkie przejawy spamu lub nieetycznego zachowania bedą
karane blokadą adresu IP/domeny.