Social Media Icons – Do it yourself

Love to codeAre 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: http://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(‘http://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

<div class=”weiterempfehlen”>

<ul>

<li><a href=”http://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>

<li class=”gp-einzeln”><a href=”https://plusone.google.com/_/+1/confirm?hl=de&url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>” target=”blank” title=”Bei Google+ empfehlen”><span>Google+</span></a></li>

<li class=”del-einzeln”><a href=”http://del.icio.us/post?url=<?php echo urlencode(get_permalink($post->ID)); ?>&title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>” target=”blank” title=”Bei Delicious empfehlen”><span>Delicious</span></a></li>

</ul>

<div class=”clearer”></div>

</div>

John Overall
John Overall is the host of the WordPress Plugins A-Z Podcast and provides Emergency WordPress Support to users from all over the world.
John Overall

@Ahkonsu

Making lemonade as fast as I can right now.
The WordPress Rockstars Daily is out! http://t.co/7qu1f54iaB Stories via @LisaSabinWilson - 57 mins ago
John Overall
John Overall
John Overall

Latest posts by John Overall (see all)