January 30, 2012

Social Media Icons – Do it yourself

Are you looking for a way to add the social media icons without a plugin? Well here is a solution for you.
This code come from the following website and was brought to us by one of our longtime listeners. Who was kind enough to make it in English for us since the original web site is in German.

The URL: https://www.perun.net/2011/12/15/facebook-twitter-google-statische-buttons-im-eigenbau/

css-code

/* Social Media Icons*/

.weiterempfehlen{border-bottom:1px solid #111;border-top:1px solid #111;height: 36px;margin-bottom:19px;}

.weiterempfehlen p{font-weight:bold;margin-bottom:4px !important;}

.weiterempfehlen ul{list-style:none; line-height:24px;margin:5px 0 15px 0;padding-left:0;}

.weiterempfehlen li{display:inline;}

.weiterempfehlen a{float:left;width:24px;height:24px;margin-right:25px;background:url(‘https://www.android-handys.org/wp-content/uploads/2012/01/social-icons.png’) no-repeat;border-bottom:none !important;}

.weiterempfehlen span {display: none;}

.tw-einzeln a{background-position:left -26px;}

.fb-einzeln a{background-position:left -52px;}

.gp-einzeln a{background-position:left -78px;}

.del-einzeln a{background-position:left -104px;}

.weiterempfehlen a:hover{position:relative;top:-1px;}

—

HTML

<ul>

<li><a href=”https://www.xing.com/app/user?op=share;url=<?php echo urlencode(get_permalink($post->ID)); ?>;title=<?php echo rawurlencode(get_the_title()); ?>;provider=<?php echo rawurlencode(get_bloginfo(‘name’)); ?>” target=”blank” title=”Bei XING empfehlen”><span>XING</span></a></li>

<li class=”tw-einzeln”><a href=”https://twitter.com/intent/tweet?source=webclient&text=<?php echo rawurlencode(strip_tags(get_the_title())) ?>%20<?php echo urlencode(get_permalink($post->ID)); ?>” target=”blank” title=”Bei Twitter empfehlen”><span>Twitter</span></a></li>

<li class=”fb-einzeln”><a href=”https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>” target=”blank” title=”Bei Facebook empfehlen”><span>Facebook</span></a></li>