This is Part 2 of a series. You should read Part 1 before continuing on to this post.

For the sake of this article, I am going to assume that the reader is at the most basic level and doesn’t use any fancy editing tools like Dreamweaver, or even Notepad.  We are going to do it all in WP.  If you are beyond that level, feel free to adjust accordingly.

In order to make this work, you are going to use some simple WordPress functions.  These functions happen within what is known in WordPress as “The Loop.” The Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags.

The Loop begins with the following code:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

and ends with:

<?php endif; ?>

-OR-

<?php endwhile; else: ?>

For more information on The Loop, see the WordPress Codex. It’s a good idea to get familiar with at least the basics of WordPress, even if you are not “a programmer.”  There is a lot of good information in the Codex that is easy to understand, even for a beginner.

In order to get the link and title of a given post, we need to get that information while inside the Loop. We will be using two functions: the_title is used to get the title of the post, while the_permalink gets the location to use for the URL. These are php functions and must be called like this:

<?php the_title(); ?>

(On occasion, you might also use the_excerpt to provide an excerpt of the post.  Although for most of the social link submissions, this is an optional field.)

Now that you know about the loop, the_title, and the_url, you are ready to add your social media links to your WP theme.

The easiest way to add this to your theme is through the WP admin.  You can edit your theme files under Appearance > Editor.  (Make sure you have a back up of your theme files in case you make a mistake or need to roll back for some reason.)  Depending on your needs, you may need to edit the following templates:

• Main Index Template (index.php)
• Page Template (page.php)
• Single Post (single.php)

Your theme may or may not have all of these.  Some use just index.php.  But the essentials are the same.

Let’s start with an easy example, delicious. The format for saving to delicious via a link is http://delicious.com/post?url= the post’s url &title= the post’s title.  Using the functions we discussed so that WP can put this information in automagically, it would be done as follows:

<a href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">delicious</a>

You can add this to your theme file where you would like your social media links to appear.  Most of the time this is going to be after the post content but before the comments.

Adding other links is just a matter of knowing the format of how that particular service needs to get its submissions.  Here are some examples for the more popular choices:

Digg:

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;bodytext=<?php the_excerpt(); ?>">digg</a>

Facebook:

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>">facebook</a>

Technorati:

<a href="http://technorati.com/faves?add=<?php the_permalink(); ?>">technorati</a>

Sphinn:

<a href="http://sphinn.com/index.php?c=post&amp;m=submit&amp;link=<?php the_permalink(); ?>">sphinn</a>

Mixx:

<a href="http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">mixx</a>

Google Bookmarks:

<a href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;annotation=<?php the_excerpt(); ?>">google bookmarks</a>

LinkedIn:

<a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>&amp;summary=<?php the_excerpt(); ?>">linkedin</a>

MySpace:

<a href="http://www.myspace.com/Modules/PostTo/Pages/?u=<?php the_permalink(); ?>&amp;t=<?php the_title(); ?>">myspace</a>

Newsvine:

<a href="http://www.newsvine.com/_tools/seed&amp;save?u=<?php the_permalink(); ?>&amp;h==<?php the_title(); ?>">newsvine</a>

Reddit:

<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">reddit</a>

Sphereit:

<a href="http://www.sphere.com/search?q=sphereit:<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">sphereit</a>

Stumbleupon:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php the_title(); ?>">stumbleupon</a>

The advantage of a “roll your own” approach is that you are not limited to the social media links that a plug-in developer has decided to include.  If you know the link structure for a  particular submission, you can add any site you want and style it any way that you want.  This gives you a lot of flexibility and you only really need to do the work one time.

In the upcoming Part 3 of this series, we will discuss how to add images to these links and where to find free icons to use.

Here are some other posts on ButlerBlog that deal with The Loop:

• Dispaying on category differently from all others in the WordPress Loop
• Add a Google AdSense link unit to the WordPress Loom
• Add a Digg count to your WordPress posts