Google+ och Facebook kommentarer i flikar på en Drupal 7 hemsida

Det bästa sättet att få många till att skriva kommentarer på en blogg är att göra det enkelt. Visst Drupal har ett väldigt bra kommentarssytem, nackdelen med det är att besökarna antingen måste registrera sig eller fylla i en Captcha för att man inte ska få för mycket spam. Att registrera sig innebär ett motstånd för många, ännu mer inloggningar att komma ihåg, vilket leder till att man inte gör det. Om man använder captcha måste den vara så komplicerad för att botarna inte ska lyckas tolka bokstäverna att vi människor har problem att se bokstäverna. Vad kvarstår då? 

Tillägg 2023-01-20 Den här metoden använder PHP Filter för att åstadkomma det önskade resultatet. När det här inlägget skrevs så var jag nu på Drupal och kunde inte så mycket. PHP Filter var en enkel lösning, absolut inget jag skulle rekommera någon att göra idag. Finns en hel del att läsa om det. Bättre att lägga till det i template filerna i temat för sajten. Med det sagt, låter texten och bilderna ligga för historiken men avråder alla från att följa nedanstående. (Google+ försvann för ett antal år sedan om ni missat det ;) )

Väldigt många idag har både Google+ och Facebook så det enklaste är att låta besökarna kommentera med de inloggningarna som de redan har. En till fördel är att besökarna på ett enkelt sätt kan dela kommentaren i sitt flöde, vilket medför att de hjälper till att sprida din blogg.

Tyvärr har jag inte hittat någon metod för att få med Drupals inbyggda kommentarssystem som jag känner mig nöjd med i dagsläget. Dessutom har jag inga kommentarer där idag, därför har jag valt att helt stänga av de inbyggda kommentarerna.

Som ni kanske vet sedan tidigare så gillar inte jag att installera onödiga moduler då varje modul innebär mer php kod och ofta mer databasfrågor vilket leder till ökade svarstider, alltså långsammare hemsida. Min metod behöver en extra modul samt en som ingår i Drupals kärna. Modulen som vi behöver installera är Block Tab, den modulen gör så att vi kan skapa flikar på en region. När vi är klara så kommer det att finnas en flik för Google+kommentarer och en för Facebookkommentarer. Istället för den modulen så kan man lägga dem under varandra men då blir sidan så lång. Ett annat alternativ är att lägga kommentarsrutorna bredvid varandra.

Aktivera modulen PHP filter

Kommentarerna från Google+ och Facebook kommer att läggas i två olika block så att vi kan placera dem var vi vill på sidan. För att vi ska kunna göra det så måste vi kunna köra PHP kod i ett block. Som standard så går inte det att göra, men i Drupals kärna så finns det en modul som heter PHP Filter. Vi börjar med att aktivera den. Gå till "Moduler".

Leta upp "PHP Filter" i listan och bocka i den. Gå sedan längst ner på sidan och tryck på "Spara".

När ändringar har sparats så är modulen aktiverad och ett nytt textformat har skapats. Vi måste nu bestämma vilka roller som skall få använda det nya textformatet. Observera att om du har flera användare på hemsidan så måste du tänka till ett par gånger vilka som verkligen behöver det här textformatet. Det är nämligen en säkerhetsrisk att tillåta vem som helst att använda det. Man kan skapa php kod som kan förstöra mycket. 

För att bestämma vilka roller som ska få använda det nya textformatet så går vi till Konfiguration -> Textformat.

Vi får då upp en lista över alla textformat som vi har. I listan skall det nu finnas ett nytt textformat som heter "php code" klicka på "konfigurera" på den raden. 

Textformat är metoden man använder för att bestämma vilka html koder som skall vara tillåtna i texten och man styra hur texten skall behandlas när den visas på hemsidan. Man kan bestämma att ett textformat bara kan användas av en del roller samt bara på vissa (eller alla) innehållstyper. Kanske kommer en fördjupning på det senare om intresse finns.

Bocka i de roller som skall använda det nya textformatet. Man kan även döpa om den om man vill att den skall heta något annat. Resterande inställningar behöver vi inte ändra för att aktivera kommentarerna. Klicka på Spara när du är klar.

Skapa ett block för Google+ kommentarer

Nu är det så dags att lägga till ett block för Google+ kommentarerna. Den här metoden är inte officiell från Google utan man använder koden som Google använder på sin bloggplattform blogger. Det betyder att en dag kanske det inte fungerar längre. Förhoppningsvis så kommer Google en dag att släppa en officiell metod men tills dess hoppas vi att den här fungerar. 

Gå till Struktur -> Block

Klicka på "Lägg till block" (längst upp till vänster).

Börja med att döpa den i fältet "Blocktitel", det här är vad som kommer att stå på knapparna i flikarna som vi senare kommer att skapa med modulen "Block Tab". Om man inte använder den så kommer texten att stå över blocket.

I Blockbeskrivning skriver vi en beskrivning av blocket så att vi om 5 år kommer ihåg vad det är för block. Jag döper den till samma som titeln "Google+ kommentarer".

Därefter går vi ner under text rutan "Blockinnehåll" och väljer vårat nya textformat "PHP code". Nu kommer PHP-koden som vi skriver i rutan att tolkas som PHP-kod.

Nu skriver vi följande i rutan:

<?php 

  $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

  $url = strtok($url, '?');

?>

<div class="g-comments" data-href="<?php echo $url; ?>" data-width="642" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div>

<?php talar om för webbservern att nu kommer text som skall tolkas som PHP-kod.

$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; Här skapar vi en variabel ($url) i den variabeln sparar vi adressen till den aktuella sidan.

$url = strtok($url, '?'); Rensar bort all text efter eventuella ?. Anledningen till att jag har med den är för att mina artiklar är uppdelade i sidor. Adressen slutar då med ?page="sidnr" vilket medför att kommentaren bara kommer att synas på den sidan som kommentaren är skriven på. Jag vill att alla kommentarer ska synas oavsett vilken sida i artikeln man är på. En anledning till det är för att man kan välja att se hela artikeln på en sida, om man gör de så skulle man inte se några kommentarer.

?> Talar om för webbservern att PHP-koden är slut.

<div class="g-comments" data-href="<?php echo $url; ?>" data-width="642" data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD"></div> Är själva koden för att implementera kommentarerna. I den kan vi ändra lite inställningar:

data-href="<?php echo $url; ?>" Här har vi lite php-kod igen. data-href= anger till javascriptet, som skapar kommentarsrutan, adressen till den aktuella sidan. Kommentarerna är ju styrda till en bestämd sida. echo $url är själva PHP-koden, det enda den gör är att skriva ut vad variabeln $url innehåller och det är ju adressen till den aktuella sidan.

data-width="642" bestämmer hur bred rutan ska vara för kommentarerna, 642 ändrar du till den bredden som du till ha.

Om vi sedan tidigare har en Google +1 knapp på sidan så är vi klara med blocket för Google. Men om vi inte har det så måste vi lägga till lite mer kod som aktiverar javascriptet för kommentarerna, det är samma script som för +1 knappen därför behöver man itne göra följande om man har en +1 knapp.

Det bästa är att lägga till nedanstående kod längst ner i html.tpl.php som ligger i templates mappen för ditt tema (public_html/sites/all/themes/TEMANAMN/templates/). Om du av någon anledning inte vill eller kan lägga in den där så kan du lägga till i samma test ruta som ovanstående kod. Fördelen med att läga till den i html.tpl.php är för att då kommer javascriptet att läsas in sist vilket betyder att resten av sidan kan visas för besökaren innan kommentarsblocket skapas. Om vi har blocket en bit  ner på sidan så märker besökaren inte så mycket av att det dröjer att par sekunder extra att skapa kommentarsrutan utan de kan börja läsa texten på sidan direkt.

Så lägg till följande kod i html.tpl.php eller i text rutan under koden som vi la till tidigare. 

<?php drupal_add_js('https://apis.google.com/js/plusone.js', 'external'); ?>

<script type="text/javascript">

  window.___gcfg = {lang: 'sv'};

  (function() {

    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;

    po.src = 'https://apis.google.com/js/plusone.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

<?php drupal_add_js('https://apis.google.com/js/plusone.js', 'external'); ?> PHP-kod som talar om för Drupal att en extern javascriptsfil skall läsas in.

Resten är kod för att aktivera javascriptet.

När vi är klara med koden så är det dags att testa att blocket fungerar. Gå längre ner på sidan och du ser nedanstående.

Under "Inställningar för region" väljer vi en placering för blocket på ditt standardtema. För mig är det Creative Theme.

Klicka på roller längre ner, och bocka i den rollen som din användare har men inga andra. Anledningen till det är att vi inte vill störa besökarna med den nya rutan innan vi är klara. Slutligen sparar vi.

Gå nu in på en sida när du är inloggad och du skall se följande i den regionen där du la till blocket (fast med din användare om du är inloggad på Google+)

Grattis det fungerar! Om den inte kommer upp så får du gärna skriva en kommentar nedan med vad som händer så ska jag försöka att hjälpa dig.

Skapa ett block för Facebook kommentarer

Dags att skapa ett till block men för Facebook den här gången. Vi börjar likadant som för Google kommentarerna, att skapa ett nytt block

Gå till Struktur -> Block

Klicka på "Lägg till block" (längst upp till vänster).

Återigen så börjar vi med att döpa blocket och välja rätt textformat.

Lägg till följande kod för att få in kommentarerna.

<?php 
  $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
  $url = strtok($url, '?');
?>
<div class="fb-comments" data-href="<?php echo $url; ?>" data-width="642" data-numposts="5" data-colorscheme="light"></div>

Den första delen känner vi igen från Google kommentarerna, den lagrar adressen till den aktuella sidan i variabeln $url.

<div class="fb-comments" data-href="<?php echo $url; ?>" data-width="642" data-numposts="5" data-colorscheme="light"></div> Här har vi koden som skapar kommentarsrutan. Även här kan vi ändra några inställningar själva. Antingen så kan man gå till https://developers.facebook.com/docs/plugins/comments/ för att skapa den här koden. Då får man manuellt lägga till "<?php echo $url; ?>" efter data-href= för att det skall fungera (annars så används samma adress till alla sidor, vilket betyder att alla kommentarer kommer att synas på alla sidor). Alternativt ändrar man inställningarna manuellt.

data-href="<?php echo $url; ?>" samma som för Googles, PHP-kod för att lägga in adressen till den aktuella sidan. Ändrar vi inte.

data-width="642" Anger bredden på rutan. Ändra 642 till hur bredd du vill ha den på din sida.

data-numposts="5" 5 anger hur många kommentarer som skall visas som standard.

data-colorscheme="light" Anger färgschemat för rutan. Kan vara antingen light eller dark.

Man kan även ange i vilken ordning kommentarerna skall visas, det kan du läsa mer om på länken till facebook ovan.

Om vi har en Facebook Gilla/Rekommendera knapp på sidan så är vi klara. Men om vi inte har det så måste vi, precis som för Google kommentarerna, lägga till lite kod i antingen html.tpl.php eller i slutet av det här blocket som vi skapar för att läsa in javascrpt filerna (om du har hoppat över Google avsnittet så finns det mer info om alternativen där).

<?php drupal_add_js('//connect.facebook.net/sv_SE/all.js#xfbml=1', 'external'); ?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/sv_SE/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Precis som vi gjorde på det förra blocket så lägger vi till den i en region och aktiverar den endast för rollen som din användare har. Därefter sparar vi och går in på en sida för att se så att det fungerar.

Om du kan se följande på din sida, grattis det fungerar! Om inte skriva gärna en kommentar så ska jag se om jag kan hjälpa till. Självklart så kommer det att vara din profil och inte min när du testar, om du är inloggad på Facebook.

Skapa en ny region i temat för kommentarerna

För att vi ska kunna få flikar för de olika kommentarsrutorna så använder vi module Block Tab, det den gör är att den skapar flikar för alla blocken som finns i en viss region. Jag vill ha kommentarerna direkt under artikeln, det logiska hade varit att bara placera blocken i Content regionen men då kommer Block Tab att skapa tre flikar, en för artikeln, en för Google+ kommentarerna och en för Facebook kommentarerna. Men det vill jag ju inte. 

Om ditt tema har en tom region direkt under huvudinnehållet som passar så kan man använda sig utav den. Tyvärr saknar mitt tema (Creative Theme) det. Lösningen blir då att skapa en nya region.

För att skapa en ny region, som jag kommer att döpa till Content Comments, så måste vi definiera den i .info filen för temat. Den filen hittar du under public_html/sites/all/themes/temanamn/temanamn.info. Öppna den filen och leta efter raderna som ser ut enligt nedanstående.

regions[content]        = Content

Under den lägger vi till följande.

regions[content_comments]        = Content Comments

Nu har vi regionen definierad men vi har inte bestämt var den skall ligga än, därför öppnar vi nu page.tpl.php som du hittar under public_html/sites/all/themes/temanamn/templates/. Kommentarerna ska hamna under artikeln, artikeln som i mitt tema ligger i regionen content. Vi letar reda på var den regionen finns i page.tpl.php genom att leta efter föjande kod.

<?php print render($page['content']); ?>

Under den koden lägger vi till följande.

    <?php if ($page['content_comments']): ?>
        <?php print render($page['content_comments']); ?> 
    <?php endif; ?>

Dags att testa den nya regionen. För att vi ska kunna göra det så måste vi förmodligen rensa cachen. Gå till Konfiguration -> Prestanda och klicka på Töm all cache.

Sedan går vi till Struktur -> Block.

Leta nu reda på de nya blocken och i rullisten väljer vi vår nya region. Om den inte finns så har du förmodligen missat något. Skriv gärna en kommentar nedan så ska jag försöka hjälpa dig.

Blocken ska fortfarande bara synas för din roll eftersom att vi inte är klara än så vi ändrar inget mer än regionen just nu.

Spara och nu ska det se ungefär så här längst ner på sidan. Ignorera för stunden att den även syns på startsidan vi kommer att åtgärda det senare.

Placera kommentarsblocken i flikar

För att inte sidan ska bli för lång så vill jag ha flikar där man kan välja vilket system man vill kommentera med. För att göra det så behöver vi en modul Block Tab. Ladda ner modulen, packa upp den och kopiera till modules katalogen (nedanstående förutsätter att du laddat ner gzip-versionen och att du utför kommandona i Linux).  

tar -xf block_tab-7.x-1.0.tar.gz 

mv block_tab public_html/sites/all/modules/

Därefter går vi till Moduler i Drupal för att aktivera modulen.

Leta reda på Block Tab och bocka i den, därefter klickar vi på spara längst ner.

Nu är modulen aktiverad, för att välja vilken region som modulen ska skapa flikar av går vi till Konfiguration -> Block tab settings.

Upp kommer en lista med alla regioner som finns i det aktuella temat. Bocka i den regionen som vi har placerat kommentarerna i. Det är alla inställningar som finns. Klicka på Spara inställningar. 

 Nu ska det se ut enligt nedan om allting stämmer. Men knapparna är ju blåa, det stämmer ju inte så bra i mitt tema. 

Ändra knapparnas färger

Knapparnas färger måste ju stämma överens med övriga färger på hemsidan. Därför öppnar vi CSS filen för modulen block_tab. Filen heter block_tab.css och du hittar den i följande katalog public_html/sitas/all/modules/block_tab/css/. Öppna den i valfri texteditor. En CSS fil bestämmer hur texter och annat på hemsidan skall se ut, så för att ändra färg så ska vi ändra lite i den. Här ser du hur den ser ut nu.

/* $Id$ */
.block_tab-title {
  background-color: #0073BA;
  color: #FFFFFF;
  cursor: pointer;
  margin-right: 6px;
  padding: 4px;
}

.block_tab-title.active {
  font-weight: bold;
  text-decoration: underline;
  background-color: #4099CF;
}

.block_tab-title:hover {
  background-color: #4099CF;
}

Om vi börjar längst upp så har vi .block_tab-title {. Här ställer vi in hur knapparna ska se ut. 

I nästa stycke har vi .block_tab-title.active { den bestämmer hur knapparna skall ändras när de är den aktiva fliken. Inställningarna på den första ärvs så vi behöver bara definiera det som skall ändras.

Slutligen .block_tab-title:hover { styr hur knappen ska se ut när musen är över den. Även den här ärver inställnignarna från den första så vi definierar bara det som ändras.

Dags att ändra lite vi börjar under .block_tab-title {:

background-color: #0073BA; bestämmer bakgrundsfärgen på knappen. Den ändra jag till background-color: #E7E5E3; 

color: #FFFFFF; styr färgen på texten, ändras till color: #100100;

cursor: pointer; bestämmer hur muspekare skall se ut när man är över knappen, den får vara oförändrad.

margin-right: 6px; avståndet mellan knapparna. Marginalen till höger om varje knapp skall vara 6px, även den får vara oförändrad.

padding: 4px; bestämmer hur mycket större knappen ska vara än texten, som standard är alltså knappen 4pixlar runt om texten. I mitt tema så är det padding: 4px 5px; vilket säger att toppen och botten ska vara 4 pixlar, häger och vänster sida är det 5pixlar.

Knapparna på min hemsida har alla rundade hörn, för att få till det så lägger vi till border-radius: 4px 4px 4px 4px;.

Så här ser det ut nu.

.block_tab-title.active { står nu på tur, den bestämmer hur den aktiva knappen ska se ut. Så då ändrar vi lite i den med.

font-weight: bold; Gör texten fet.

text-decoration: underline; Texten skall vara understruken.

background-color: #4099CF; slutligen har vi bakgrundsfärgen. Ändras till background-color: #444; så blir den mörkgrå. Men nu syns inte texten, så då lägger vi till.

color: #FFF; Som gör texten vit.

Och här är resultatet. Kanon vi är ju klara.

Fast vad händer vi drar musen över knapparna?

Men vad händer vi för musen över knappen

Ajdå den sista har vi ju inte ändrat än. Så då åtgärdar vi även .block_tab-title:hover {

background-color: #4099CF; den här känner vi igen. Den ändra ju bakgrundsfärgen. Så då ändrar vi den till background-color: #D7D5D3; såblir knapparna lite mellangrå eller vad man nu ska säga. Men texten är ju vit så då får vi lägga till.

color: #000; så att texten syns.

Nu ser koden så här.

/* $Id$ */
.block_tab-title {
  background-color: #E7E5E3;
  color: #100100;
  cursor: pointer;
  margin-right: 6px;
  padding: 4px 5px;
  border-radius: 4px 4px 4px 4px;
  margin-top: 2px;
  font-weight: normal;
}

.block_tab-title.active {
  background-color: #444;
  color: #FFF;
}

.block_tab-title:hover {
  background-color: #D7D5D3;
  color: #000;
}

Nu är det klart. Spara block_tab.css filen, du kanske inte ser ändringarna direkt på grund av cachen. så gå in på Konfiguration -> Prestanda och klicka på Töm cache. Uppdatera därefter sidan och kontrollera att det ser bra ut.

Gör kommentarerna synliga för besökarna

Än så länge syns inte kommentarerna för besökarna så nu gör vi dem synliga genom att gå till Struktur -> Block.

klicka på Konfigurera för ett av blocken.

Klicka på Roller längst ner och bocka ur bocken för den rollen du använder. 

Nu syns kommentarerna på alla sidor, vilket kanske inte är önskvärt. Klicka därför på Innehållstyper och bocka i de innehållstyper du vill ha kommentarerna på. När du är klar klickar du på Spara block och gör om processen med det andra blocket. 

Nu ska kommentarerna synas på din hemsida. 

Saker som kan vara bra att veta

Kommentarerna som besökarna skriver kommer att synas i deras flöde om de bockar i bocken för "Dela också på Google+" (den kommer fram när man börjar skriva). De kan då också begränsa till vilka cirklar som inlägget skall delas till. Det betyder att om de delar en kommentar med en cirkel som du inte finns med i så ser du inte den kommentaren. Möjligheten att moderera kommentarerna saknas tyvärr.

Facebook kommentarerna går att moderera om man lägger till några metatagar på hemsidan, kommer att gå igenom det i ett kommande inlägg.