Altered Advice

Add Social Networking Icons WordPress

Wednesday, November 5th, 2008 | Wordpress CMS

Adding social networking icons into a WordPress theme looks like it would be simple but there are some more advanced parts of it.

I searched for tutorials but didn’t find too many that talked about how to make your own icons and links.

Step 1

Add this code into the end of your “style.css” file in your theme directory:

div.share a img {

padding: 5px;

}

div.share a:hover img {

background: #eeeeee;

border: solid 1px #cccccc;

padding: 4px;

}

NOTE: You have to paste this code into notepad because WordPress changes the ” into slanted ones.

Step 2

Open the “single.php” file in your theme directory and add this code:

<! START SOCIAL NETWORKING code >

<strong>Discover and Share</strong>

<p></p>

<div class=”share”>

<a href=”http://yourdomain.com/feed/” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/feed.png” width=”55″ height=”57″ alt=”Feed” /> </a>

<a href=”http://www.reddit.com/submit?url=<?php echo get_permalink() ?>&t=<?php the_title(); ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/reddit.png” width=”55″ height=”57″ alt=”Reddit” /> </a>

<a href=”http://www.technorati.com/faves?add=<?php echo get_permalink() ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/technorati.png” width=”55″ height=”57″ alt=”Technorati” /> </a>

<a href=”http://digg.com/submit?phase=2&url=<?php echo get_permalink() ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/digg.png” width=”55″ height=”57″ alt=”Digg” /> </a>

<a href=”http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/stumbleupon.png” width=”55″ height=”57″ alt=”Stumbleupon” /> </a>

<a href=”http://del.icio.us/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/delicious.png” width=”55″ height=”57″ alt=”del.icio.us” /> </a>

<a href=”http://yourdomain.com/submit.php?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>” title=”" target=”_blank”><img src=”http://yourdomain.com/wp-content/themes/themename/img/sharing/designfloat.png” width=”55″ height=”57″ alt=”Design Float” /> </a>

</div>

<! END SOCIAL NETWORKING code >

NOTE: you have to change the “http://yourdomain.com” and “themename” to reflect your website and theme folder name.

Step 3

Upload your icons

Upload to: http://yourdomain.com/wp-content/themes/themename/img/sharing/

Here are the icons I use:

Right click and ( Save Image As… )

9 Comments

Leave a comment