Disqus Comment System

av Dennis den mars 25, 2010 · 0 kommentarer

Vad är Disqus Comment System?

Då har jag äntligen fått ordning på allt. Om du varit inne på sidan tidigare lägger du kanske märke till att mitt kommentars fält ser annorlunda ut gentemot tidigare. Det är för att jag har skaffat mig ett nytt tillägg (japp du hörde rätt, ännu ett). Jag såg det första gången på www.carlbomfoto.se som för övrigt är en mycket intressant och inspirerande fotoblogg.

Det jag fastnade för var att under kommentarerna dök det upp en lista med ”Reactions”, som kort beskrivet är en lista med länkar till andra ställen på nätet där din artikel nämns. T ex Twitter som på bilden under.

Självklart vill jag inte vara sämre, det här måste jag skaffa mig! Det enda man behöver göra är att klicka på den här länken, du länkas då vidare till disqus.com. Klicka på ”Sign up, Free” och följ stegen. Det hela är väldigt enkelt.

Varför detta av alla tillägg?

Fördelarna med att använda det här tillägget insåg jag först när jag fick ordnat och provat det första gången. För det första är det väldigt tydligt och smidigt. För det andra tar det hand om vissa saker jag har andra tillägg för, ett av dem är Facebook Connect som jag har skrivit om förrut. Synd att man inte visste om det här tillägget då, du förstår om du läser artikeln. Ett annat tillägg som jag nu kan ta bort är Subscribe To Comments, som lägger till en kryss ruta om att prenumerera på kommentarer för aktuell artikel (mer om detta tillägg kan du läsa här). Då Disqus Comment System redan har en sådan funktion inbyggd kan jag alltså ta bort Subscribe To Comments. Tillsist, NoFollow Free som är ett tillägg som gör att sökmotorerna fortsätter vidare till andra sidor eller något sådant. Har inte riktigt koll, en som har koll däremot är www.sokmotorkonsult.se som för övrigt har en mycket intressant sida med många läsvärda artiklar.

Ändra i CSS:en

Det är nu det börjar bli intressant. Disqus Comment System kommer med ett standard tema, förhoppningsvis kommer det komma fler teman att välja bland efter hand. Men för tillfället måste man alltså göra om standard temat så att det ska passa sidan bättre. För att gära detta behöver man ändra en hel del i koden. Detta var lättare sagt än gjort då disqus bygger på både HTML, PHP, CSS och Javascipt. För mig som endast har grundläggande kunskaper i PHP och Javascript blev långa stunder av funderade på ett flertal ställen. Som tur är finns ju google, som hittils aldrig svikit mig

Det första jag ville göra var att ta bort disqus loggan. Jag vet att man borde stödja ett såpass bra tillägg som det här, men tycker att loggan snor för mycket av uppmärksamheten. Vid ett kommentars fält ska huvuddelen ligga på kommenterandet, det är också därför jag försökt rensa bort fler störande saker, det kommer flera exempel här under. Disqus får i slutändan ändå sin del av uppmärksamheten då deras logga dyker upp lite varstans när man använder tillägget. För övrigt står det på deras hemsida hur man tar bort den och då bör det vara okej tycker man. Hur man gör det och några fler saker går att läsa här (Jag la dock märke till att den inte är 100% uppdaterad).

Ta bort Disqus loggan

Steg ett är att klicka sig in under Kommentarer -> Disqus -> [Logga in med ditt konto] -> Settings -> Customize -> Custom CSS. Du bör nu ha en sida som liknar den här bilden (Stäng inte ner sidan, du behöver den senare):
För att göra ändringar på sidan behöver du skapa en egen CSS-mall som tillägget hämtar information ifrån. Jag har gjort en som heter own.css inget fancy men den fungerar, disqus.css är ju något mer logiskt. Du kan klicka på min mall för att få en direktlänk till mallen. Spara en egen mall någonstans i din temamapp och leta upp hela sökvägen till den, min ser ut såhär:
```
http://www.picmeeting.com/wp-content/themes/solarpress/own.css
```
och din kommer naturligtvis bli något sådant här:
```
http://www.din-domän.com/wp-content/themes/ditt-tema/vad-som-helst.css
```
I denna mall kommer vi göra alla ändringar som har med tillägget att göra.
Nu ska vi göra så att disqus comment system vet att det finns ovanstående mall och att den ska hämta information därifrån. Förhoppningsvis har du fortfarande uppe sidan i steg 1, annars öppna den igen. I den vita rutan klistrar du in hela sökvägen till din mall. I mitt fall:
```
@import url(http://www.picmeeting.com/wp-content/themes/solarpress/own.css);
```
Observera att du måste lägga till @import url innan sökvägen, det fungerade inte i mitt fall annars! Sådär nu när du har gjort steg 1-3 behöver du inte göra dem igen.
För att ta bort loggan öppnar du din CSS -mall och skriver:
```
.dsq-dc-logo { display: none !important; }
```
Före
Efter
Det är viktigt att du lägger till !important på slutet, detta gör att din mall kör över standard mallen för den aktuella css regeln. Nu ska förhoppningsvis loggan vara borta om du sparar och uppdaterar sidan igen.

Dölja antal kommentarer

Detta låter kanske som något ganska dumt att göra, alla tjänar la på att veta om artikeln du läser är populär eller har hamnat i en undanskymd vrå på Internet. Nej, det jag egentligen menar är att jag vill dölja antal kommentarer på just det stället där disqus har placerat det.

För jag har redan en stor röd blaffig rubrikliknande text som visar hur många kommentarer artikeln har, och så ska det förbli! Observera att detta endast fungerar om du använder dig av samma tema som jag. En hel del css regler är redan bestämda och ditt slutresultat kan därför variera.

Öppna comments.php som ligger i plugins/disqus-comments-system/ och klistra in den här kodsnutten:

<div id="comnums"> <h3> <?php comments_number('Inga kommentarer', 'En kommentar', '% kommentarer' );?> till " <?php the_title(); ?> "</h3> </div>

Öppna disqus.php som ligger i plugins/disqus-comments-system/ leta upp comments_number (använd sökfunktionen, det är värt det!) Hittar du rätt står det såhär:
```
add_filter('comments_number', 'dsq_comments_number');
```
Den raden byter ut comments_number mot dsq_comments_number och sen händer det en massa jag inte orkar ta upp. Men det enda du behöver göra är att ta bort den här raden, bort, alltihop. Nu kommer allt vara precis som innan, den röda blaffiga texten kommer visa antalet kommentarer på artikeln.

Styla kommentarerna

Det som tog mig allra längst tid var att komma på hur jag ska styla kommentarerna för att de ska se ut ungefär som de jag hade innan.

Öppna din css mall du gjorde i ”Ta bort Disqus loggan” i den klistrar du in följande kod och sparar.

.dsq-comment , .dsq-odd {
background:url("images/fade.png") repeat-x scroll 0 0 #FFFFFF !important;
border:1px solid #EAEAEA !important;
padding:10px !important;
margin-top:5px !important;

Självklart kan du ändra detta till vad du vill och jag är ganska säker på att du inte kommer åt fade.png om du inte snor den från mig först (inte mig emot, varsågod!). Det viktiga här är att lägga till !important. Annars kommer det inte hända mycket.

Knapparna ska ordnas

Okej, egentligen har jag redan ordnat dem, men jag och rubriker fungerar bara inte.

För att ”Skicka” osv knapparna ska passa resten av sidan lägger jag till css regler för dem. Precis som innan öppnar jag css mallen, i den klistrar jag in:

/button.dsq-button, button.dsq-button-small {
-moz-border-radius:5px 5px 5px 5px !important;
background:url("images/rmore.png") repeat-x scroll 0 0 #414141 !important;
border:1px solid #333333 !important;
color:#FFFFFF !important;
padding:3px 10px !important;
text-decoration:none !important;
text-transform:uppercase !important;
}

Koden ovan är densamma som jag använde i det ursprungliga kommentarsfältet. Kopiera/klistra med andra ord.

En riktigt lång artikel. Allt är faktiskt inte för dig som läsare utan även som en kom ihåg lapp för mig. Då man provar det mesta mellan himmel och jord glömmer man lätt bort vad man tidigare gjort. Jag hoppas ändå att du får lite nytta av artikeln