Shariff auf dem eigenen Host einbinden

Shariff ist eine Lösung vom Computer Magazin c’t und von Heise online welches als Open Source veröffentlicht wurde. Dieses Programm ermöglicht es, social Buttons auf der Seite zu implementieren ohne das der Client (Browser) direkt mit den sozialen Diensten kommunizieren muss.

Zu dem Programm gelangen Sie mit diesem Link.

Für viele CMS Systeme wie z.B. wie WordPress, Joomla etc. gibt es bereits Plugins. Diese sind auf der Seite von dem oberen Link mit aufgeführt und unter folgender Kategorie ganz unten zu finden “Third-party integrations“.

Wenn Sie kein Plugin verwenden möchten bzw. momentan keines für Ihr System vorhanden ist, können Sie es selbst implementieren.

Implementierung von Shariff ohne Plugin

Als erstes benötigen Sie die Dateien die auf Ihren Hoster, Server hochgeladen werden müssen. Dazu klicken Sie auf den oberen Link. Anschließend gehen Sie bei der Anleitung zu der Kategorie “Getting Started”. Klicken Sie dort auf den Link.

Shariff herunterladen

Shariff Dateien herunterladen

Im nächsten Fenster haben Sie nun die Möglichkeit, die aktuelle Version herunterzuladen. Laden Sie einfach die Zip Datei herunter.

Shariff Source Code

Source Code des Shariff- tools

Nach dem die Datei heruntergeladen wurde, können Sie jetzt die Datei entpacken. Nachdem die Dateien entpackt sind, können Sie diese per FTP hochladen. In diesem Beispiel wird das Filezilla Programm verwendet.

Öffnen Sie Ihr FTP Programm und melden sich an. Erstellen Sie am besten einen neuen Ordner und nennen diesen “shariff”.

Erstellen eines Shariff Ordners

Shariff Ordner erstellen

Nun laden Sie die daten die Sie gerade entpackt haben in den Ordner hoch. Der Upload dauert in der Regel weniger als eine Minute. Nachdem der Upload beendet ist kann auch schon das Programm eingebunden werden.

Zum einbinden in den Quellcode auf der Seite haben wir nun 2 Möglichkeiten. Entweder mit einem Tag Management System wie den Google Tag Manager oder direkt in den Code. Als erstes muss geprüft werden welche Version des Codes eingebunden werden muss.

Prüfen ob das Ganze Script oder die Minimalversion verwendet werden kann

Prüfen Sie als erstes ob “Font Awesome” verwendet wird.

  1. Öffnen Sie Ihre Webseite
  2. Machen Sie einen Rechtsklick auf den Text auf Ihrer Seite
  3. Wählen Sie im Kontextmenü “untersuchen” aus

Prüfen Sie nun bei dem Punkt –> font-family ob dort Font Awesome mit aufgeführt ist

Font Family

Wenn ja dann verwenden Sie –> shariff.min.css

Wenn nein dann verwenden Sie –> shariff.complete.css

Prüfen Sie ob jQuery eingebunden ist.

  1. Öffnen Sie Ihre Seite
  2. Klicken Sie auf Ihre Seite mit einen Rechtsklick
  3. Wählen Sie nun “untersuchen” aus.
  4. Öffnen Sie den Reiter “Netzwerk” (Network)
  5. Geben Sie in das Suchfeld “jquery” ein (ohne Anführungszeichen)
  6. Laden Sie nun die Seite neu

Prüfen ob jQuery eingebunden ist

Wenn jQuery eingebunden ist verwenden Sie –> shariff.min.js

Wenn kein jQuery eingebunden ist verwenden Sie –> shariff.complete.js

Nachdem wir nun geprüft haben welche Versionen wir verwenden müssen, können wir nun mit der Implementierung auf der Seite beginnen.

Code direkt auf die Seite einbinden

Wenn Sie den Tagmanager verwenden gehen Sie weiter zum nächsten Punkt.

Als erstes muss die CSS Datei eingebunden werden. Diese gehört direkt in den <head> Bereich

Wenn Sie Font Awesome verwenden Sieht der Link wie folgt aus:

<link href="/shariff/shariff.min.css" rel="stylesheet">

Wenn Sie kein Font Awesome verwenden:

<link href="/shariff/shariff.complete.css" rel="stylesheet">

Nach dem Sie die links in dem <head> Bereich eingefügt haben, können wir nun ein <div> Element erstellen. Dieses wird Benötigt um die Buttons an die Stelle einzufügen, wo Sie die Buttons haben möchten. Bedenken Sie, dass Sie diesen am Besten am Ende der Artikelseiten einbinden. Das Div Element sieht wie folgt aus:

<div class="shariff"></div>

Unter dem <div> Element muss nun das Script eingebunden werden. Dieses wird danach eingebunden da der Code im Script sonst nicht das div Element mit der Klasse shariff finden würde und es würden keine Buttons eingebunden.

Wenn Sie bereits jQuery verwenden, Sie das Script wie folgt aus:

<script src="/shariff/shariff.min.js"></script>

Wenn Sie kein jQuery eingebunden haben:

<script src="/shariff/shariff.complete.js"></script>

Im ganzen würde Ihre Seite als Beispiel wie folgt aussehen:

<!DOCTYPE html>
<html>
<head>
    <link href="/shariff/shariff.min.css" rel="stylesheet">
</head>
<body>
    <h1>Ihr Artikel</h1>
    <p>Ihr text zum Artikel</p>

    <h2>Unter Überschrift</h2>
    <p>Ihr text zum 2. Thema</p>
    <div class="shariff"></div>


    <!-- Am besten das Script direkt über den </body> Tag -->
    <script src="/shariff/shariff.complete.js"></script>
</body>
</html>


Die buttons sollten beim laden wie folgt aussehen:

Shariff Buttons

Shariff Buttons

Code mit dem Tag Manager einbinden

Sie können den Code auch direkt mit dem Tag Manager einbinden. Der Code sieht wie folgt aus:

<script>
(function() {
var divShariff = document.createElement("div");
divShariff.className = 'shariff';
document.querySelector('.post-tags').appendChild(divShariff);

var scriptNames = [
"https://www.analytics-sem-tutorials.de/shariff/shariff.complete.js"
];
var linkNames = [
"https://www.analytics-sem-tutorials.de/shariff/shariff.complete.css"
];
for (var i = 0; i < linkNames.length; i++) {
var link = document.createElement('link');
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = linkNames[i];
document.head.appendChild(link);
}

for (var i = 0; i < scriptNames.length; i++) {
var script = document.createElement('script');
script.src = scriptNames[i];
script.async = false; // This is required for synchronous execution
document.querySelector('.shariff').appendChild(script);
}
})();
</script>

Die dick markierten Bereiche müssen ersetzt werden. Bei .post-tags müssen Sie ein Element mit einer Klasse suchen auf Ihrer Seite die geteilt werden soll.

  1. Gehen Sie auf eine Seite mit Ihren Artikel
  2. gehen Sie an den Ende des Artikels
  3. Machen Sie mit der maus einen Rechtsklick
  4. Wählen Sie untersuchen aus.

Jetzt sehen Sie am rechten Rand die Konsole mit den HTML Code. Wählen Sie dort ein Element mit einer Klasse unter Ihrem Artikel. Auf meiner Seite sieht es wie folgt aus:

Tauschen Sie außerdem die URL´s zu Ihren Dateien aus. Ob Sie die minimum oder complete Datei benötigen, erfahren Sie oben im Abschnitt “Prüfen”.

Fügen Sie nach dem Sie den Code angepasst haben, mit dem Tag Manager auf Ihre Seite ein.

Tag erstellen

  1. Öffnen Sie Ihren Tagmanager
  2. Klicken Sie im linken Menü auf Tags
  3. Klicken Sie auf Neu
  4. Klicken Sie auf Tag- Konfiguration
  5. Wählen Sie Benutzerdefiniertes HTML aus
  6. Kopieren Sie den gesamten Code hinein.
  7. Klicken Sie auf Speichern
  8. Klicken Sie auf Tag Speichern
  9. Geben Sie einen Namen ein z.B. Social Share
  10. Klicken Sie erneut auf Speichern

Trigger erstellen

Beim Trigger gibt es Grundsätzlich 2 Möglichkeiten. Dom ist bereit oder Fenster geladen. Wählen Sie Dom ist Bereit wenn die Buttons im sichtbaren Bereich sind beim laden der Seite. Sind die Buttons allerdings am Ende der Seite genügt auch Fenster geladen aus. Wenn Sie so immer verfahren, dass wenn Sie elemente im Nachhinein einfügen im nicht sichtbaren bereich wenn alles bereits geladen ist. kann es zu einer besseren Performance der Seite kommen.

  1. Klicken Sie im linken Menü auf Trigger
  2. Klicken Sie auf neu
  3. Klicken Sie auf Trigger- Konfiguration
  4. Klicken Sie oben rechts auf das blaue Plus
  5. Wählen Sie “dom ist bereit” oder “Fenster geladen” aus
  6. Wählen Sie nun “Einige Ereignisse aus”
  7. Wählen Sie die drei Felder wie folgt aus
  8. Page URL –> enthält –> Ihre einmalige Kategorie in der Url für Artikel z.B –> Blog
  9. Klicken Sie auf Speichern
  10. Geben Sie für den Trigger einen Namen ein und klicken erneut auf Speichern

Gehen Sie nun zurück zu den Tags und wählen Sie ihren gerade erstellten aus. Klicken Sie auf Trigger hinzufügen und fügen den Trigger hinzu. Klicken Sie auf Speichern. Nun ist der Trigger mit Ihren Tag verknüpft.

Ihr Trigger und Tag sollten nun wie folgt aussehen:

 

4 (80%) 1 vote