Hallo Blogleser und CMS-User! Es gibt eine neue Yellow CMS-Version, wie du unter https://github.com/datenstrom/yellow/issues/256 nachlesen kannst. Ermöglicht wurde vor allem das bessere Handling des Blogs und des Wikis. Aber darum wird es in diesem Blogpost auch nicht gehen.
Vielmehr möchte ich dir die Umsetzung der Shariff Share Buttons Lösung inkl. Share Zähler beim Flat File CMS namens Yellow zeigen. Das setzte ich heute um, nachdem mir das Yellow-Update geglückt war.
Inhaltsverzeichnis
Was brauchst du zum Umsetzen der Shariff Share Buttons?
Du brauchst JS/CSS-Dateien von Github, PHP-Shariff-Backend von Github und fügst all das in sidebar/header/footer.php in Yellow CMS ein. Leider kann ich in Yellow-Posts nicht mit JSON-Code arbeiten, weil es mir gleich Shariff Buttons im Frontend anzeigt. Es ist dort der „class=“shariff““ und vermutlich reagiert das CMS darauf. Ich machte mich aber kundig, wie ich nun mit Backticks den JSON-Code einbinden kann. Da warte ich nur noch, bis mein Ticket beantwortet wurde.
Wie installierst du Shariff Share Buttons in Yellow CMS?
Es gibt kleine Unterschiede beim Umsetzen, ob du nun dein Yellow-Blog im Unterverzeichnis, im Rootverzeichnis oder im Rootverzeichnis einer Subdomain hast. Ich habe es im Unterverzeichnis. Es geht darum, zwei Verzeichnisse wie /shariff und /my-shariff-backend im Rootverzeichnis zu erstellen. Im Falle der Unterverzeichnis-Installation von Yellow, nimm bitte das Rootverzeichnis der jeweiligen Domain und erstelle dort diese beiden Shariff-Verzeichnisse.
Danach lädst du CSS/JS-Script-Dateien ins Verzeichnis /shariff hoch.
Ins Verzeichnis /my-shariff-backend geht dann das PHP-Shariff-Backend, welches du unter https://github.com/heiseonline/shariff-backend-php/releases downloaden kannst. Es dort herunterladen und wieder hochladen. Öffne bitte die Datei index.php und es sollte dann in etwa so aussehen.
/** * Sample configuration * * @var array */ private static $configuration = [ 'cache' => [ 'ttl' => 60, 'cacheDir' => 'tmp' ], 'domains' => [ 'bigtreecms.wpzweinull.ch', 'wpzweinull.ch', 'www.ct.de' ], 'services' => [ 'GooglePlus', 'Facebook', 'LinkedIn', 'Pinterest', 'Xing', ] ];
Ich habe das tmp-Verzeichnis definiert, welches im selbigen Verzeichnis zu erstellen ist und bekommt CHMOD-Rechte von 777. Auch trägst du deine Domain oder Subdomain in der index.php ein. Zudem lösche nochmals alle SocialNetworks, die du nicht brauchst. Ich habe die Erfahrung gemacht, dass wenn man diese stehen lässt, dann die Share Counts nicht angezeigt werden. Im Endeffekt ist es nur der Zähler für G+. Alles andere wird nicht angezeigt, warum auch immer.
Teil II der Umsetzung der Shariff Buttons in Yellow CMS
Jetzt bindest du in der Datei /system/themes/snippets/header.php vor dem schliessenden <head>-Tag diesen Code ein. Schaue es dir hier im Code mal an.
<meta charset="utf-8" />
<meta name="description" content="<?php echo $yellow->page->getHtml("description") ?>" />
<meta name="keywords" content="<?php echo $yellow->page->getHtml("keywords") ?>" />
<meta name="author" content="<?php echo $yellow->page->getHtml("author") ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php echo $yellow->page->getHtml("titleHeader") ?></title>
<?php echo $yellow->page->getExtra("header") ?>
<link href="/shariff/shariff.complete.css" rel="stylesheet">
</head>
Es wird shariff.complete.css eingebunden. Aber in der Datei footer.php desselbigen Verzeichnisses bindest du shariff.complete.js ein. Das schaut demnach so aus.
<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">© 2016 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
<a href="<?php echo $yellow->page->base."/feed/page:feed.xml" ?>">Feed</a>.
<a href="<?php echo $yellow->page->base."/search/" ?>">Search</a>.
<a href="<?php echo $yellow->page->base."/sitemap/" ?>">Sitemap</a>.
<a href="<?php echo $yellow->page->base."/contact/" ?>">Contact</a>.
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Made with Yellow</a>.
</div>
</div>
</div>
<script src="/shariff/shariff.complete.js"></script>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>
Nun musst du nur noch das PHP-Shariff-Backend in einer passenden Datei einbinden.
<div class="shariff" data-backend-url="/my-shariff-backend" data-services="["facebook","googleplus","twitter","pinterest","xing"]" data-theme="standard" data-orientation="horizontal"></div>
Ich entschied mich für sidebar.php unter /system/themes/snippets/sidebar.php. Oder du willst eine andere Seite nehmen, wo der Blog, der Wiki oder was auch immer sind. In der rechten Sidebar im Yellow-Blog bietet es sich am idealsten an, wie ich finde.
Ab dann sollten die Shariff Share Buttons schon angezeigt werden.
Shariff-Yellow Plugin-Lösung
Diese gibt es unter https://github.com/schulle4u/yellow-plugin-shariff und leider werden durch das Plugin die Share Counts nicht angezeigt. Es fehlt das PHP-Shariff-Backend. So denke ich mir mal zumindest. Probiere beide Lösungen aus, um die goldene Mitte zu finden. Manuelle Umsetzung der Shariff Share Buttons bringt dir eine Menge Erfahrungen ein, aber auch die Plugin-Installation ist nicht ohne.
Ich hoffe, dass du das obige Tutorial nachvollziehen konntest und bei Fragen immer raus damit. Ich kann dir dann gerne helfen, Shariff im Yellow-Blog zu realisieren.
Ich freue mich auf deine Shariff-Yellow-Erfahrungen und anderweitiges Yellow-Feedback.
by Alexander Liebrecht