Social Share Buttons in Textpattern

Ich bin ja noch ziemlich neu auf dem Gebiet von Textpattern, also Textpattern als CMS zu benutzen. Erfahrungen habe ich bisher mit Wordpress, Movable Type 5 und Octopress. Aber wie dem auch sei, dieser Artikel beschäftigt sich jetzt tatsächlich mal nicht mit Apple. Es geht in diesem Beitrag vielmehr darum, wie man statische Social Media Buttons einbauen kann, also die berühmten Twitter oder Facebook Sharing Knöpfe unter seinem Artikel anzeigt.

Dazu habe ich einfach die sehr gute Anleitung von Perun adaptiert und auf Textpattern angewendet, obwohl er das eigentlich schon von allein gemacht hat.

Wenn ihr fertig seid, sieht das ganze in etwa so aus:
Social Media Sharing Buttons ins Textpattern

Neuen Baustein anlegen

In diesen Baustein kommt der folgende Code, der euch automatisch Xing, Facebook, Twitter, Google+ und Delicious als Button einfügt. Den Baustein nennt ihr social und er gehört zum Bausteintyp diverse.

<div class="weiterempfehlen">
    <p>Diesen Artikel weiterempfehlen:</p>
    <ul>
        <li><a href="http://www.xing.com/app/user?op=share;url=<txp:permlink />;title=<txp:title />;provider=<txp:site_name />" target="blank"  title="Bei XING empfehlen"><span>XING</span></a></li>
        <li class="tw-einzeln"><a href="https://twitter.com/intent/tweet?source=webclient&text=<txp:title />%20<txp:permlink />" target="blank" title="Bei Twitter empfehlen"><span>Twitter</span></a></li>
        <li class="fb-einzeln"><a href="https://www.facebook.com/sharer/sharer.php?u=<txp:permlink />&t=<txp:title />" target="blank" title="Bei Facebook empfehlen"><span>Facebook</span></a></li>
        <li class="gp-einzeln"><a href="https://plusone.google.com/_/+1/confirm?hl=de&url=<txp:permlink />&title=<txp:title />" target="blank" title="Bei Google+ empfehlen"><span>Google+</span></a></li>
        <li class="del-einzeln"><a href="http://del.icio.us/post?url=<txp:permlink />&title=<txp:title />" target="blank" title="Bei Delicious empfehlen"><span>Delicious</span></a></li>
    </ul>
    <div class="clearer"></div>
</div>
bc(prettyprint linenums). 

CSS Datei bearbeiten

Dann geht ihr auf Präsentation --> Stilvorlagen und fügt folgenden CSS Code in eure CSS Datei ein.

/* Perun Social Buttons START */
.weiterempfehlen        {margin-bottom: 19px;}
.weiterempfehlen p      {font-weight: bold; margin-bottom: 4px !important;}
.weiterempfehlen ul     {list-style: none; line-height: 24px; margin: 5px 0 15px 0; padding-left: 0;}
.weiterempfehlen li     {display: inline;}
.weiterempfehlen a      {float: left; width: 24px; height: 24px; margin-right: 25px; background: url('/buttons/einzeln.png') no-repeat; border-bottom: none !important;}
.weiterempfehlen span   {display: none;}
.tw-einzeln a   {background-position: left -26px;}
.fb-einzeln a   {background-position: left -52px;}
.gp-einzeln a   {background-position: left -78px;}
.del-einzeln a  {background-position: left -104px;}
.weiterempfehlen a:hover {position: relative; top: -1px;}
/* Perun Social Buttons STOP /*

Ich habe das vor dem ursprünglichen CSS getan, damit ich es im Überblick habe, aber das bleibt euch überlassen.

Bild uploaden

Ihr müsst natürlich noch die statischen Symbole der Sharing-Dienste auf euren Webspace uploaden. Vorteil von statischen Symbolen ist natürlich der sehr schnelle Ladevorgang vom eigenen Webspace bei Aufruf eines Artikels, im Gegensatz zu fremd gehosteten Bildern.

Ich habe dazu im root-Verzeichnis meines Textpatterns einen neuen Ordner buttons angelegt, dort liegt die Datei einzeln.png drin.

Ladet sie herunter und ladet sie wieder hoch auf euren FTP.

Download File

Buttons in Website einbinden

Wir sind leider noch nicht fertig. Nachdem wir die Vorarbeit erledigt haben, müssen wir nun noch dafür sorgen, dass bei Aufruf eines Artikels in unserem Weblog irgendwo dort auch unsere Buttons erscheinen. Dazu ist folgender Befehl notwendig: <txp:output_form form="social" /> . Der sagt einfach nur aus, "binde Baustein social in diese Datei ein".

Fügt ihn in eure aktuelle Seitenvorlage ein, beim Minimum-Theme ist das minimum_default. Dort habe ich es direkt nach dem Artikel platziert, wie ihr ja hier auch sehen könnt.

Wenn alles geklappt habt, sehr ihr nun die 4 Social Sharing Buttons unter eurem Artikel.

Das wars auch schon wieder, bis bald.

---
Hat ihnen dieser Artikel gefallen? Dann liken Sie uns doch bitte auf Facebook oder folgen Sie uns auf Twitter, wenn sie mögen. Auch können sie gern den RSS-Feed abonnieren. Vielen Dank für ihren Besuch.

Diese Seite enthält einen einzelnen Eintrag von Krafft Prinzmetal vom 15.03.13 21:55 mit 525 Wörtern.