Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem
WebHelp.pl Warsztat Artykuły Disqus - komentarze dla Twojej strony

Warsztat / Artykuły i tutoriale

Disqus - komentarze dla Twojej strony

Rafał Kukawski 21 listopada 2011 komentarze ()

Chciałbyś szybko umożliwić użytkownikom komentowanie na swojej stronie, ale Twój CMS takiej funkcjonalności nie oferuje? A może konfiguracja Twojego serwera nie pozwala na uruchomienie takiej usługi? Albo chcesz mieć rozbudowane narzędzie małym nakładem pracy? W takich wypadkach proponuję zapoznać się z usługą Disqus.

Czym jest Disqus?

Disqus jest platformą oferującą komentarze dla stron WWW. Usługa powinna zainteresować przede wszystkim właścicieli stron internetowych, którzy chcieliby umożliwić użytkownikom swojej strony komentowanie jej treści, ale nie mogą tego wykonać w racjonalnym czasie z powodów technicznych lub bez dodatkowych nakładów finansowych. Warto zaznaczyć, że usługa w podstawowej wersji jest darmowa. I tą wersją zajmiemy się w tym artykule.

Jeśli podstawowa wersja nie będzie z jakiś powodów dla Ciebie wystarczająca, usługa dostępna jest też w 2 płatnych pakietach - Professional oraz VIP, które według autorów usługi powinny zainteresować dużych graczy.

Wracając jednak do podstaw usługi, główną jej zaletą jest jej łatwość obsługi. Rozbudowany, a zarazem przejrzysty panel administracyjny pozwala w łatwy sposób zarządzać komentarzami użytkowników, a sama integracja z własną stroną zajmuje dosłownie kilka minut.

Dodatkowo dostajemy wersję usługi przystosowaną do urządzeń mobilnych.

Oczywiście Disqus to nie same zalety. Główną wadą jest ograniczony dostęp do treści tworzonych przez użytkowników strony. Wszystkie komentarze są przechowywane na serwerach Disqusa, a jedyny dostęp jaki mamy to panel administracyjny.

Po drugie, domyślnym językiem usługi jest angielski, dlatego na polskie tłumaczenie nowych funkcji trzeba trochę poczekać. O ile anglojęzyczny panel administratora nie powinien być problemem, o tyle wymieszane polskie opisy elementów interfejsu z angielskimi na samej stronie nie wyglądają zbyt przyjaźnie dla użytkowników.

Za kolejną wadę usługi można przyjąć integrację ze stroną opartą o JavaScript. Oczywiście jest to jedyny sensowny sposób realizacji tego zadania, ale jednak w ten sposób odpada część użytkowników z niekompatybilnymi przeglądarkami lub posiadających dodatki typu NoScript.

Jeśli uważasz, że z tymi wadami da się żyć, możesz kontynuować lekturę.

Rejestracja

Aby zacząć pracę z Disqusem trzeba się oczywiście zarejestrować. Do wypełnienia mamy zaledwie 3 pola dotyczące strony WWW na której chcemy uruchomić komentarze oraz kolejne 3 pola dla danych użytkownika.

Formularz rejestracji w usłudze Disqus

Jeśli posiadasz już konto komentatora na Disqusie, nie musisz się ponownie rejestrować. Zaloguj się i przejdź do wyżej wymienionej strony. Formularz rejestracji nowej strony skróci się o część na dane użytkownika, a Ty zostaniesz przypisany jako główny moderator tworzonego konta.

Formularz rejestracji strony na Disqus

Po kliknięciu Continue otworzy się podstrona z szybkimi ustawieniami. Możemy ustawić wybrane opcje teraz lub zostawić sobie całą konfigurację na później, gdzie będziemy mieli dostęp do jeszcze większej ilości ustawień.

Szybkie ustawienia po rejestracji

Integracja ze stroną

Gdy przeszliśmy rejestrację, opiszę jak zintegrować system komentarzy z własną stroną. Out of the box dostajemy odpowiednie instrukcje i narzędzia ułatwiające uruchomienie usługi w popularnych systemach zarządzania treścią, takimi jak Wordpress, Joomla, Drupal, Blogger.

Obsługiwane przez Disqusa CMSy

Zakładając, że nasz CMS nie jest wymieniony w tej liście, wybieramy opcję instalacji za pomocą kodu uniwersalnego.

Kod uniwersalny

Klikając w link trafisz na stronę, na której znajdziesz krótki kod HTML z JavaScriptem, który wstawiasz w tym miejscu Twojej strony, gdzie chcesz wyświetlać komentarze.

Kod: Zaznacz cały
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname

// The following are highly recommended additional parameters. Remove the slashes in front to use.
// var disqus_identifier = 'unique_dynamic_id_1234';
// var disqus_url = 'http://example.com/permalink-to-page.html';

/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
   var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
   dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
   (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

Następnie odszukujesz linię o treści

Kod: Zaznacz cały
var disqus_shortname = 'example';

w której zastępujesz wartość example krótką nazwą strony (Site Shortname), której użyłeś podczas rejestracji. I to wszystko, co trzeba zrobić, żeby uruchomić komentarze na stronie.

Dokumentacja Disqusa zaleca też ustawienie dwóch innych opcji, ale nie jest to obowiązkowe.

  • disqus_identifier, który stanowi unikalny identyfikator w ramach całego Twojego serwisu. Przykładowym identyfikatorem może być ID danego wpisu z bazy
  • disqus_url — ta opcja informuje usługę Disqus o prawdziwym adresie danej podstrony. Jest to ważne, gdy do komentowanej treści prowadzą zmienne adresy (np. część podstrony można sortować dodając lub zmieniając w adresie zmienną ?sort=asc lub umożliwiasz przekazywanie identyfikatora sesji w adresie np. phpsessid=1b3470821f). Wtedy masz okazję podać jeden, unikalny adres pod którym dana treść jest zawsze dostępna. Inaczej każda różnica w adresie będzie tworzyć nowy rekord w usłudze Disqusa

Jeśli zdecydujesz się z tych opcji skorzystać, pamiętaj aby usunąć obydwa ukośniki sprzed słowa var.

Nie są to jedyne dostępne opcje. Pozostałe wymienione w dokumentacji to:

disqus_developer

Kod: Zaznacz cały
var disqus_developer = 1;

Zmienna informuje usługę Disqus, że na razie testujesz swoją stronę na lokalnym serwerze albo serwerze niedostępnym w internecie (np. w prywatnej czy firmowej sieci). Bez tej informacji, Disqus przyjmuje, że Twoja strona jest publiczna i sprawdza jej adres. Jeśli strona nie będzie dostępna, elementy interfejsu Disqusa nie zostaną wczytane.

disqus_title

Kod: Zaznacz cały
var disqus_title = "Tytuł strony";

Informuje usługę Disqus o tytule aktualnej strony. Informacja jest wykorzystywana w momencie tworzenia wątku do dyskusji. Jeśli zmienna nie zostanie ustawiona, usługa wykorzysta tytuł podany w znaczniku title lub adres aktualnej strony, jeśli HTMLowy tytuł też nie będzie dostępny (co oczywiście na poprawnych stronach nie powinno mieć miejsca).

Licznik komentarzy

Typowe blogi listują na stronie głównej ostatnie wpisy z linkiem do komentarzy i informacją o ilości komentarzy do wpisu. Z Disqusem też jest to możliwe.

Aby wyświetlić ilość komentarzy, wstawiamy odnośnik do komentarzy, gdzie adres musi kończyć się ciągiem #disqus_thread.

Kod: Zaznacz cały
<a href="post-123.html#disqus_thread">Komentarze do wpisu</a>

Następnie, przed znacznikiem zamykającym </body> wstawiamy poniższy skrypt, pamiętając o późniejszym ustawieniu zmiennej disqus_shortname, opisanej wcześniej w tym artykule.

Kod: Zaznacz cały
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'example'; // required: replace example with your forum shortname

/* * * DON'T EDIT BELOW THIS LINE * * */
(function () {
    var s = document.createElement('script'); s.async = true;
    s.type = 'text/javascript';
    s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
    (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
}());
</script>

Uzyskamy rezultat podobny do poniższego (proszę zauważyć podmianę tekstu Komentarze do wpisu licznikiem).

Przykładowy licznik komentarzy

Jeśli identyfikujemy swoje wpisy za pomocą zmiennej disqus_identifier, powinniśmy ten identyfikator umieścić w linku za pomocą atrybutu data-disqus-identifier.

Wyświetlany tekst można sobie przetłumaczyć na język polski oraz dostosować do swoich potrzeb w konfiguracji usługi.

Inne gadżety

Disqus pozwala wstawić jeszcze kilka prostych widżetów na stronę. Są to:

Ostatnie komentarze

Jeśli chcemy wyświetlić listę ostatnich komentarzy napisanych przez użytkowników, wystarczy wstawić poniższy kod do strony.

Kod: Zaznacz cały
<div id="recentcomments" class="dsq-widget">
<h2 class="dsq-widget-title">Recent Comments</h2>
<script type="text/javascript" src="http://nazwa-strony.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=32&excerpt_length=200"></script>
</div>
<a href="http://disqus.com/">Powered by Disqus</a>

W panelu administracyjnym w sekcji Tools → Code → Recent Comments dostępny jest kreator, który pozwala zmienić kilka opcji takich jak

  1. Ilość komentarzy do pokazania (domyślnie 5)
  2. Czy pokazywać awatary użytkowników? (domyślnie – tak)
  3. Rozmiar awatara (domyślnie – 32px)
  4. Ilość znaków komentarza (domyślnie – 200)
Popularne wątki

Widżet listuje domyślnie 5 najpopularniejszych wątków, używając tytułu lub adresu strony jako treści linka oraz pokazuje ilość komentarzy i czas ostatniego komentarza.

Kod: Zaznacz cały
<div id="popularthreads" class="dsq-widget">
<h2 class="dsq-widget-title">Popular Threads</h2>
<script type="text/javascript" src="http://nazwa-strony.disqus.com/popular_threads_widget.js?num_items=5"></script>
</div>
<a href="http://disqus.com/">Powered by Disqus</a>

Kreator, który pozwala ustalić liczbę wątków znajduje się w Tools → Code → Popular Threads.

Najwięksi komentatorzy

Istnieje możliwość wyróżnienia największych komentatorów. Wystarczy wstawić do strony kod kolejnego widżeta.

Kod: Zaznacz cały
<div id="topcommenters" class="dsq-widget">
<h2 class="dsq-widget-title">Top Commenters</h2>
<script type="text/javascript" src="http://nazwa-strony.disqus.com/top_commenters_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32"></script>
</div>
<a href="http://disqus.com/">Powered by Disqus</a>

W kreatorze (Tools → Code → Top Commenters) można ustawić:

  1. Ilość komentatorów (domyślnie – 5)
  2. Czy widżet ma uwzględniać moderatorów w rankingu (domyślnie – tak)
  3. Czy pokazać awatary (domyślnie – tak)
  4. Rozmiar awatarów (domyślnie – 32px)
Kombinacja powyższych

Ostatni z widżetów jest kombinacją powyższych. Wyświetla dane wszystkich powyższych widżetów w zakładkach. Wystarczy do strony wstawić kod

Kod: Zaznacz cały
<script type="text/javascript" src="http://nazwa-strony.disqus.com/combination_widget.js?num_items=5&hide_mods=0&color=blue&default_tab=people&excerpt_length=200"></script><a href="http://disqus.com/">Powered by Disqus</a>

Kreator z wszystkimi dostępnymi ustawieniami znajduje się w panelu administracyjnym pod Tools → Code → Combination.

Zarządzanie komentarzami i moderacja

Skoro uruchomiliśmy komentarze na stronie, zapoznajmy się z funkcjami moderacyjnymi usługi. Po pierwsze można zdecydować, kto może komentować w naszym serwisie — wszyscy, tylko zarejestrowani użytkownicy Disqusa czy tylko zarejestrowani użytkownicy z potwierdzonym adresem e-mail.

Kto może komentować na naszej stronie?

Istniejące komentarze można przeglądać w panelu administracyjnym pod adresem Panel moderatora dostępny jest w sekcji Admin → Moderate. Znajdziemy w nim listę wszystkich komentarzy pogrupowaną według ich statusu (zatwierdzone, oczekujące, spam, usunięte) oraz posortowaną według daty dodania. Wyszukiwarka pozwoli filtrować listę według podanego słowa kluczowego.

Lista komentarzy w panelu administracyjnym

Dodatkowo, przy każdym komentarzu na własnej stronie, mamy dostęp do prostych opcji moderacyjnych. Wystarczy wskazać kursorem odpowiedni komentarz, a pokaże się link Moderuj. Klikając w niego otworzy się okno z podstawowymi informacjami na temat autora komentarza (jego e-mail oraz IP) oraz przyciskami pozwalającymi edytować komentarz, usunąć go, oznaczyć jako spam lub dodać autora do czarnej listy.

Okno dialogowe moderatora

Czarna lista, biała lista

Jeśli któryś użytkownik strony zaczyna obrażać innych lub nagminnie wysyłać spam lub z innych powodów nas denerwuje, istnieje możliwość dodania go do czarnej listy. Można to zrobić na dwa sposoby.

Pierwszy sposób wymieniłem już wcześniej, można wybrać odpowiednią opcję w oknie dialogowym moderacji. Drugi poprzez panel administracyjny (Admin → Settings → Access control).

Czarna lista

Okno dialogowe dostępne w panelu administracyjnym oferuje większe możliwości blokowania użytkowników. Można ich blokować według

  • adresu e-mail
  • nazwy użytkownika
  • numeru IP komputera
  • domeny

Z drugiej strony, jeśli któryś użytkownik wnosi sporo wartości swoimi komentarzami, można dodać go na białą listę, dzięki czemu jego komentarze ominą ustawione przez nas blokady i zostaną pokazane od razu na stronie.

Zastrzeżone słowa

Oprócz czarnych i białych list, można chronić się przed niepożądanymi komentarzami za pomocą listy słów zastrzeżonych. Wystarczy w odpowiednie pole tekstowe wpisać te słowa, oddzielając od siebie znakiem przecinka. Można korzystać ze specjalnej składni .*, co pozwoli dopasować różne formy blokowanego wulgaryzmu.

Moderatorzy

Jeśli Twój serwis rozrósł się, stał się popularny i nie dajesz rady sam moderować wszystkich komentarzy, możesz zatrudnić wybranych użytkowników do tego zadania. Wystarczy, że przejdziesz do podstrony Admin → Settings → Moderation. Tam klikasz przycisk Add a moderator i wpisujesz w pole tekstowe jego nazwę użytkownika lub adres e-mail.

Dodawanie nowego moderatora

Moderatorami mogą być wyłącznie użytkownicy zarejestrowani w usłudze Disqus.

Ustawienia moderacji

Na koniec można ustalić kilka opcji dotyczących komentarzy. Przykładowo można zdefiniować, czy

  1. komentarze mają się pojawiać od razu na stronie, czy muszą najpierw zostać zatwierdzone przez moderatora
  2. możliwość komentowania danej treści ma zostać wyłączona po określonym czasie
  3. czy komentarze zawierające adresy WWW lub obrazy muszą zostać zatwierdzone przez moderację przed ich publikacją

Ponadto można włączyć powiadamianie mailem moderatorów, gdy komentarz zostanie oznaczony do moderacji oraz ustalić ilość oznaczeń po których komentarz nie zostanie wyświetlony na stronie.

Ochrona przed spamem

Disqus oferuje własny filtr ochrony przed spamem, który z biegiem czasu uczy się na podstawie oznaczeń zgłaszanych przez moderatorów.

Pole na klucz API Akismet

Jeśli z jakiś powodów domyślny filtr nam nie wystarcza, można użyć usługi Akismet. Wystarczy w zakładce ustawień ogólnych (Admin → Settings → General) zaznaczyć chęć korzystania z Akismetu i wpisać posiadany klucz API.

Możliwości konfiguracyjne

Za pomocą zestawu opcji możemy skonfigurować jak usługa Disqus działa na naszej stronie i które funkcje oferuje użytkownikom.

Jeśli Twoja strona posiada konto Twitterowe, można w konfiguracji wpisać nazwę użytkownika z Twittera, żeby ta pojawiała się w wiadomościach użytkowników, którzy korzystają z funkcji społecznościowych zintegrowanych z Disqusem.

Konto Twitterowe powiązane ze stroną

Jeśli zaznaczymy opcję Mentions, użytkownicy po wpisaniu znaku @ do pola komentarza zobaczą podpowiedzi ksywek wszystkich użytkowników udzielających się w aktualnej dyskusji.

Disqus z włączoną opcją Mentions

Domyślnie Disqus wyświetla przyciski Lubię to oraz Nie lubię tego. Można je wyłączyć zaznaczając opcję Disable Like Buttons. Należy zaznaczyć, że przyciski te nie mają nic wspólnego z facebookiem i jego przyciskiem Lubię to.

Disqus – przyciski Lubię to i Nie lubię

Zaznaczając opcję Media Attachments spowodujemy, że Disqus wyświetli pod komentarzem film (np. z Youtube) lub zdjęcie, do którego link został zamieszczony w treści komentarza.

Film Youtube w komentarzu

Kliknięcie w miniaturę otworzy nad stroną warstwę z odtwarzaczem filmu.

Dodatkowo można włączyć obsługę Trackbacków.

Jeśli korzystamy z motywu graficznego Narcissus, można zamiast linku do dialogu logowania wyświetlić loga wybranych usług społecznościowych potrafiących potwierdzić tożsamość użytkownika.

Opcje alternatywnego interfejsu logowania

Dostosowywanie wyglądu

Disqus pozwala w ograniczonym stopniu dostosować wygląd swojego interfejsu użytkownika. Na podstronie Admin → Settings → Appearance można aktywować jeden z dostępnych motywów graficznych. Dla darmowego konta mamy dostępne 2 – Houdini oraz Narcissus. Obydwa motywy nadają się dla stron z designem z dominującymi jasnymi kolorami.

Dostępne motywy graficzne

Można też aktywować specjalny motyw graficzny dla urządzeń mobilnych.

Disqus w przeglądarce internetowej systemu Symbian

Kolejne opcje pozwalają zmienić sposób wyświetlania komentarzy – płaski lub wątkowany.

Porównanie trybów wyświetlania wątku

Można też ustalić maksymalny poziom zagnieżdżeń komentarzy. Ustawienie jest globalne dla całej witryny i ma wpływ na istniejące już dyskusje. Komentarze zagnieżdżone poniżej ustalonego w późniejszym czasie limitu nie zostaną pokazane.

Kolejna opcja o nazwie Pagination pozwala ustawić maksymalną ilość komentarzy do wyświetlenia na raz, zaś za pomocą opcji Pagination type zdefiniujemy w jaki sposób chcemy pokazać dalsze komentarze. Do wyboru standardowa paginacja – czyli klikalne numery stron pod komentarzami – lub przycisk doładowujący kolejną serię komentarzy do aktualnej listy. Maksymalnie można wyświetlić 250 komentarzy na raz.

Porównanie sposobów stronicowania

Jeśli nie odpowiada nam domyślny sposób sortowania komentarzy – czyli wyświetlanie w pierwszej kolejności najnowszych komentarzy – można zmienić sposób sortowania na wyświetlanie najpierw najstarszych, najlepszych (najwięcej lajków), popularnych oraz wyróżnionych.

Jeśli preferujemy umiejscowienie formularza do komentarzy poniżej listy komentarzy, można domyślne ustawienie zmienić poprzez listę Comment Form Position.

Dalej można ustalić, czy chcemy wyświetlać awatary użytkowników oraz ich wielkość. Do wyboru są rozmiary 24px, 32px, 48px, 92px oraz 128px. Można też uploadować własny obrazek, który będzie wyświetlany dla użytkowników bez własnego awatara.

Na koniec można wybrać, czy chcemy wyświetlać komentarze w całości, czy mają zostać ucięte po określonej ilości słów oraz sposób wyświetlania daty dodania komentarza – bezwzględny (wczoraj 12:34) lub relatywny (35 minut temu).

Własny arkusz stylów

Domyślne motywy graficzne są raczej dość ubogie. Ma to jedną sporą zaletę – ich prostota pozwala bez nadmiernego wysiłku wkomponować komentarze w design własnej strony. W każdym razie, webmaster strony będzie musiał poświęcić kilkanaście minut czasu na dostosowanie wyglądu komentarzy.

Na samym końcu listy ustawień znajdziemy pole tekstowe, które jest miejscem na własne reguły CSS.

Aby zabrać się za formatowanie wyglądu, przydatne będzie narzędzie typu Firebug czy Developer Tools wbudowane w Google Chrome, żeby móc odczytać identyfikatory i klasy poszczególnych elementów Disqusa.

Zgodnie z kodem, który należy wstawić do strony, cała zawartość Disqusa znajduje się w elemencie o identyfikatorze disqus_thread. Jeśli chcemy nadać jakiś kolor tła, wystarczy wpisać

Kod: Zaznacz cały
#disqus_thread { background-color: #eee; }

Wszystkie pozostałe elementy mają swoje identyfikatory i klasy zaczynające się od dsq-.

Przykładowo, jeśli nie chcemy widzieć odnośników Subskrybuj przez e-mail oraz RSS można wpisać do arkusza regułę

Kod: Zaznacz cały
#dsq-subscribe { display: none; }
Formatowanie treści komentarzy

Disqus pozwala użytkownikom formatować treść ich komentarzy mimo, że informacja ta jest dość dobrze ukryta w dokumentacji usługi. Formatujemy za pomocą znaczników HTML. Według dokumentacji, dozwolonymi znacznikami są

Kod: Zaznacz cały
<hr><br><a><b><blockquote><caption><cite><code><em><i><p><pre><q><samp><span><s><strike><strong><u>

Z obserwacji wynika, że kod znaczników spoza tej listy zostaje wyświetlony w komentarzach jako tekst. Z dozwolonych znaczników usuwane są praktycznie wszystkie atrybuty. Na razie pewne jest tylko, że z odnośnika nie jest usuwany atrybut href, pod warunkiem, że nie zawiera potencjalnie niebezpiecznych treści (np. protokół javascript). Można zatem przyjąć, że usługa jest zabezpieczona przed potencjalnymi atakami ze strony złośliwych użytkowników.

Drugim atrybutem, który nie zostaje usunięty, jest class.

Masz pytania lub wątpliwości? Odwiedź nasze forum dyskusyjne.

Rafał Kukawski

Programista, webmaster. Szczególnie upodobał sobie JavaScript i technologie klienckie, choć strona serwera i bazy danych nie stanowią tajemnicy. Tworzy też aplikacje na urządzenia mobilne. kukawski.pl.


Komentarze


HTML CSS JavaScript PHP bazy danych MySQL Flash grafika framework hosting domeny pozycjonowanie wordpress Facebook