PehBehBeh

Erfahrungen eines Hobby-Webentwicklers

WordPress: Facebook-Share-Box und „Tweet this!“-Button inkl. eigenem Shortlink

| 6 Kommentare

Seit gestern habe ich eine „Facebook Share Box“ und einen „Tweet this! Button“ unter meinen Artikeln. Heute möchte ich euch näherbringen, wie ihr diese ganz leicht ohne Plugin in euer Theme einbauen könnt und zudem noch euren eigenen Shortlink generiert.


Eigene Shortlinks

Um bei Twitter und Co. auf unseren eigenen Blog verlinken zu können, gibt es seit WordPress 2.9 die Funktion einen eigenen Shortlink generieren zu lassen. Jedoch nur wenn ihr das WordPress.com Stats Plugin nutzt. Innerhalb des Loops könnt ihr diesen dann einfach über folgenden Code ausgeben:

echo get_shortlink($post);

Im WordPress-Backend lässt sich der Shortlink eines Artikels ebenfalls abfragen, wie folgender Screenshot verdeutlicht:

Shortlink im WordPress-Backend abfragen

Die Facebook-Share-Box

Die Facebook-Share-Box kann man individuell auf Facebook erstellen (Link). Ich habe mich für eine Schaltfläche mit Zähler oben drüber entschieden. Der einzubindende Code sieht wie folgt aus:

<a type="box_count" name="fb_share" href="http://www.facebook.com/sharer.php">Teilen</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Dieser Code würde an sich einwandfrei funktionieren. Möchten wir jetzt jedoch zum Beispiel mit unserem Shortlink auf den Artikel verlinken und evtl. noch einen veränderten Titel angeben, stehen uns zwei Parameter zur Verfügung:

  • u – URL die verlinkt werden soll
  • t – Titel des Inhalts

Diese sind an die URL des Links anzuhängen. Mit WordPress Template-Tags sähe unser Code nun also wie folgt aus:

<a type="box_count" name="fb_share" href="http://www.facebook.com/sharer.php?u=<?php echo get_shortlink($post) ?>&t=<?php the_title(); ?>">Teilen</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Der „Tweet this!“-Button

Unser „Tweet this!“-Button besteht nur aus einem Bild, dass auf Twitter verlinkt und über einen Parameter die Nachrichten-Box des Benutzers mit unserem Inhalt füllt. Ich habe mich hier für den Titel des Artikels, den Shortlink zum Artikel und ein @reply an mich entschieden.

Der Code dafür sieht so aus:

<a href="http://twitter.com/home?status=<?php the_title(); ?> - <?php echo get_shortlink($post); ?> @pehbehbeh">
<img alt="Tweet this!" src="http://pehbehbehde.appspot.com/img/tweet-this.gif" />
</a>

Das war’s! Viel Spaß damit. 🙂

Dir hat der Artikel gefallen?
Dann abonniere doch den RSS-Feed!
  • Hallo Phil,

    ich kenne mich leider mit dem Programmieren nicht so aus und finde leider nirgendwo einen guten Tipp, wo ich dann diesen Code hinpacke. Wahrscheinlich ja in eine Datei von meinem Theme, oder?
    Aber welche? Und wo dort genau?
    Wäre toll, wenn du mir helfen kannst…

    LG
    direkteingabe

  • Also bei mir steht es in der single.php-Datei meines Themes. Die ist dafür zuständig einzelne Artikel darzustellen.

    Wir wollen diese Buttons ja unter jedem Artikel anzeigen – also irgendwo nach the_content(); (sorgt für die Ausgabe des Artikels).

    Wenn du magst, kannst du mir deine single.php per E-Mail schicken. Ich bastel dir das dann schnell da rein.

  • Hallo pehbehbeh,

    danke für deine schnelle Antwort 🙂 – leider habe ich bei meinem Theme diese php-Datei nicht. 🙁
    Ich benutze dieses Theme: http://wordpress.org/extend/themes/atahualpa

    Kannst du mir da noch einen Tipp geben…?

    Danke und Grüße…

  • Wow, habe selten ein komplizierteres Theme gesehen. Habe mich aber ein bisschen durchgewühlt. 😉

    So wie es aussieht, hat das Theme keine eigene single.php und es wird dafür die index.php benutzt. Um jetzt deine Seite für die Artikel anzupassen kopiere einfach die index.php und benenne sie single.php um.

    Danach kannst du die single.php nach deinen Wünschen anpassen. WordPress merkt automatisch, dass eine single.php vorhanden ist. Die Datei wird also ganz automatisch für die Artikel-Ansicht benutzt.

    Ich würde den Code also direkt unter folgender Zeile einfügen:

    bfa_center_content($bfa_ata['content_inside_loop']);

    Bei mir ist das Zeile 20 – wenn du bisher nichts am Theme verändert hast, sollte es auch bei dir Zeile 20 sein. Außerdem hat der Code nichts außerhalb des Loops (nach Zeile 23) zu suchen.

    Ich hoffe, dass ich dir weiterhelfen konnte. Ich stehe aber auch gerne für weitere Fragen bereit… 😉

  • Markus

    Hallo PehPehBeh,

    auch ich bin Novize…ich bekomme leider die Buttons nicht her…dürfte ich dich um Hilfe bitten? Wo darf ich denn meine Single.php hinmailen?

    Danke vielmals im Voraus!

    Ciao,
    Markus

  • Also normalerweise findet man Kontaktmöglichkeiten im Impressum oder sogar auf der extra dafür eingerichteten Seite, die sich „Kontakt“ nennt… ich bin jedoch niemand, der einfach die Arbeit Anderer für lau erledigt. Wo genau liegt dein Problem? Was hast du bereits versucht? Hast du überhaupt etwas versucht?