Oct 082009

Social media is all the rage these days, with Facebook being the second most trafficked website in the world currently.  And with MySpace and Twitter both in the top 15 websites as well it is easy to see why tapping into these huge media outlets is important for any content published on the web.

Most news outlets and major blogs have this functionality built in, it would seem fitting that WordPress would have it too, but as I found out it’s really best that it doesn’t.  The reason for this is because when you get packaged functionality it is usually not what you want, which in the case of adding social media buttons is what I found to be the case.

So again I went out and did some searching, looked through plug-ins briefly but couldn’t find anything that fit the bill so I went over to Google.  On Google I found a large number of posts that mentioned how to add social media to your blog posts.  This made me realize that there is not one main way of adding these links to my pages but many.

So I went in and did it myself for the social media outlets I wanted to use.  What you will need to do in order to add social media icons to your blog posts is to first decide which media outlets you want to add and how big of icons you want to use.  Then you need to go out and gather the images to use and the URL submission URLs for each individual social media outlet.

The outlets I choose to add to my blog posts were my blog feed, Google bookmarks, Facebook, Twitter, Stumble Upon, Delicious, Reddit, Linkedin and MySpace.  The code for each of these submission outlets is below this post.  One of the important things to note is the urlencode() method call that will help ensure that the permalink to your post is passed correctly to submission URL.

It’s important to note that you will want to save these images and host them on your own hosting, changing the name domain name from yourdomain.com to whatever your domain name might be.  To modify your WordPress theme you simple go to the Appearance menu item and click on editor.  I put this code in both my Single Post page (single.php) and my index page (index.php) where it loops through my most recent blog posts.

You can put this code anywhere within the have_posts() loop.  So anywhere between the <?php while (have_posts()) and <?php endwhile; ?> tags.  It is important to note that style and theme will affect the look of these icons, so you will want to modify the styles as you see fit.

        <!-- START SOCIAL NETWORKING code --> 
        <div class="share">
            <a rel="nofollow" href="http://yourdomain.com/feed/" title="Blog Feed" target="_blank">
                <img src="http://yourdomain.com/images/feed.gif"
                    width="16" height="16" alt="Feed" title="Michael Merrell Blog Feed" />
            </a><a rel="nofollow" href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>&summary="
                title="Google Bookmarks" target="_blank">
                <img src="http://yourdomain.com/images/google.ico"
                    width="16" height="16" alt="Add to Google Bookmarks" title="Google Bookmarks" />
            </a><a rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>"
                title="Digg This" target="_blank">
                <img src="http://yourdomain.com/images/digg.ico"
                    width="16" height="16" alt="Digg" title="Digg This"  />
            </a><a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php urlencode(the_permalink()) ?>&t=<?php urlencode(the_title()) ?>"
                title="Share on Facebook" target="_blank">
                <img src="http://yourdomain.com/images/facebook.ico"
                    width="16" height="16" alt="Facebook" title="Share on Facebook" />
            </a><a rel="nofollow" href="http://twitter.com/home?status=<?php urlencode(the_permalink()) ?>%20<?php urlencode(the_title()) ?>"
                title="Post to Twitter" target="_blank">
                <img src="http://yourdomain.com/images/twitter.ico"
                    width="16" height="16" alt="Twitter" title="Post to Twitter" />
            </a><a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>"
                title="Stumble Upon" target="_blank">
                <img src="http://yourdomain.com/images/stumble.ico"
                    width="16" height="16" alt="Stumbleupon" title="Stumble Upon" />
            </a><a rel="nofollow" href="http://del.icio.us/post?url=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>"
                title="Submit to Delicious" target="_blank">
                <img src="http://yourdomain.com/images/delicious.ico"
                    width="16" height="16" alt="Delicious" title="Submit to Delicious" />
            </a><a rel="nofollow" href="http://www.reddit.com/submit?url=<?php urlencode(the_permalink()) ?>&t=<?php urlencode(the_title()) ?>"
                title="Reddit" target="_blank">
                <img src="http://yourdomain.com/images/reddit.ico"
                    width="16" height="16" alt="Reddit" title="Reddit" />
            </a><a rel="nofollow" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php urlencode(the_permalink()) ?>&title=<?php urlencode(the_title()) ?>&summary="
                title="Linkedin" target="_blank">
                <img src="http://yourdomain.com/images/linkedin.jpg"
                    width="16" height="16" alt="Linkedin" title="Linkedin" />
            </a><a rel="nofollow" href="http://www.myspace.com/Modules/PostTo/Pages/?u=<?php urlencode(the_permalink()) ?>&t=<?php urlencode(the_title()) ?>&summary="
                title="MySpace" target="_blank">
                <img src="http://yourdomain.com/images/myspace.ico"
                    width="16" height="16" alt="MySpace" title="MySpace" />
        <!-- END SOCIAL NETWORKING code -->

  2 Responses to “Adding Social Media Links to WordPress Blog”

  1. […] posts are viewed. The code was cobbled together from suggestions on two sites (Anidandesign.com and MichaelMerrell.com) along with some reverse engineering of sites I’ve seen online. It’s very simple as you […]

  2. Well done atrlice that. I’ll make sure to use it wisely.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.