During the course of developing a custom site layout (to be released in the near future) for XercesTech based on the excellent Thematic framework, I decided to get rid of the WordPress plugin I was using to place social media buttons on each post and implement them myself in the site code.

Why you may ask? For starters I’m learning PHP, so I would rather develop functionality like this on my own. And like many other WordPress developers and users, I dislike using plug-ins unless it can’t be avoided; they sometimes slow down page generation, are difficult to customize, and in the worst case may even break the site or introduce security vulnerabilities. The plug-in I have been using, Sociable, is unlikely to cause serious problems, but for something as simple as social media buttons I would rather just include the code in the site template.

The various plug-ins available to do this cover a much larger range of social media networks and links, but very few sites actually make use of more than a few depending on the audience they are targeting. So below I have included Digg, Reddit, Facebook, Twitter, Stumbleupon, and Delicious. Adding others would be trivial, all that is needed is to obtain the submission URL from the service you are targeting and insert the correct WordPress calls in the right places. Following the existing code below you should be able to figure it out. If this is not for you, or you are uncomfortable editing PHP code on your WordPress site, installing Sociable or another similar plug-in will work fine for you, just be careful when upgrading WordPress as the plug-in may no longer be compatible.

The code included here references specific social media icons, I’ve chosen to use these: http://jwloh.deviantart.com/art/Aquaticus-Social-91014249. You may also find social media icons all over the web, just type “social media icons” in Google and you should get hundreds of sets to choose from. Remember to respect the terms of use the icons are released under, some designers do not wish their work to be used in commercial projects.

To use the icons, just place them in the directory for your theme, under images/icons/ and the code should correctly call them.

If you are using a Thematic child theme:

This will be quite simple, just stick the following code into your functions.php file and view your site, it should insert the social media code just above each post footer both on the main index page, all individual posts, and any other page that has a thematic_postfooter included somewhere. You may want to style the area using the included css attributes but otherwise it should be good to go.


function custom_social_media_links() { ?>
<div id="custom_social_media_links"> 
<div id="social_media_opening_line">Share this post:</div> 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Share this article on Facebook" /></a> 

<a href="http://twitter.com/home?status=<?php the_title(); ?> – <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Share this Article on Twitter" /></a> 

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/stumbleupon.png" alt="Add this Article to Stumbleupon" /></a>

 <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/delicious.png" alt="Add this Article to Del.icio.us" /></a> 

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/digg.png" alt="Add this Article to Digg" /></a> 

<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/reddit.png" alt="Add this Article to Reddit"/></a> 

</div> 
<?php } 

function add_social_media_links_to_postfooter($footer) { 
$social_media_links = custom_social_media_links(); 
$footer = $social_media_links . $footer; 
return $footer; 
} 

add_action('thematic_postfooter','add_social_media_links_to_postfooter'); 

If you are NOT using a Thematic child theme, but a normal wordpress theme:

This is just as simple but requires editing your actual template files rather than just functions.php. Stick the following code into functions.php, making sure that you have an opening and closing php function ( at the end).

If you have worked with PHP before this should be no problem, but again if you are uncomfortable editing site code try using a plugin instead.


function custom_social_media_links() { ?>
<div id="custom_social_media_links"> 
<div id="social_media_opening_line">Share this post:</div> 
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" target="blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/facebook.png" alt="Share this article on Facebook" /></a> 

<a href="http://twitter.com/home?status=<?php the_title(); ?> – <?php the_permalink(); ?>" title="Click to send this page to Twitter!" target="_blank"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/twitter.png" alt="Share this Article on Twitter" /></a> 

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/stumble.png" alt="Add this Article to Stumbleupon" /></a> 

<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/delicious.png" alt="Add this Article to Del.icio.us" /></a> 

<a href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink() ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/digg.png" alt="Add this Article to Digg" /></a> 

<a href="http://reddit.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" rel="nofollow"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/reddit.png" alt="Add this Article to Reddit"/></a> 
</div> 
<?php } 

Now you will need to call the function from somewhere in your template, presumably the Main Index, Single, or Page templates. If you wish the icons to show up just after the end of a post, you will need to find the php function “the_post()” and include our custom function just after it like this:


<div class="postcontent"> 
<?php the_content('Read More'); ?> 
<?php custom_social_media_links(); ?> 
</div>

Some styling may be required to make the icons blend into your WordPress design, and you may choose to place them somewhere other than just after the post content, for instance at this time I have placed them within the post footer itself next to the comments link. In the future they will be integrated into the post header design on this site once our custom theme is finished.

:)