How to make custom social networking buttons in Wordpress

Finally got spare time to work on the blog. The first addition is the new social networking buttons below each post. I had seen these buttons on many blogs and decided to make my own. The reason for not using wordpress plugins is becuase they start giving problems later on with many 404 errors. Hope the new buttons look good and here is the code if anyone wants to make them for their own blogs.

These custom social networking buttons require you to edit your wordpress theme files. Its not complicated, just follow the steps and you will be fine.

First we need to edit the single.php file in your wordpress theme.

To do this login to Wordpress, go to Design > Theme Editor > choose Single Post (single.php)

Paste the following code in the required position. You can test where to place it by typing something, saving it and checking where the typed message appears on the page

---

<!– START SOCIAL NETWORKING code –>

<strong>Discover and Share</strong>

<div class=”share”>

<a href=”http://www.stumbleupon.com/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>” target=”_blank”><img src=”/images/sharing/stumbleupon.png” alt=”StumbleUpon” /></a>

<a href=”http://digg.com/submit?phase=2&url=<?php echo get_permalink() ?>” target=”_blank”><img src=”/images/sharing/digg.png” alt=”Digg” /></a>

<a href=”http://del.icio.us/submit?url=<?php echo get_permalink() ?>&title=<?php the_title(); ?>” target=”_blank”><img src=”/images/sharing/delicious.png” alt=”del.icio.us” /></a>

<a href=”http://www.technorati.com/faves?add=<?php echo get_permalink() ?>” target=”_blank”><img src=”/images/sharing/technorati.png” alt=”Technorati” /></a>

<a href=”http://www.reddit.com/submit?url=<?php echo get_permalink() ?>&t=<?php the_title(); ?>” target=”_blank”><img src=”/images/sharing/reddit.png” alt=”Reddit” /></a>

<a href=”http://feeds.feedburner.com/techieportal” target=”_blank”><img src=”/images/sharing/feed.png” alt=”RSS Feed” /></a>

</div>

<!– END SOCIAL NETWORKING code –>

---

Please note that the code is for the social networking sites i have used on this site, you may add more as you wish. You will also need to change the URL for the RSS feed. Get the images you need to use for the buttons and upload them to your site. Change the url in the code above to reflect to your images.

Now to add some effects to the social networking buttons we can add some CSS style

Once again go to Design > Theme Editor > choose StyleSheet (style.css)

Add the following code

---

div.share a img {

padding: 5px;

}

div.share a:hover img {

background: #eeeeee;

border: solid 1px #cccccc;

padding: 4px;

}

---

Note that in the first code the div class was “share”. In the style.css we are adding the style for that class.

If you need any help, feel free to ask in the comments with a valid email and I will reply.

PS :- I am bad at CSS, just try to understand the code with common sense.