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 social networking code for wordpress,custom social share,social networking sharing code wordpress,social networking code wordpress,wordpress social share code,social networking code,social networking by echo wordpress,social networking by echo code,social network wordpress,social networking sites free download with code,social networks code wordpress,social share custom code,wordpress social network code,wordpress social custom url,wordpress social code,wordpress custom social buttons.

---

Related posts:

1. Flock – social networking browser
2. Google Buzz – Google attempts social networking again
3. Firefox crash while adding image in WordPress – Fix
4. Check multiple social networks for a username availability
5. WordPress Maintenance mode – How to remove disable

---

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 |