Add Social Networking Icons WordPress

Posted on by John MacMenamin

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… )



About John MacMenamin

John MacMenamin is the driving force behind alteredadvice.com a WP Development Magazine. If you'd like to keep in touch you can follow Altered on twitter or become a friend on facebook.
View all posts by John MacMenamin → This entry was posted in Tutorials and tagged , , , . Bookmark the permalink.


  • http://www.danhbaweb20.com/?p=51 Danh ba web 2.0

    Great tutorial. I like it
    Thanks you very much, keep it up !

  • Pingback: Links for 2008-11-07 [del.icio.us] | Blog do Camillo - O dia-a-dia de um Desenvolvedor Web

  • Pingback: Top WordPress SEO Tips | Graphics Design Community

  • http://futurebells.com Ali: Future of Blogging

    O Thats looks really simple and Easy, I’ll Try

  • http://www.travelrabble.co.uk Chris

    Great tutorial, thanks for sharing. I’ve been meaning to do this myself. Nice blog, by the way!!

  • Pingback: Social Media & Wordpress » Anidan Design

  • http://www.steelydad.com Steely Dad

    I’ve tried everything and it’s not working. HELP!!!

  • Pingback: Search Engine Optimization Survival Guide | Altered Advice

  • Pingback: Top SEO Tips For WordPress | Altered Advice

  • http://www.camnio.com Camnio Media

    thanks for the tips on the social bookmarks.

  • http://www.nagel-stylist.nl ROy

    Icons are where?
    .-= ROy´s last blog ..Zelf uw nagelstudio link toevoegen =-.

  • http://alteredstudio.com John MacMenamin

    I need to update this post and add the Icons. Right now I’m using “Sexy Bookmarks” and it’s great.

  • Pingback: Social Media & Wordpress | affiliate

  • http://www.internetgeeks.org Azad Shaikh @ Internet Geeks

    i thought icons are also provided. I am using DIGG DIGG at my blog and it great too.
    .-= Azad Shaikh @ Internet Geeks´s last blog ..The Dreams Of Three Animals =-.

  • http://betonufc.info bet on mma

    Your blog is very interesting. May i write article for you, could you publish it here ? Please mail me

  • http://www.whitneysegura.com/ Whitney Segura

    These are some really great social networking icons, I was in need of these very badly. Very easy to follow tutorial, I appreciate the heads up, as always.

  • http://www.webmini.bluza.waw.pl/e/Turnieje,22567 Clarissa Beuttel

    bless Google that I found you :)

  • http://www.techfeb.com Sandeep Yadav

    I will try your coding on my website sidebar i hope it will work for me. Thanks for this code.

  • http://www.youngpreneurblog.com adeolu.akintimehin

    Thanks for the code, i have tried every possible means to loadup the code but just couln’t get it can please help out more?




SEO Powered By SEOPressor