Wie oft wurde mein Artikel geteilt – Reloaded

Vor kurzem habe ich Euch in einem QuickTipp gezeigt wie Ihr die Likes, Tweets oder vergebenen +1 auf Google+ einzeln abfragen und anzeigen könnt. Nun stellte sich die Frage wie man die Gesamtanzahl dieser Aktion plus die abgegebenen Kommentare in einer Summe auf WordPress-Basis darstellen kann. Wir haben ein wenig für Euch recherchiert und haben eine sehr feine und schnelle Lösung gefunden! Diese könnte wie folgt aussehen (grün markiert)

Es gibt hierfür eine feine Webseite im World Wide Web namens sharedcount.com (http://sharedcount.com/) mittels dieser man eine solche Abfrage starten kann. Glücklicherweise stellt uns dieser Anbieter auch eine API – Schnittstelle zur Verfügung. Die Lösung für unser “Problem” sieht also wie folgt aus:

<?php
$url = get_permalink( $post_id );
$comsharecount = get_comments_number( $post_id );
$json = wp_remote_retrieve_body( wp_remote_get ("http://api.sharedcount.com/?url=" . rawurlencode($url)));
$counts = json_decode($json, true);
$totalshares= $counts["Twitter"] +
$counts["Facebook"]["total_count"] +
$counts["GooglePlusOne"] + $comsharecount;
echo "<div class='totalshare'><span>$totalshares Reaktionen</span></div>";
?>

Diesen Code könnt Ihr an der Stelle (Loop oder single.php) einbauen wo Ihr ihn haben wollt. Um nun etwas Styling in unsere Ausgabe zu bringen brauchen wir dann noch folgendes für uns CSS – File

.totalshare { background: url(img/DEIN-WUNSCHBILD) no-repeat top left; background-position: left 4px; color: #666668; width: 200px; position: absolute; margin: 200px 0 0 0; padding-bottom: 5px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape/FireFox */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* aktuelle Browser */
-webkit-opacity: 0.5; /* WebKit */
-opera-opacity: 0.5; /* Opera */
}
.totalshare:hover {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
filter: alpha(opacity=100); /* IE 5-7 */
-moz-opacity: 1.0; /* Netscape/FireFox */
-khtml-opacity: 1.0; /* Safari 1.x */
opacity: 1.0; /* aktuelle Browser */
-webkit-opacity: 1.0; /* WebKit */
-opera-opacity: 1.0; /* Opera */
}
.totalshare span { margin: 0 0 0 59px;}

DEIN-WUNSCHBILD (das hier angewendete Bild hat die Maße 55 x 12 Pixel) ersetzt ihr bitte mit dem Namen eures gewünschten Hintergrundbild und natürlich müßt Ihr auch den richtigen Ordner wählen (in unserem Beispiel img/) Um nun auch die Ausgabe richtig zu positionieren müßt Ihr auch noch die Zahl 59 bei .totalshare span ändern! Nehmt ungefähr 5 Pixel mehr als Euer Bild breit ist.

Das war es dann auch schon wieder! Have Fun :)