Custom Social Networking code for 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.

This post is about custom social share wordpress,wordpress social custom,wordpress custom social share buttons,wordpress code social-networking,social networking share code in wordpress,social network code for wordpress,share with social networks code,share and follow wordpress custom code,customized social networks image for blog,wordpress social networking code for free download.

---

Related posts:

1. Flock – social networking browser
2. Check multiple social networks for a username availability
3. Google Buzz – Google attempts social networking again
4. 30 Best WordPress Plugin Collection
5. 40+ smilies in WordPress !!!

---

Discover and Share Take a moment to share this post on social networking sites !

---

---

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically each day to your feed reader. If you don't have a feed reader, you can always have these articles delivered to your email inbox every day. Click here to sign up.

TechiePortal | Disclosure | Sitemap | Design by Nathan Rice |