Hallo lieber Leser! Ich habe heute einen kann ich sagen halben Drupal-Tag, an welchem ich mich mit meinen Drupal-Projekten befassen will. So habe ich zum Beispiel im Drupal 8 Blog von mir unter http://wpshopde.de Shariff Share Buttons und eine funktionierende Cookie Bar umgesetzt.
Etwas darüber möchte ich hier mit dir gerne plaudern.
Shariff Share Buttons kamen bereits gross herum und bei WordPress ist es das Plugin Shariff Wrapper, welches du aus dem Backend heraus installieren kannst. Beim Drupal 8 bedienst du dich dieser Download-Quelle.
Es gibt meinerseits bereits ein kurzes Tutorial wie du Shariff Share Buttons in einem Drupal 8 Blog installierst und dieses habe ich eben im Drupal 8 Blog hinter diesem Linkverweis gepostet.
Inhaltsverzeichnis
Dortige kurze Anleitung ist nachvollziehbar
Diese Anleitung ist leicht verständlich und du wirst erst einmal das Drupal 8 Modul downloaden, lokal entpacken und anschliessend installieren. Im Backend unter „Erweitern“ aktivierst du dieses moderne Modul und dann im Backend unter „Konfiguration>>Shariff Buttons“ stellst du ein, welche Social Networks du angezeigt haben willst.
Vermutlich bist du selbst nur auf Google Plus, Twitter und Facebook präsent. So gilt es dann auch diese anzuhaken. Ich habe noch einen Account auf Pinterest und bei Xing, sodass ich diese beiden Social Networks ebenfalls per Button anzeigen lasse.
[dropcap size=“5″]E[/dropcap]s kann nicht schaden, hier und da aktiv zu sein. Denke nur daran, dass du deine Zielgruppe in diesen Social Networks findest. Vielleicht sind deine Leser nur auf Facebook oder nur in Twitter zu finden. Das musst du dann selbst herausfinden. Ich konzentriere mich etwas auf die drei bekannteste Social Networks, was für meinen Blogger-Alltag vollkommen ausreichen wird.
Nun, du hast die Shariff Share Buttons installiert und du musst noch im Drupal 8 Backend unter Leistung den Drupal Cache mal einmal löschen. Andernfalls lässt die Anzeige der Buttons im Frontend gerne auf sich warten 😉 Also das mal löschen und noch wäre es anzuraten, die Share Buttons per Blocklayout über dem Haupt-Content zu platzieren. So werden die Shariff Share Buttons immer über einem Drupal-Blogpost bzw. dem Artikel dargestellt.
Das wird dafür sorgen, dass der Leser nicht lange scrollen muss und die Buttons immer schnell finden kann.
Erstelle noch das Verzeichnis /libraries im Rootverzeichnis des Drupals
Das wird ebenfalls nötig sein. Du erstellst im Rootverzeichnis das Verzeichnis /libraries und lädst noch einmal den Inhalte der Libraries, die du hier findest, hoch. Der Pfad zu shariff.complete.js muss dermassen aussehen.
/libraries/shariff/build/shariff.complete.js
So bitte dann hochladen und im Status-Bericht im Drupal 8 Backend dürfte dann angezeigt werden, dass die Shariff Libraries verfügbar ist. Da wollen wir auch hin.
Dann nicht vergessen, den Drupal Cache unter Leistung im Backend zu löschen und schon müssten die Shariff Share Buttons auf der Startseite bzw. über jedem Blogartikel dargestellt werden. Sie testete ich heute schon, was funktionsfähig war.
Cookie Bar in Drupal 8 umsetzen
Wir sind aber noch nicht ganz fertig, denn als Google Account Besitzer hattest du 2015 auch mal eine Mail bekommen, in der es um die Cookie Bar ging. Diese Cookie Bar ist leider Pflicht und insbesondere dann, wenn Social Share Buttons und Google Adsense oder Google Analytics, alle Google Dienste, zum Einsatz kommen.
Im Falle von Drupal 8 setzen wir diese Cookie Bar mit diesem Modul um. Dieses schöne Modul installierst du ganz normal und wie gehabt und musst dann im Backend des Drupal 8 Blogs das Modul einstellen.
Du findest du es in der Auflistung im Backend.
Es gilt dann den Link zu deiner Datenschutzerklärung einzufügen und die Button-Beschriftungen zu übersetzen. Auch kannst du gleich den Cookie Bar Text selbst ins Deutsche übersetzen bzw. füge dort im Textfeld deinen Text ein. Das weisst du in etwa. Das kann dann so aussehen.
Diese Webseite nutzt Cookies, um dir ein besseres Surferlebnis zu bieten. Mit dem Klicken auf dieser Webseite bist du mit dem Einsatz von Cookies einverstanden. Mehr Infos findest du hinter dem Button mit "mehr Info".
So kannst du es dann gerne formulieren, weil ich es auch so machte.
Cookie Bar kannst du im Blog-Header platzieren
Die Cookie Bar kannst du oben platzieren, im Blog-Header, sodass sie ganz prominent auftaucht, wenn das Blog zum ersten Mal nach dem Cache-Löschen angesurft wurde. Diese Cookie Bar wird niemanden stören, weil es sie bereits auf jeder Webseite gibt. Auch denke daran, dass du in deiner rechtsgültigen Datenschutzerklärung die Punkte mit deinen Social Networks mit aufnimmst. Erstelle den Datenschutz auf der Seite http://e-recht24.de und so wird das passen.
Sobald du noch Google Adsense nutzt, brauchst du auch dafür etwas in der Datenschutzerklärung. Das ist aber auf E-recht24.de nur für die angemeldeten Nutzer gedacht. Du findest aber in Google auch dazu etwas. Suche nach „datenschutzerklärung google adsense“ und zuoberst gibt es eine Webseite, wo das zum Kopieren angeboten wird.
Google Adsense wird bei mir noch nicht angezeigt, warum auch immer
Ich muss noch warten, bis Google der Ansicht ist, Adsense anzeigen oder nicht. Alles richtig eingestellt habe ich schon einmal. Das wird nämlich bei dir auch ein Drupal 8 Modul sein, welches funktionieren sollte.
Du wirst die Google Adsense ID, die mit pub-XXXXXXXXX anfängt, eintragen müssen. Dann wenn du den Block mit Adsense konfigurierst, muss noch die Slot-ID eingetragen werden. Beides bekommst du heraus, wenn du den Anzeigen-Code in deinem G-Adsense-Account einmal kopierst und in den Editor in Windows einfügst. Dann siehst du beiden Parameter, um die es bei Adsense in Drupal 8 gehen wird.
Jetzt wäre es schon vollständiger und du hast die Shariff Share Buttons, die Cookie Bar, notfalls auch Adsense umgesetzt. Beim Letzteren muss ich schauen, warum es noch nicht angezeigt wird. Vermutlich, da das Blog noch sehr jung ist, müssen erstmals noch welche Adsense Anzeigen passend zu den Startseiten-Inhalten gefunden werden.
Auch kann ich dir empfehlen, mit responsiven Anzeigen zu arbeiten. Wenn Platz auf der Startseite ist, wird dieser auch mit Adsense da gefüllt, wo du vorher den Adsense Block untergebracht hast.
Fazit zu Drupal 8 Shariff Share Buttons und Cookie Bar
Ich hoffe, dass ich nun dir helfen konnte. Eigentlich keine komplizierte Sache und ein bisschen Drupal-Kenntnisse setze ich schon voraus.
Bei Fragen, hier laut schreien 😉
Freue mich auf dein Feedback.
by Alexander Liebrecht
Danke für die tolle Anleitung. Befasse mich in letzte Zeit auch ein bisschen mit Drupal. Eine Seite habe ich bis jetzt noch nicht damit umgesetzt. Da fehlen mir noch ein paar Wissensbausteine. Dieser Artikel hilft mir aber schon wieder ein Stückchen weiter.
Hallo Thorsten,
willkommen bei Internetblogger.de und freut mich sehr, dass du etwas mit dem Drupal CMS machst. So schlecht ist es ja nicht und lässt sich sehen. Ja, die Shariff Share Buttons kann man durchaus einsetzen. Bedenke dabei aber, dass du ein Modul mit Cookie Consent installieren musst. Weiss, Google will es so. Ansonsten ist die Umsetzung nicht sehr schwer und nachvollziehbar. Ich selbst bin aber noch kein Drupal Profi und bediene dieses CMS erst einmal. So sammeln sich halt einige Erfahrungen, die ich gerne an die Leserschaft weitergeben kann.
Welche Drupal Versionen setzt du denn schon ein, 7 und 8 oder nur 8er?
Hallo Alexander, vielen Dank für deine Antwort. Bisher nutze ich noch gar keine Drupal Version. Habe auch noch nichts damit umgesetzt. Ich sammle erst einmal Informationen und lese mir Artikel wie diesen hier durch 🙂 Wenn ich mich dann irgendwann fit fühle, werde ich mal ein Projekt damit umsetzen.
Hallo Thorsten,
alles kein Thema und falls du sichten magst wie ein Drupal 7 Blog live aussieht, so schaue bitte bei mir unter http://alexanderliebrecht.info nach. Drupal 8 Blog ist unter http://wpshopde.de
Drupal ist etwas komplizierter wie WordPress und daher kannst du dir dabei gerne viel Zeit lassen. Wenn du soweit bist, kannst es dir genauer ansehen und so eine Installation gerne wagen.
Frage *hier schrei* ^^
Hallo Alexander
Tolle Anleitung, nicht zu viel und nicht zu knapp. Ich habe kürzlich das Shariff-Modul in ein Drupal 8 Projekt eingebunden. Mir ist allerdings dabei aufgefallen, dass diese unterm IE 10/11 nicht richtig gerendert werden. In den <li> fehlen die jeweiligen Klassen „facebook“, „twitter“, etc. Sie sind zwar da, aber auf weißen Hintergrund sieht man sie eben nicht. Ist das bei dir auch der Fall?
Gruß Anui
Hallo Anui,
mittlerweile haben wir auch schon für D8 solche Buttons per Modul. Schaue bitte unter https://www.drupal.org/project/shariff . Das manuelle Einbinden praktiziere ich weiterhin, wenn es keine Plugins und Module gibt und ich setze die Methoden ein, die Github-Shariff-Repository unter https://github.com/heiseonline/shariff hergibt. Mehr steht uns nicht zur Verfügung. Ich wusste nicht, dass jemand noch mit IE arbeitet. Aber gut, soweit konnte ich es nicht testen und nur in den erst bekannten Browsern wie Chrome, Firefox.
Hast du es versucht mit „/shariff/shariff.complete.css“ und „/shariff/shariff.complete.js“? Das wäre fürs Einbinden der Scripte von Hand. Diese beiden Zeilen wie unter
dargestellt ist, bindest du jeweils vor dem schliessenden head-Tag und dem schliessenden body-Tag. Ich kann dir nicht sagen, ob man per manuelles Einbinden der Shariff Buttons den IE zufrieden stellt 😉 Versuch wäre es für dich vielleicht Wert.
Vielen Dank für deine schnelle Antwort. Ich würde liebend gerne nicht mehr auf IE optimieren, der macht einen nur Sorgen, aber die Kunden wünschen es und ich bin bloß Arbeitnehmer ^^.
Ich hab das Modul genutzt. Status Report sagt auch: Shariff Library ->Verfügbar; im Quelltext kommt auch die shariff.complete.css vor und die shariff.min.js. In allen anderen Browser klappt das auch. In D7 haben wir das Modul auch schon genutzt und da hab ich gestern auch nochmal auf IE10/11 getestet und da klappt es. Scheint es nettes D8 Feature zu sein -.-
Ja, gut, wenn die Kunden es wünschen, da kann man nichts machen. Hier im Blog sind es nur wenige IE-Besucher. Wahrscheinlich geht der Trend gegen FF und Chrome immer mehr. Zukünftig wird der mobile Markt immer mehr in der Vordergrund gelangen. Das soll mir auch Recht sein 😉
Gut, dass deine Tests nicht im Sande verlaufen sind.
Im Github-Repo findest du die Codes für die beiden oben erwähnten Scripte wie folgt vor.
Vielleicht kann man mit "shariff.complete.css und shariff.complete.js" besser arbeiten. Bei manchen Installationen hat es sich anders verhalten bei mir. Im IE das Ganze zu checken, setze ich mir mal auf die ToDo-Liste, wenn ich den IE auf Windows 10 habe.