Creating Social Media Sharing on Your Blog Without a Plugin

While there are many plugins that offer various ways to enable social media sharing on your Wordpress blog, many people prefer a completely custom option. In this tutorial, I will quickly take you through the steps of creating your own links with images and autofilling forms (such as a Twitter status message).

This tutorial applies to all Wordpress themes, but I’ve placed special alert boxes for directions specific to the Thesis Theme.

Step 1: Find (or Create) and Upload Icons

If you’re a graphics designer, you can create your own images/icons to match your blog, but there are also thousands of free options as well. Here’s a good place to start if you’re looking.

Once you’ve settled on an image set, upload them to your server in the size you prefer. I suggest nothing larger than 64×64, which is the size I use. For simplicity’s sake, make sure you name them something easy to remember (e.g. twitter.png, delicious.png).

Thesis Theme Users: Upload the images to your custom folder!

Step 2: Displaying the Icons

If you are NOT using the Thesis theme, you’ll now need to edit your theme’s core files. If you’re not sure how to do this, be sure to backup your files first! As every theme is different and every user may want to display the icons in a different place, I will only go into brief detail for this step. You’ll probably want to edit single.php to accomplish this.

Insert this code:

<div class="social_icons">
<a href=""><img src="IMAGE LOCATION" width="XX" height="XX" /></a>
</div>

For now, leave the link tag <a> as is, we’ll populate that in a minute. Insert the image location link and size in the specified location for your first icon (you choose what is first: RSS, Twitter, etc). Duplicate the link and image code (everything between the div tags) for every icon you’d like to display.

Unsolicited Advice: Some bloggers link to every social media source known to humanity, but I suggest minimizing that to the top 8-10 at MOST.

Thesis Theme Users: You can bypass the single.php editing by inserting the above code into your preferred location using the Thesis OpenHook plugin (novice) or by editing custom_functions.php (advanced).

Step 3: Styling the Icons Using CSS

As you can see, the images are probably stacked vertically. This is probably NOT what you had in mind! To fix this, we’re gonna edit style.css (non-Thesis users). Simply insert the following code:

div.social_icons img {padding: 2px;}

Of course, you can edit the padding pixels and add additional styling to fit your preferences.

Thesis Theme Users: Insert the above code into custom.css.

Step 4: Link it Up!

Since we’ve got it looking right, now we need to make it actually work! In Step 2, we inserted some link <a> code, but left it blank. Now we’ll fix that!

Every social media site has it’s own requirements and properties that we’ll have to follow. Below, you’ll find a list of the proper links for many of the most popular sites. If you’d like to know how to setup any additional sites, please ask in the comments (or if you DO know any additional sites, please add them in the comments).

TWITTER: ∞

<a title="Tweet About It!" href="http://twitter.com/home?status=<?php the_title(); ?> <?php the_permalink(); ?>" target="_blank"> </a>

DELICIOUS:

<a href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us"> </a>

STUMBLEUPON:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Stumble It!" target="_blank"> </a>

DIGG:

<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Submit to Digg" target="_blank"> </a>

FACEBOOK:

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" rel="nofollow" title="Share on Facebook" target="_blank"> </a>

GOOGLE BOOKMARKS:

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink(); ?>" rel="nofollow" title="Bookmark on Google" target="_blank"> </a>

REDDIT:

<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>" rel="nofollow" title="Submit to Reddit" target="_blank"> </a>

Tip: Automatically shorten urls before posting.