Artykuł

cze 11 2011
0

System komentarzy DISQUS na Twojej stronie WWW

System komentarzy to oprócz samej treści dostarczanej przez stronę, jeden z kluczowych jej elementów, ponieważ dostarcza pewien rodzaj interakcji z naszymi czytelnikami. W przypadku mojego blogu, przez długi czas był to autorski system, który nie wymagał logowania, bądź rejestracji, ale koniecznym było podanie nazwy użytkownika, kodu captcha oraz samej treści komentarza. Patrząc na systemy komentarzy na innych stronach, udział serwisów społecznościowych oraz rozwiązań opartych na OpenId w dzisiejszym rynku, postanowiłem moje komentarza wrzucić do chmury.

Po stosunkowo, krótkiej analizie technologii dostępnych na rynku, wybór padł na system komentarzy Disqus.

O tym dlaczego warto zainteresować się tym i podobnymi systemami oraz jak w miarę bezboleśnie się do takiego systemu przenieść, postaram się opowiedzieć w dzisiejszym wpisie.

Czy warto?

Na początku powinniśmy sobie jednak zadać fundamentalne pytanie, czy warto? Wszystko zależy od tego co posiadasz w tej chwili i również co chciałbyś posiadać. Jeśli korzystasz z gotowego rozwiązania, do którego można dorzucać wtyczki, łatwo zmieniać i konfigurować, to być może lepiej zostać przy obecnym systemie. Jeśli korzystasz np. tak jak ja z autorskiego systemu, a jednocześnie chciałbyś iść z duchem czasu, to być może outsourcing komentarzy będzie odpowiednim wyjściem dla Ciebie.

Co oferuje Disqus? W głównej mierze komentowanie;-) Dla mnie do najważniejszych jego zalet z pewnością zaliczyłbym:

  • Logowanie za pomocą konta Disqus, Google, Twittera, Facebooka, Yahoo oraz OpenId. Ewentualnie można dodać komentarz jako gość
  • Zmniejszenie obciążenia naszej bazy danych - komentarze znajdują się na serwerze Disqus
  • Umieszczanie komentarzy w wątkach - daje to możliwość komentowania komentarzy innych
  • Możliwość oceny komentarzy typu - podoba/nie podoba się
  • Sortowanie komentarzy
  • Subskrypcja przez e-mail oraz RSS
  • Śledzenie reakcji do wpisów na Twitterze
  • Trackback
  • Możliwość własnej stylizacji za pomocą CSS

Jak widać funkcjonalności oraz zalet systemu jest naprawdę wiele. Z pewnością nie są to rzeczy, których nie da się samemu zaimplementować, ale po co wgryzać się w kilka różnych API i tracić cenny czas, w momencie gdy ktoś to już zrobił za nas i oferuje to nam za darmo?

Minusy

Dotychczas przedstawiłem Disqus jako system marzeń, dzięki któremu świat (przynajmniej ten wokół naszego bloga) stanie się lepszy. Niestety nie jest do końca tak kolorowo jakby się mogło z pozoru wydawać. Spójrzmy na listę punktów, które mogą świadczyć na niekorzyść systemu Disqus, a także prawdopodobnie innych podobny rozwiązań tego typu (np. największej konkurencji Disqusa - IntenseDebate):

  • Komentarze ładowane są z innej lokalizacji sieciowej, oznacza to, że ich ładowanie może w sposób znaczący wydłużyć czas ładowania się naszej strony
  • Do załadowania systemu Disqus, wymagany jest JavaScript. Jeśli nasi czytelnicy go wyłączą, automatycznie zablokują sobie dostęp do komentarzy
  • Komentarze przechowywane są na obcych serwerach, przez co mamy trochę mniejszą kontrolę nad nimi. Nie mówię tu już o prywatności, bo z reguły komentarze i tak widziane są publicznie

W każdym bądź razie, jeśli masz wątpliwości jak to wpłynie na Twoją stronę to zawsze możesz skrypt zainstalować, zmierzyć czas ładowania np. za pomocą Page Speed i porównać czas ze stanem obecnym instalacja jest naprawdę bardzo prosta;)

Instalacja

Zanim przystąpimy do instalacji, to należy najpierw utworzyć konto w serwisie Disqus. Musimy przede wszystkim podać adres strony oraz dane moderatora.

Po rejestracji, będziemy mogli przystąpić do instalacji, która sama w sobie jest bezproblemowa.

Autorzy przygotowali kilka scenariuszy dla popularnych rozwiązań. Dlatego, jeśli posiadasz jeden z systemów z poniższej listy, to może wykonać szybką instalację za pomocą porad przygotowanych przez Disqus:

  • WordPress
  • Blooger
  • Tumblr
  • MovableType
  • TypePad
  • Drupal
  • Joomla
  • Squarespace
  • Yola
  • DokuWiki
  • Storytlr
  • Sandvox
  • chi.mp

Jeśli posiadasz własny system, lub użytkowane przez Ciebie oprogramowanie nie figuruje na powyższej liście, również możesz korzystać z Disqus. Wystarczy, że w miejscu, w którym mają pojawiać się komentarze, skorzystasz z uniwersalnego kodu przygotowanego przez autorów strony dostępnego pod adresem: http://docs.disqus.com/developers/universal/ (kod z sekcji Embed code).

Szczególnie istotne w tym punkcje jest ustawienie zmiennej:

var disqus_shortname = 'example';

Do której przypisujemy wartość pola Site Shortname podanego podczas rejestracji. W tej chwili wystarczy odświeżyć stronę by móc cieszyć się z nowego systemu komentarzy:)

Licznik komentarzy

Bardzo istotną cechą systemu komentarzy jest umieszczenie licznika komentarzy np. na stronie głównej powiązanego z danym wpisem - tak jak np. jest to zrealizowane na Alt Control Delete.

Aby wyświetlić liczbę komentarzy, budujemy link do docelowej podstrony i dodajemy do niego etykietę #disqus_thread, czyli np.:

<a href="/artykuly/system-komentarzy-disqus
-na-twojej-stronie-www/#disqus_thread">liczba_komentarzy</a>

Następnie, na samym końcu strony tuż przed zamknięciem znacznika body (ważne!), umieszczamy kod licznika z sekcji Comment count. Również w tym przypadku, należy pamiętać o poprawnym ustawieniu zmiennej disqus_shortname. Po wykonaniu skryptu, anchor text, który wskazują na #disqus_thread zostanie podmieniony na liczbę komentarzy (i ewentualnie reakcji). Tekst opisujący liczbę komentarzy, możemy zdefiniować w konfiguracji panelu Disqus - patrz screen.

Dostosowywanie systemu Disqus do własnych potrzeb

System komentarzy Disqus, jest całkiem konfigurowalny. Wszelkie zmiany wykonujemy z poziomu panelu administracyjnego i nie jest przy tym potrzebna żadna ingerencja w kod Disqusa wklejony na naszą stronę.

To co przede wszystkim warto ustawić, to sposób moderacji naszej strony - czy komentarze będą dodawane automatycznie, czy też będą musiały czekać na naszą moderację. Moderację możemy też ustawić np. w taki sposób, że komentarz, który będzie zawierać link, będzie musiał zostać zatwierdzony przez nas. Możliwe są również opcje cenzury dla określonych wyrazów.

Koniecznie należy również ustawić język polski systemu komentarzy (niestety tłumaczenie trochę szwankuje).

Dla mnie istotną cechą konfiguracji, okazała się możliwość zmiany domyślnych stylów. Własne reguły, umieszczamy w odpowiednim polu panelu administracyjnego, a wcześniej możemy je przetestować na żywo, np. za pomocą Firebuga.

Przykładowe reguły dla mojej strony, zmieniające w głównej mierze marginesy - poniżej:

#dsq-content #dsq-footer{
    margin: 0.1em;
}

#dsq-content #dsq-global-toolbar{
    margin: 0.7em 0 0.5em;
}

#dsq-reply{
    margin-top: 0.5em;
}

.dsq-textarea-reply{
    margin-bottom: 1em;
}

#disqus_thread h3{
    margin: 0.5em 0 0.5em;
    font-size: 18px;
}

Disqus - Import komentarzy

Ostatnią rzeczą, którą musimy zrobić, by w pełni cieszyć się z naszych komentarzy, to import komentarzy z poprzedniego systemu. W tym przypadku, sprawa ma się podobnie jak w przypadku instalacji. Jeżeli dotychczas, korzystaliśmy ze znanego, popularnego rozwiązania, to import będziemy mogli dokonać za pomocą panelu administracyjnego, jeśli nie, to będziemy musieli się trochę bardziej napocić. Oto lista systemów, z których możemy zaimportować komentarze:

  • Wordpress
  • Blogger
  • MovableType
  • JS-Kit Echo
  • IntenseDebate
  • Generic (WXR)

Jak widać autorzy w tym przypadku, oferują już znacznie mniejszą liczbę rozwiązań. Jeśli nasz obecny system nie jest wspierany, to zalecane jest wykorzystanie formatu Generic (WXR). Ponieważ sam szukałem informacji na ten temat, doszukałem się, że użytkownicy często korzystają z innych formatów. Bardzo wygodny jest XML, jaki wykorzystuje IntenseDebate. To właśnie z niego postanowiłem skorzystać, gdy jakiś miesiąc temu robiłem import komentarzy.

XML od IntenseDebate, musi mieć odpowiednią strukturę (o tym za chwilę). Najpierw warto jednak wspomnieć, że taki dokument trzeba jakoś wygenerować. Prawdopodobnie, Wasze komentarze podobnie jak moje, znajdują się w jakiejś bazie danych. Musicie zatem również, korzystać z jakiegoś rozwiązania/języka, które obsługuję bazę danych (PHP, ASP.NET, JEE itd.). Dlatego też, możecie przygotować odpowiedni skrypt/program, który wygeneruje dla Was XMLa z wszystkimi potrzebnymi danymi - nie powiem Wam jak to zrobić, każda baza oraz strona jest inna. Mnie przygotowanie takiego rozwiązania, zajęło około 20-30 minut w PHP. Niezależnie od wybranej techniki/rozwiązania, w przypadku formatu IntenseDebate, powinniście uzyskać XML o takiej strukturze:

<?xml version="1.0" encoding="UTF-8"?>
<output>
	<blogpost>
		<url>/artykuly/bittorrent-zwiekszanie-predkosci-pobierania-i-wysylania/</url>
		<title>BitTorrent - zwiększanie prędkości pobierania i wysyłania</title>
		<guid>/artykuly/bittorrent-zwiekszanie-predkosci-pobierania-i-wysylania/</guid>
		<comments>
			<comment>
				<isAnon>1</isAnon>
				<score>1</score>
				<name>Yuras</name>
				<email>jerzy.piechowiak@adres.pl</email>
				<url>http://www.altcontroldelete.pl</url>
				<ip>127.0.0.1</ip>
				<date>2008-12-06 06:39:23</date>
				<gmt>2008-12-06 06:39:23</gmt>
				<comment>@ZjaVA, ale jakiego klienta używasz?</comment>
			</comment>
			<comment>
				<!--
				Treść kolejnego komentarza dla tego artykułu
				-->
			</comment>
		</comments>
	</blogpost>
	<blogpost>
		<!-- Kolejny post wraz z komentarzami -->
	<blogpost>
	<!-- ... -->
</output>

Przeanalizujmy powyższy kod. Format przygotowany przez IntenseDebate, zakłada grupowanie komentarzy według postów (znacznik blogpost). Posty z kolei umieszczane są w nadrzędnym elemencie output. W każdym poście, z definicji powinniśmy umieścić wszystkie komentarze dla tego postu, ale nic nie stoi na przeszkodzie, by określony blogpost pojawił się więcej niż raz i zawierał dowolną liczbę komentarzy. W przypadku mojego skryptu, każdy blogpost, zawierał tylko jeden komentarz i pojawiał się tyle razy ile było komentarzy dla wybranego wpisu. Wróćmy jednak do samej zawartości tego znacznika.

Każdy blogpost zawiera trzy znaczniki identyfikujące dany wpis:

  • url - adres do postu
  • title - tytuł postu
  • guid - identyfikator identyfikujący określony post w systemie, często jest to adres samego postu - tutaj UWAGA - jeśli wykorzystujemy przyjazne linki i adres wpisu może ulec zmianie, należy określić w tym przypadku jakiś unikalny identyfikator

Po zdefiniowaniu danych posta, przyszła pora na esencję, czyli same komentarze. Otrzymały one swój osobny węzeł comments, co wydaje się być całkiem logicznym rozwiązaniem. W węźle comments, może znajdować się x węzłów comment, który każdy reprezentuje dane jednego komentarza. Przeanalizujemy zatem co kryje za sobą węzeł comment:

  • isAnon - flaga, czy użytkownik jest anonimowy (1 włączona). W przypadku mojego importu opcja ta wynosiła zawsze 1
  • score - przeznaczenie nieznane
  • name - nazwa komentującego
  • email - adres e-mail komentującego - może być pusty
  • url - adres strony komentującego - może być pusty
  • ip - adres IP komentującego - może być pusty, albo też np. localhost
  • date - odpowiednio sformatowana - patrz przykład
  • gmt - j/w
  • comment - treść komentarza. Tutaj UWAGA. Zwróćcie uwagę, że treść komentarza przechowywana jest w znaczniku o identycznej nazwie jak znacznik opakowujący dane całego komentarza. Z punktu widzenia XML jest to poprawne, aczkolwiek należy zwrócić uwagę czy wszystkie węzły zostały prawidłowo i w odpowiedniej kolejności zamknięte

Cały XML, powinien zawierać wszystkie nasze komentarze, przypisane do odpowiednich postów. Import komentarzy, powinno się wykonać przed dodaniem nowych komentarzy, bezpośrednio za pomocą Disqus - nie umiejętna konfiguracja, może doprowadzić do wygenerowania nowych guidów dla naszych wpisów.

Podczas tworzenia skryptu generującego XML, powinniśmy również pamiętać o obsłudze wszystkich znaków niepożądanych w XMLu, czyli:

& -> &amp;
< -> &lt;
> -> &gt;
" -> &quot;
' -> &apos;

Mam nadzieję, że powyższe porady, pomogą/zachęcą Was, przynajmniej do spróbowania zabawy z Disqusem;)

P.S. Disqus posiada swoją aplikację na Androida:)

Data ostatniej modyfikacji: 27.03.2012, 08:56.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus