Hallo lieber Leser! Erst einmal wünsche ich allen männlichen Kollegen einen schönen Herren/Vatertag und dass ihr diesen Tag euch gut erholt und Ruhe findet. In diesem Blogpost geht es um die Einbindung der Shariff Share Buttons im Flatboard Forum. Das setzte ich gestern um und möchte gewonnene Erfahrungen gerne mit dir teilen.
Shariff Buttons sind auf GitHub zu finden unter https://github.com/heiseonline/shariff und dort musst du das letzte Release downloaden. Im Falle des Flatboard Forums und meinem Falle mit der Flatboard Installation auf einer Subdomain unter https://flatboard.wpzweinull.ch musst du ein neues FTP-Verzeichnis namens /shariff erstellen.
In dieses Verzeichnis lädst du solche Dateien wie shariff.min.css, shariff.min.js, shariff.complete.css und shariff.complete.js.
Die Ansicht aus dem FTP-Account sieht so aus.
Inhaltsverzeichnis
Shariff-CSS/JS in main.tpl.php einbinden
Danach nimmst du die Datei main.tpl.php des Flatboard Themes „Kube“ und fügst CSS und Shariff-JS an der dementsprechenden Stelle ein. Laut der Shariff-Anleitung auf GitHub sieht es 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>
Die Datei shariff.complete.css oder shariff.min.css wird im Head-Sektor eingebunden und die Datei shariff.min.js oder shariff.complete.js bindest du vor dem schliessenden Body-Tag ein. Das Einbinden der Scripte und des CSS sorgt dafür, dass drei Shariff Share Buttons per Standard angezeigt werden. Jetzt müssen wir diese Zeile Code, geändert nach individuellen Bedürfnissen in der Datei view.php im Rootverzeichnis einbinden.
Diese Code-Zeile geht so.
<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>
Setze noch so etwas wie Social Sharing oder etwas zu SocialMedia darüber, damit deine Forumleser wissen, dass sie die Foruminhalte teilen dürfen und können. Aber auch sehen sie, dass es Social Share Buttons sind und das dürfte auch ausreichen.
Meine view.php sieht so aus
In meiner view.php schaut es so aus.
<h4>SocialSharing</h4> <div class="shariff" data-backend-url="/my-shariff-backend/" data-services="["facebook","googleplus","twitter","pinterest","xing","linkedin","info"]" data-twitter-via="blogsash" data-theme="standard" data-orientation="horizontal"></div>
Ich habe mit „data-backend-url“ das Shariff-Backend definiert, die URL davon. Zum Shariff-Backend komme ich etwas tiefer im Blogpost. Zudem solltest du noch „data-twitter-via“ einstellen, indem du deinen Nicknamen aus Twitter nimmst. Das wird dafür sorgen, dass in deinem Twitter-Namen geteilt wird. Auch im Falle des Flatboard-Forum solltest du „data-orientation“ mit „horizontal“ eintragen. Vertikale Share Buttons Postion kommt wegen der view.php eher nicht in Frage.
Shariff Backend und um die Zähler anzeigen zu lassen
Das Shariff Backend in PHP lädst du dir unter https://github.com/heiseonline/shariff-backend-php/releases herunter. Das sieht dann im FTP-Account bei mir dermassen aus.
Wichtig wäre darauf zu achten, um die Counts anzeigen zu lassen und das Shariff-Backend im Browser anzusurfen, dass die Datei index.php gleich im Shariff-Backend-Verzeichnis liegt. Das kannst du dann steuern, andernfalls musst du den Pfad zum Shariff-Backend in der oben erwähnten Datei anders definieren.
Shariff-Backend individuell einstellbar
Das Shariff-Backend, wenn du es hochgeladen kannst, kann noch individuell hinsichtlich der Zähler eingestellt werden. Dafür öffne bitte die Datei index.php und schaue es dir genauer an. Auf GitHub im Shariff-Backend-Tutorial wurde auch die Lösung für den eigenen Server gebracht. In deinem Falle wird es meistens Shared Webhosting sein und meine index.php schaut so aus.
<?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' => [
'flatboard.wpzweinull.ch',
'www.ct.de'
],
'services' => [
'GooglePlus',
'Facebook',
'LinkedIn',
'Reddit',
'StumbleUpon',
'Flattr',
'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();
Nachdem du auch die Domains oder eine Domain eingetragen hast, werden auch die Share Zähler im Frontend angezeigt.
Leider ist es derzeit nur der Zähler für Google Plus, aber eventuell muss ich noch mit anderen SocialNetworks die Forum-Inhalte erst teilen. Das kann ich auch beim WordPress CMS und dem Plugin Shariff Wrapper beobachten, was ebenfalls eine ähnliche Lösung sein dürfte.
Rufe Shariff-Backend im Browser auf
Dazu surfst du die URL des Shariff-Backend an. Es wird also dort der Wert „null“ angezeigt, was ja eigentlich zeigt, dass das Shariff Backend schon mal funktioniert. Es sollten noch Daten der Counts im json-Format ausgegeben werden. Das kann nur möglich sein, wenn schon geteilt wurde oder genauer gesagt, werden alle Werte bei Null liegen, wenn noch nicht geteilt wurde.
Teste bitte das mit dieser URL:
http://example.com/my-shariff-backend/?url=http%3A%2F%2Fwww.example.com
Ändere das nach deiner Einstellung und du solltest im Falle des funktionierenden Shariff-backend Json-Werte vorfinden. Gestern gab es bei mir im Flatboard-Forum Json-Werte bei Google Plus mit dem Wert „null“, was auch stimmt.
Das wäre die ganze Umsetzung
Studiere nochmals genauer die Shariff-Backend und Shariff-Anleitungen auf GitHub. Denke daran, das /tmp-Verzeichnis in der index.php zu definieren. Das reine System-Verzeichnis wird korrekterweise nicht beschreibbar sein, was mir mein Webhoster mitteilte. Den Fehler entdeckst du, wenn du das Shariff-Backend im Browser aufrufst. Setze das tmp-Verzeichnis ein, indem du davor und danach keine Slashes einfügst. Das mit Slash ist das System-Verzeichnis mit „tmp“, welches jedes Shared Webhosting wie auch Rootserver eben haben.
Shariff Share Buttons realisierte ich auf diese Art und Weise im TikiWiki, dem Flatboard und meinem MyBB-Forum unter https://webmasterwelten.de , falls du es dir auch dort ansehen magst.
Bei Fragen hierzu wende dich hier an mich und wir schauen, woran es denn hapert. Ich studierte gestern einige Stunden diese Shariff-Tutorials auf Github, eher alles klappte.
Wünsche dir super Umsetzung der Shariff Share Buttons Lösung und freue mich auf dein sinnvolles Feedback darunter.
by Alexander Liebrecht