Statische Social Media-Buttons nun auch im Theme “Seashell” eingebaut

In meinem neuen Theme wollte ich die statischen Social Media-Buttons auch wieder einbauen. Zwischenzeitlich hatte ich sie ein paar Mal modifiziert, mal mit mal ohne Popuplösung. Das Theme “Seashell” ist schon ein ganz anderes Kaliber, als mein altes “Smoky”. Bei diesem wusste ich sofort, wo ich ansetzen musste.
Also wohin nun mit dem Code, um die Buttons unter den Beiträgen anzeigen zu lassen? Erster Gedanke war die Datei content.php. Aber jegliche Versuche, die Social Media-Buttons dort einzufügen, schlugen fehl.

Einfügen im Template

Letztendlich funktionierte die Darstellung nach Einfügen in die Datei loop.php unter dem Themeverzeichnis “sections”. Ich habe diese Datei nach der Zeile <?php if(is_single()): ?> um die Social Media-Codes ergänzt und im Childtheme-Verzeichnis abgespeichert. Weil ich gerade dabei war, habe ich der loop.php noch manuell die Funktion zur Anzeige der ähnlichen Beiträge hinzugefügt:

<?php if ( have_posts() ) :  while ( have_posts() ) : the_post(); ?>
	<?php get_template_part( 'sections/content', get_post_format() ); ?>	

	<?php if(is_single()): ?>
	
	<div id="recommend">Weiterempfehlen</div>
<div class="twitbut">
<a title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())).'&amp;via=Sylsurium' ?> <?php echo wp_get_shortlink(); ?>&amp;hashtags='<?php $posttags = get_the_tags();$count=0;if ($posttags) {foreach($posttags as $tag) {$count++;if ($count <= 3) {echo $tag->name . ',';}}}?>" target="blank" rel="nofollow">
<img src="<?php bloginfo('template_url')?>/eigene-buttons/twitter_28.png" alt="Twittern" width="34" height="28" style="float:left;margin:5px 5px 0px 6px;border:none;" />
<?php $URL = get_permalink();
function get_retweets($URL) {
$SBstring = file_get_contents('http://urls.api.twitter.com/1/urls/count.json?url=' . $URL);
$SBarray = json_decode($SBstring, true);
return intval( $SBarray['count'] );
} ?>
<object class="twitzahl"><?php echo get_retweets($URL);?></object></a>
</div>
<div class="facebut">
<a title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><img src="<?php bloginfo('template_url')?>/eigene-buttons/facebook_28.png" alt="Teilen" width="28" height="26" style="float:left;margin:5px 5px 0px 6px;border:none;" />
<object class="facebutzahl"><?php echo getFBCount(get_the_ID(), 'total', 1); ?></object></a>
</div>
<div class="gplus">
<a title="Bei Google+ empfehlen" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo $Titel; ?>" target="blank" rel="nofollow"><img src="<?php bloginfo('template_url')?>/eigene-buttons/googleplus_28.png" alt="Google +1" width="32" height="28" style="float:left;margin:7px 5px 0 6px;border:none;" />
<?php $URL = get_permalink();
function get_plusone($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, "https://clients6.google.com/rpc");
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, '[{"method":"pos.plusones.get","id":"p","params":{"nolog":true,"id":"' . $url . '","source":"widget","userId":"@viewer","groupId":"@self"},"jsonrpc":"2.0","key":"p","apiVersion":"v1"}]');
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-type: application/json'));
$curl_results = curl_exec ($curl);
curl_close ($curl);
$json = json_decode($curl_results, true);
return intval( $json[0]['result']['metadata']['globalCounts']['count'] );
} ?>
<object class="gpluszahl"><?php echo get_plusone($URL); ?></object></a>
</div>
<div class="tumblrbut">
<a title="Bei Tumblr empfehlen" href="http://www.tumblr.com/share/link?url=<?php echo urlencode(get_permalink()) ?>&amp;name=<?php echo urlencode(strip_tags(get_the_title())) ?>&amp;description=<?php echo urlencode(wp_get_attachment_image($first_attachment->ID)); ?><?php echo urlencode(strip_tags(get_the_excerpt())) ?>" target="blank" rel="nofollow">
<img src="<?php bloginfo('template_url')?>/eigene-buttons/tumblr_text.png" alt="Tumblr" width="100" height="40" style="float:left;margin:2px 0 0 0;border:none;" /></a>
</div>
<br style="clear:both;" />
<div class="rpbc_title">&Auml;hnliche Beitr&auml;ge</div>	<br/>
<ul class="rpbc"><?php do_action('related_posts'); ?></ul>
	<?php wp_link_pages(); ?>
	   <?php if(shl_get_option('show_prev_next')): ?>
			<?php get_template_part('sections/prev-next'); ?>
		 <?php endif;?>
		 <?php if(shl_get_option('show_author_box')): ?>
			<?php get_template_part('sections/author-box'); ?>
		 <?php endif;?>
		<?php comments_template(); ?>
	<?php endif;?>
	
<?php endwhile; ?>
	
<?php else: ?>

	<?php get_template_part( 'sections/content', 'none' ); ?>

<?php endif; // end have_posts() check ?>

Anpassen müsst ihr noch die Namen eurer Imagedateien und die Pfade zu dem Grafikverzeichnis.

Edit 13.11.2014

Außerdem müsst ihr “Sylsurium” durch euren eigenen Twitternamen ersetzen.

Sonderfall Facebook

Die Extra-Funktion für den Facebook-Button habe ich beibehalten. Gespeichert ist diese bei mir – wie viele Zusatzfunktionen – als Modul in dem Plugin Toolbox. Der Vollständigkeit halber zeige ich, wie dieser bei mir aussieht:

<?php
/*
Module Name: Facebook-Teilen-Button
Description: Anzeige des Facebook-Teilen-Button unter Beiträgen [Frontend]
Author: Sergej Müller
Author URI: 
*/


/* Sicherheitsabfrage */
if ( !class_exists('Toolbox') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
	exit();
}


/* Ab hier kann's los gehen */

function getFBCount($postid, $counter = 'share', $cachetime = 24) {
// check if $postid and $cachetime is int
if (!is_int($postid) || !is_int($cachetime) || $cachetime < 1) {
return 'values are not numeric';
}

// get permalink with postid
$link = get_permalink($postid);

// create post_meta name
$countername = sprintf("_fbcount%s", $counter);

// get cached data, if available
$cacheddata = get_post_meta($postid, $countername, true);

// if no cached data available or data is older than 24 hours, refresh/get data from Facebook
if(!empty($cacheddata) && $cacheddata['timestamp'] + (60 * 60 * $cachetime) > time() ) {
$count = $cacheddata['count'];
} else {
$url = sprintf("http://api.facebook.com/restserver.php?method=links.getStats&urls=%s", $link);
$request = new WP_Http;
$result = $request->request($url);

$xml = simplexml_load_string($result['body']);

switch($counter) {
case 'share':
$count = (int)$xml->link_stat->share_count;
break;
case 'like':
$count = (int)$xml->link_stat->like_count;
break;
case 'comment':
$count = (int)$xml->link_stat->comment_count;
break;
case 'total':
$count = (int)$xml->link_stat->total_count;
break;
case 'click':
$count = (int)$xml->link_stat->click_count;
break;
default:
return 'not existing counter specified';
break;
}

if($count !== '' && is_int($count)) {
$metadata = array();
$metadata['timestamp'] = time();
$metadata['count'] = $count;
update_post_meta($postid, $countername, $metadata);
}
}

return $count;
}

Optische Darstellung per CSS

Der ehemalige CSS-Code war schon ziemlich aufgebläht, was einerseits daran lag, dass ich einen plastischen Effekt erzielen wollte. Andererseits habe ich mir zugegebenermaßen keine große Mühe gemacht, die CSS-Attribute zusammenfassend zu definieren. ;-)

Jetzt habe ich mich von dem 3D-Effekt getrennt und ein Flatdesign gewählt. Die verschlankten CSS-Werte sehen nun so aus:

.twitbut, .gplus, .facebut, .tumblrbut {-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;width:100px;height:40px;float:left;margin:10px}
.twitbut{background-color:#4197ee}
.gplus{background-color:#c62d1f}
.facebut{background-color:#415e8a}
.tumblrbut{background-color:#2B4659}
.twitbut:hover,.gplus:hover,.facebut:hover,.facebut:hover,.tumblrbut:hover{opacity:0.60;-ms-filter:"alpha(opacity=20)";filter:alpha(opacity=60)}
.twitbut:active,.gplus:active,.gplus:active,.facebut:active,.tumblrbut:active{position:relative;top:1px}
.twitzahl,.gpluszahl,.facebutzahl,.tumblrzahl{display:inline-block;color:#ffffff;font-size:1.125em;padding:8px 0 0 25px;text-decoration:none}
.twitbut img,.gplus img,.facebut img,.tumblrbut img{display:block}

Da ich das Child-Theme von “Seashell” verwende, habe ich darin ebenfalls ein Verzeichnis namens “sections” angelegt und die geänderte loop.php hineinkopiert.

Ich finde, mobil sind sie auch recht ansehnlich. :-)