Shariff Share Buttons beim Automad CMS installieren

Wie du Shariff Share Buttons beim Automad Static Page Generator handhaben und installieren kannst. Am idealsten ist es auf einer Domain bzw. Subdomain im Rootverzeichnis.

Hallo lieber Automad-CMC-Leser! Du bist hierher gekommen, weil du wohl nach Shariff Share Lösung für den Automad Static Page Generator suchtest. Hier bringe ich dir welche Hinweise, wie man die Shariff Share Buttons in Automad CMS einbinden kann.

Merke dir nur eines, dass es nicht im Unterverzeichnis einer Domain funktionieren wird. Das probierte ich eben aus und musste feststellen, dass eine Domain oder Subdomain gingen. Alles andere funktioniert nicht.

Einbinden der Shariff Share Buttons in Automad CMS

Du hast eine Subdomain, wo Automad CMS aufgesetzt ist und erstellst im FTP-Account zweierlei neue Verzeichnisse, wie /shariff und /my-shariff-backend für das PHP-Backend von Shariff.

Danach navigierst du zu https://github.com/heiseonline/shariff und lädst erstmals die JS/CSS-Scripte herunter. Diese lädst du anschliessend ins Verzeichnis /shariff hoch.

Dann brauchen wir das PHP-Shariff-Backend, welches du unter http://github.com/heiseonline/shariff-backend-php bekommen kannst. Das entpackst du lokal und lädst alle Verzeichnisse sowie die Datei index.php ins Verzeichnis /my-shariff-backend hoch.

index.php bearbeiten

Du definierst deine Domain, löschst weitere Social Networks aus der index.php. So etwas wie Reddit wirst du sicherlich hierzulande nicht brauchen, daher das einfach aus der index.php dementsprechend entfernen. Darin sind noch weitere Social Networks, die in Deutschland kaum verwendet werden. Diese auch löschen.

JS/CSS in header/footer.php einbinden

Das wäre der nächste Schritt, welchen du nimmst. Binde JS und CSS, CSS in header.php und JS in footer.php ein. Beispiel dafür gibt es im offiziellen GitHub-Repository für Shariff. Oben habe ich es nochmals verlinkt.

Wenn du das gemacht hast, musst du den Code fürs PHP-Shariff-Backend in der Datei deines Templates einbinden. Ach ja, natürlich meinte ich mit footer/header.php die Template-Dateien deines aktiven Automad-Themes.

Du nutzt vielleicht für das Blog, so wie ich hier, das Template /carousel-and-subnav.php und in diesem bindest du diesen Code ein. Such dir den Platz an der Stelle, die du hier im vorliegenden Code-Schnipsel siehst. So machte ich das und ich denke, dass es so in Ordnung ist. Checke anschliessend mit dem Google Chrome Inspector, ob JS/CSS von Shariff verfügbar ist und ob die URL auch mit Shariff erreichbar ist.

Hier ist der Code.

<div class="col-md-12">
                                                @t(filterParentByTags)
                                        </div>
                                        <div class="col-md-12">
                                        <p><div class="shariff" data-backend-url="/my-shariff-backend/index.php" data-services="[&quot;facebook&quot;,&quot;googleplus&quot;,&quot;twitter&quot;,&quot;pinterest&quot;,&quot;xing&quot;]" data-theme="standard" data-orientation="horizontal"></div>
</p>
                                        <p><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- wpzweinull.ch allgemeiner content blog -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxxxxxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
                                                @p(text)

                                        </div>
                                </div>

Ich habe noch Adsense im Code, sodass du dieses nicht beachten musst. Aber etwas höher ist der Shariff-JSON-Code. Wenn du bei deiner Domain bzw. Subdomain das PHP-Shariff-Backend unter /my-shariff-backend im Browser aufrufst, wird der JSON-Wert von "null" ausgegeben. Dann funktioniert das PHP-Shariff-Backend und du kannst weitermachen.

Nur Share-Count für Google Plus

Das ist demnach leider so und ich weiss auch nicht, was andere Share Zähler am Anzeigen verhindert. Wenn ich als Beispiel Shariff Wrapper bei Wordpress nehme, so werden dort etliche Share Counts angezeigt. Hier aber nicht, wenn ich das PHP-Shariff-Backend manuell einbinde. Nur G+ hat den Share Zähler.

Das wäre die Umsetzung. Falls du aber ein anderes Template für das Blog oder die statische Automad-Webseite nutzt, musst du dann in dem jeweiligen Template im FTP-Account den Shariff-JSON-Code auch dementsprechend einbinden. Es können das Karussell-Template, Gallery-Template oder etwas anderes sein. Sehr viele Templates hat das Automad CMS von Haus aus auch nicht. Da wirst du gut zurecht kommen.

Falls du Fragen zu dieser Shariff Share Button Umsetzung hast, feedbacke bitte hier drunter und ich komme dann gerne auf dich zu.

Wünsche dir viel Spass beim Einbinden der Shariff Share Buttons in Automad Static Page Generator.