Schon lange Zeit bietet der Blog unseren Besuchern – also euch – an dass ihr Posts also Artikel auf Facebook und Twitter weiterverteilt. Da es jedoch schon seit geraumer Zeit eine Lösung von beiden Seiten gibt um diese auf den eigenen Blog zu implementieren habe ich dies nun auch gemacht.

Der Twitter Tweet Button und der Facebook Like Button wurden aus Performancegründen auf verschiedene Arten eingebaut.

Twitter Tweet Button

Der Code für den Button lässt sich dank der Tweet Button Seite von Twitter sehr einfach konfigurieren. So hat man alle Möglichkeiten kompakt und einfach auf einer Seite zusammengefasst und kann seinen Button so machen wie man ihn haben will.

Einstellungsmöglichkeiten:

• Buttonart – mit/ohne Counter
• Tweet Text  - welcher Text getwittert werden soll
• URL – welche URL getwittert werden soll
• Sprache – welche Sprache der Button beherrschen soll
• Usernameintegration – fügt ein via @username hinter den Tweet

Darunter ist auch schon der Code welchen man anschließend integrieren kann.

Facebook Button

Auch Facebook bietet so eine Button Page an. Auch hier wieder ein paar Einstellungen und anschließend – nein nicht gleich kommt der Code man muss erst auf “Get Code” klicken. Bravo Facebook, sehr useable.

Einstellungsmöglichkeiten:

• URL to Like – Stamm-URL eintragen den Rest macht WordPress möglich
• Layout Style  - mit Text oder nur ein Counter
• Show Faces – Gesichter anzeigen oder nicht
• Width – Breite des Widgets
• Verb to Display – den Post empfehlen oder “liken”
• Font – Schriftart
• Color Scheme – light oder dark (grauer Hintergrund)

Anschließend auf Get Code klicken und ihr bekommt ein PopUp angezeigt. Hier wird bekommt ihr die Möglichkeit des Hinzufügens mittels iframe oder mittels Javascript.

Normalerweise ziehe ich die Javascript-Variante vor leider ist diese sehr träge bei Facebook und hindert so an einem ordentlichem Umgang mit der Seite, daher habe ich mich für die iframe-Variante entschieden.

Platzierung im Code

Ich wollte dass die Buttons sowohl auf der Hauptseite als auch auf jeder einzelnen Seite sichtbar sind. Dies ist wie folgt möglich.

Unter /wp-content/themes/name_vom_theme/ findet ihr die Datei single.php . Diese ist für den einzelen Post verantwortlich hier habe ich umrandet von einem

<div class=”twitter_facebook></div>

die beiden Codes welche ich vorher generiert habe eingefügt.

Wichtig bei dem Facebook Code fehlt noch die richtige URL zum Beitrag. Daher müsst ihr nach der URL folgenden Code einfügen

<?php echo get_permalink(); ?>

Der ganze Link lautet im Fall von meinem Blog

http%3A%2F%2Fblog.technical-life.at%2F<?php echo get_permalink(); ?>

Damit wird auch immer zum richtigen Beitrag verlinkt.

Plaziert habe ich dies immer am Footer des Artikels was im Code immer nach dem “Weiterlesen Code” ist.

Damit dies auch auf der Hauptseite sichtbar ist müsst ihr dieses div auch noch in die index.php einfügen.

Grafisch veränderbar dank einer Klasse

Da sowohl das ganze div als auch der Twitter Button eine Klasse besitzen kann man diese mittels CSS sehr einfach und schön in die Seite integrieren.

Beispiel:

.facebook_twitter {

padding: 10px;

text-align: center;

}

.twitter-share-button {

padding-right: 50px;

}