How Did He Do It?

Ready to start your own blog or website? Maybe you already have one and just want to know how I coded the Hearts Social Network sharing icons. Have no fear, because this post will reveal all. I’ll provide you with a couple of resources that I found after countless searches so that you won’t have to. Instead of spending valuable time Googling for snippets of code, customizing it, and then seeing how it plays out, you can use that time to focus on content and other activities. Ready? You asked for it, and you’re going to get it.

This blog is powered by Wordpress, which makes it that much easier to customize. If your site is powered by Wordpress, here are two pieces of code that you should familiarize yourself with when you want to place any of the “share links” within articles.

1. <?php the_permalink();?>    -    creates a dynamic URL according to your Wordpress page or article.
2. <?php the_title(); ?>    -    creates a dynamic title according to your Wordpress page or article title.

Let’s get down to instructions for linking images with the share URL. I’ll give it to you in a simple step by step process. Of course I’m assuming that you know how to access your .php config files if you are using Wordpress, know some HTML, and have permissions to upload images or at least know the URL of some awesome images. You can accomplish what I have on the sidebar in the left using the following steps. They don’t have to be followed in any order, as long as you go through them. I just prefer to do it this way.

1. Find your images files. My files are .png images and I found them on the web. If you have time, go ahead and head over to Google. Type in “social network icons” and you’ll get plenty of hits for both free and premium .ico and usually .png files. Pick one that interests you. Most often they’ll come in a .zip file, with different size options. If you need some resources for social network images, try checking out Smashingmagazine and my previous post on sources of Free Icons.
2. Choose the ones you need and either a) upload it to your site if you have permissions b) find an image host c) find icons that are already online and copy down the URLS. You’re going to need the URLs when you start coding.
3. With your images uploaded, you need to find the sharing URLS that will connect with the service you’re looking for, allowing viewers to share the link on that particular site. The service may have a page detailing all your options. For example, here is the Digg integration page, that you might find useful.
4. To save you all that trouble of searching through and trying to find URL services, head on over to Matthias Kretschmann’s website. He has provided a collection of all the links to some of the most popular social sites out there. It’s all there, compiled in two Coda clip files. For non-coda users, there is a HTML file with the links. Just open it up in your favorite HTML editor and copy the links! I’d like to personally make a shoutout to Mr. Kretschmann and thank him for the wonderful list. Did I mention that he even has links to the Wordpress version already in there? No need to fiddle with the URL, Wordpress users. Ok, I lied, you might need to edit some share URLs since some sites have more functionality than a simple title and URL. Let’s move on.
5. Open up your single.php file if you’re using Wordpress (assuming you want this to be displayed for every article) and a place of your choice if you’re using a different platform. Place the link of the social service of your choice. I’ll use the Facebook link for this example. The unedited link for Facebook from Kremalicious is as follows – http://www.facebook.com/sharer.php?u=<?php the_permalink();?>?t=<?php the_title(); ?> . (This is for Wordpress)
6. My image is here: http://415vince.com/wordpress/wp-content/themes/DarkRed/images/facebookshare.png
7. Turn the image into a link that points to the Facebook share URL.
8. Combined, it looks something like this: <a href=“http://www.facebook.com/sharer.php?u=<?php the_permalink();?>?t=<?php the_title(); ?>”><img src=“http://415vince.com/wordpress/wp-content/themes/DarkRed/images/facebookshare.png”></a>
9. So the formula goes: <a href=“SOCIAL LINK”><img src=“IMAGE URL”></a>

The end. I know I made it more complicated than it needs to be, but that’s how I did it. Cheers, folks.

• Blogupp
• Hell's Kitchen, 11 Chefs Compete
• Music Playlist for the Week of March 16, 2009