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

Statische Social Media-Buttons im Flatdesign
Geschätzte Lesezeit: 5 Minuten

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: https://sergejmueller.github.io/
*/


/* 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. smilie

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}

Social Media-Buttons-Anzeige im Smartphone

 

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. smilie

Hinweis
Die in diesem Beitrag dokumentierten Codes habe ich mittlerweile entfernt. Somit existiert die Darstellung bzw. Funktion nicht mehr.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

6 Kommentare

Kommentare hinzufügen
  • Wie immer perfekt umgesetzt und beschrieben.

    Ich bin dafür im Moment zu faul und zeitlich ein wenig eingeschränkt. Daher bleiben die Buttons noch per Plugin eingebunden. Wenn ich mal die Zeit finde, dann weiß ich ja jetzt, wo ich nachschauen kann. smilie

    LG Thomas

  • Ganz schön Aufwendig würde ich meinen.
    Bei mir ist es auch mit Plugin gelöst sieht zwar nicht so schön aus wie bei Dir aber es reicht aus.
    Bei meinem Thema wäre das ja wahrscheinlich eh nicht so umzusetzen wie bei Deinem „Seashell“

    Viele Grüße
    Lothar

  • Find ich toll, dass du das immer so ausführlich beschreibst, danke dafür. Ich hab momentan auch noch Plugins dafür am Start – aber mal sehen, nachdem ich eh viel zu viele immer aktiv hab, guck ich gerne mal bei dir wieder, wie das manuelle Umsetzen geht … Plugins einsparen smilie

  • Hallo Thomas,

    ganz lieben Dank, es ist ja nur eine Option und ich hätte auch vorerst die themeeigenen Buttons verwendet, wenn ich es mit dem manuellen Einbau nicht so fix hinbekommen hätte. „Seashell“ bietet da ja schöne Möglichkeiten. In der mobilen Ansicht hingen sie ja auch anfangs noch schief und krumm unter dem Beitrag. smilie

    Hej Lothar,

    och so aufwändig war es für mich gar nicht mehr, weil ich die Codes ja bereits im alten Theme und auch im Zweitblog eingebaut habe. Lediglich am CSS musste ich noch einmal Hand anlegen. Es ging jetzt nur darum zu schauen, wo sie in „Seashell“ umgesetzt werden.

    So wie ich das verstanden haben ist Erklärung ja nur auf das Theme “Seashell” bezogen.

    Eigentlich kannst Du diese Codes auch in jedem anderen Theme einbauen, Du musst nur wissen, wo.
    In meinem alten Theme war es unter dem Contentbereich in der single.php eingebunden. Daher nahm ich an, dass es hier in der content.php sein müsste. Falsch gedacht. smilie

    Hallöchen Birgit,

    danke schön. smilie Ich finde wichtig, dass die jeweiligen Schritte – und seien sie für manchen Webmaster noch so selbstverständlich – beschrieben werden. Ich weiß ja, wie schwierig es für mich am Anfang meines Joomla- und WordPress-Einstiegs war, Dokumentationen umzusetzen, weil manchmal nicht detailliert beschrieben war, wo etwas wie einzufügen ist.

    Mir gefällt die manuelle Umsetzung des Twitterbuttons deswegen, weil beim Teilen Hashtags aus den Kategorien und Tags generiert werden. Und durch das Einfügen meines Twitternamens @Sylsurium im Code erhalte ich eine Mitteilung, wenn ein Beitrag über diesen Button retweetet wird. Und nicht zu vergessen sind die statischen Buttons datenschutzkonform.

    Lieben Gruß
    Sylvi

    P.S.: Da fällt mir ein, dass ich im Beitrag noch erwähnen muss, dass mein Twittername durch den eigenen ausgetauscht werden muss. smilie

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Du kannst diese HTML-tags und attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

* Ich bin mit den Datenschutzbedingungen von Sylvis Blog einverstanden.

Copyright © Sylvis Blog • 2019. Alle Rechte vorbehalten. •   Impressum   •    Datenschutzerklärung