Hallo lieber Herbie-Blog-Leser! In dieser Anleitung möchte ich dir zeigen wie Shariff Share Buttons in Herbie Flat File CMS zum Einsatz kommen und eingebunden werden. Das Letztere setzte ich hier eben um.

Es dauerte etwas, denn ich vergass, dass ich die Subdomain auf das /web-Verzeichnis umleiten liess. So muss es in der Tat sein in deinem Webhosting. Shariff Share Buttons ist die datenschutzkonformste Art der Social Share Buttons, die du im deutschsprachigen Raum bekommen kannst. Aus diesem Grunde bediene ich mich fast nur noch dieser Share Buttons Lösung.

Shariff-Verzeichnis erstellen und die Codes einbinden

Von Github unter https://github.com/heiseonline/shariff lädst du dir die Shariff Scripte herunter und bindest es nach dem unteren Schema und Beispiel in die Datei main.html unter /site/layouts/default ein. Das Beispiel aus Github sieht so aus.

<!DOCTYPE html>
<html>
<head>
<link href="/path/to/shariff.min.css" rel="stylesheet">
</head>
<body>
<h1>My article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

<h2>Minimum buttons:</h2>
<div class="shariff"></div>

<h2>More advanced buttons:</h2>
<div class="shariff" data-backend-url="/path/to/backend" data-url="http://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>

<!-- immediately before </body> -->
<script src="/path/to/shariff.min.js"></script>
</body>
</html>

Erklärung dazu

shariff.min bzw. shariff.complete.css kommt in den <head> - Sektor und shariff.min bzw. shariff.complete.js kommt vor dem schliessenden </body> -Tag in der Datei. So dann einbinden und danach musst du das Verzeichnis /my-shariff-backend im Rootverzeichnis deiner Herbie-Installation erstellen. Da Herbie Flat File CMS mit dem Verzeichnis /web arbeitet, muss das Shariff-Verzeichnis auch dort erstellt werden.

Das erste Verzeichnis /shariff erstellst du ebenfalls im /web-Verzeichnis und lädst die Scripte aus Github herunter, lädst sie dann wieder nach dieses Verzeichnis hoch.

Shariff Backend installieren

Shariff-Backend für sich später befindliche Verzeichnis /my-shariff-backend unter /web musst du von Github unter https://github.com/heiseonline/shariff-backend-php downloaden und lädst den Inhalt nach dieses Verzeichnis hoch.

Installiere bitte noch den Composer, weil du die Datei composer.json bedienen musst. Ansonsten hast du im Herbie-Blog-Frontend beim Aufrufen des Verzeichnisses /my-shariff-backend Fehlermeldungen. Es wird die Datei autoload.php im Verzeichnis /vendor vermisst. Das nur zu deiner Beachtung.

Shariff Backend hochgeladen, danach erstelle bitte ein Unterverzeichnis namens /tmp. Das muss so sein, damit die Share Counts angezeigt werden. Nachdem das erledigt wurde, kannst du im Verzeichnis /my-shariff-backend die Datei index.php mit dem unteren Inhalt erstellen. Das wird dann so sein.

<?php

require_once __DIR__.'/vendor/autoload.php';

use Heise\Shariff\Backend;

/**
 * Demo Application using Shariff Backend
 */
class Application
{
/**
 * Sample configuration
 *
 * @var array
 */
private static $configuration = [
'cache' => [
'ttl' => 60,
'cacheDir' => 'tmp',

],
'domains' => [
'herbie.wpzweinull.ch',
'www.ct.de'
],
'services' => [
'GooglePlus',
'Facebook',
'LinkedIn',
'Pinterest',
'Xing',
'AddThis'
]
];

public static function run()
{
header('Content-type: application/json');

$url = isset($_GET['url']) ? $_GET['url'] : '';
if ($url) {
$shariff = new Backend(self::$configuration);
echo json_encode($shariff->get($url));
} else {
echo json_encode(null);
}
}
}

Application::run();

Du nimmst nur deine Domain bzw. deine Subdomain und definierst das Verzeichnis /tmp, aber ohne den Slash davor, weil es dann ein Systemverzeichnis /tmp sein wird und das ist normalerweise vom Hosting her ein nicht erreichbares Verzeichnis, zumindest vom Web aus. Das also so machen und schon eilst du zum Frontend deiner Herbie-CMS-Installation. Noch werden die Shariff Share Buttons nicht zu sichten sein, weil wir den Shariff Code mit dem DIV-Container noch in der Datei default.html einbinden müssen.

Meinerseits habe ich es über dem Content eingefügt, was in dieser Datei dann derart aussieht.

<p><div class="shariff" data-backend-url="/my-shariff-backend" data-services="[&quot;facebook&quot;,&quot;addthis&quot;,&quot;googleplus&quot;,&quot;twitter&quot;,&quot;pinterest&quot;,&quot;xing&quot;]" data-theme="standard" data-orientation="horizontal"></div></p>
<div class="content">

Nach diesem Beispiel machst du es dann und erst dann werden Shariff Buttons im Frontend angezeigt. Vergib bitte noch dem Verzeichnis /tmp die CHMOD-Rechte von 777, habe ich es so mitbekommen. Oder wenn du dir nicht sicher bist, teste das mit CHMOD-Rechten von 755, was normalerweise ein Verzeichnis im FTP-Account hat.

Das wäre mein Shariff Share Buttons Tutorial für dich und es sieht komplizierter aus als es ist. Ich habe Shariff Buttons mittlerweile in fast allen Projekten im Portfolio eingebunden. Für solche CMS und Foren wie Wordpress, Drupal 7/8, Xenforo und andere gibt es Plugin/Module-Lösungen. Aber ansonsten kann man all das immer manuell realisieren.

Ich hoffe, dass das Tutorial nachvollziehbar ist und bei Fragen feedbacke hier mit Disqus.

by Alexander Liebrecht

comments powered by Disqus