Donnerstag, 14. Februar 2013

BesserBloggen #66

Social Buttons einfügen

Social Buttons sind eine nette Möglichkeit um den Lesern Interaktionen zu ermöglichen. Man kann unter jedem einzelnen Blogpost auf Gefällt mir klicken oder den Post per Facebook oder Twitter weiter empfehlen.


Der einfache Weg
Eigentlich lassen sich diese Buttons ganz einfach einfügen. Man geht einfach unter Layout und wählt das Blogpost-Feld an. Dort setzt man den Haken bei "Freigabeschaltflächen anzeigen" und kann die Buttons nun unter "Elemente anordnen" platzieren:


Bei mir gab es da leider Probleme mit dem Template. Ich weiß nicht genau wieso. Auf jeden Fall wurden die Buttons nicht angezeigt. 

Angeregt durch das Buch "Blog Boosting" und den netten Kommentar von Michael Firnkes, wollte ich sie aber unbedingt haben und habe mich daher auf die Suche nach einer Lösung begeben. Da es alles Andere als einfach war und ich mir vorstellen könnte, dass nicht nur ich diese Probleme habe, schreibe ich euch hier einfach mal meinen Lösungs weg auf. 

Der schwierige Weg
Ich habe dafür die Anleitungen von hier und hier kombiniert.

1. Zuerst habe ich das Häckchen im Layout für die Buttons gesetzt. Das scheint aber gar nicht nötig zu sein, daher könnt ihr diese Einstellung einfach so belassen, wie sie gerade ist.

2. Dann geht man unter Vorlage auf "HTML bearbeiten" und setzt sein Häkchen bei "Widget-Vorlagen komplett anzeigen". Dann bekommt man den komplette Quellcode angezeigt. 

3. Nun benötigt man den Code-Teil, den ihr euch hier kopieren könnt. Falls bei diesem Code zwei Pinterest-Buttons angezeigt werden, nehtm statt dessen den Code von hier.

4. Diesen kopiert ihr und fügt ihn nun an der gewünschten Stelle in den Quellcode ein. Dabei kommt es darauf an, wo die Buttons erscheinen sollen.
  • Sollen die Buttons über dem Post (unter dem Titel) erscheinen, fügt ihr den Code direkt über der Zeile <div class='post-header'> ein.
  • Sollen die Buttons direkt unter dem Post erscheinen, fügt ihr den Code direkt unter der Zeile       <data:post .body=""></data:post> ein.
  • Sollen die Buttons unter den passenden Artikeln vom installierten LinkWithin stehen, fügt ihr den Code ditekt über der Zeile <b:if cond="data:post.hasJumpLink"></b:if> ein.
  • Sollen die Buttons ganz am Ende des Posts stehen, fügt ihr den Code direkt über der Zeile<!-- quickedit pencil --> ein.
5. Am Besten nutzt ihr den Vorschau-Button um zu testen, ob die Buttons richtig positioniert sind. Wenn alles passt, klickt ihr auf "Vorlage speichern" und habt es damit geschafft. Glückwunsch ;-)


Ich hoffe, die Anleitung hat euch weitergeholfen. Es ist nicht ganz einfach, das gebe ich zu. Aber wenn die Buttons erst mal da sind, hat man damit ja auch erst mal keine Arbeit mehr.

Viele Grüße,
Stefanie

1 Kommentar:

  1. Hallo,
    ich halte solche Social Media Buttons auch für wichtig und setze diese auch bei mir im Blog ein. Ich verwende für diese Funktion ein Social Media Plugin und bin damit recht zufrieden. Die Buttons werden auch offensichtlich genutzt. Und ich finde es klasse, dass du in diesem Bereich auch etwas hast.

    AntwortenLöschen

Vielen Dank für deinen Kommentar! Ich freu mich sehr über die lieben Worte!

Viele Grüße,
Stefanie

Meine Blog-Liste

Related Posts Plugin for WordPress, Blogger...