Hello all, Kris J here. Thought today I would share a quick and easy way to add social media links to your WordPress website without having to use another plugin. By using this method, you will gain full control over the look, placement and size of your social icon setup. The Final is what you can See and Use at the bottom of every post on this blog (Graphic Dreams).
First off you will need the basics: Notepad (or some other basic text editor), and a social media icon set. For this tut and setup, I’m going to use a great icon set made by Paul Robert Lloyd. It contains a nice assortment of sites to choose from, and different sizes to boot… So now that we have our basic tools, lets begin…
Create a new bank text file, and call it something like ‘simplesocial.php’ or something along those lines (just to save it for keep-sake). Within this we are going to add the Bookmarking Codes for the sites we want available to your readers.
Now many-many social media and bookmarking sites are out there, and you have to choose and find the right codes…right? Well I’ve simplified this and compiled a list of 30 Top sites, and the required php calls for your users to submit to. It’s good for reference. Download it Here.
For this tut I’ve selected: Delicious, Digg, Twitter, StumbleUpon, Facebook, Reddit, Identi.ca, LinkedIn, NewVine, Technorati, Yahoo Buzz.
Here is the html and php code I’m using:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | //Delicious <a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>¬es=<?php the_excerpt(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Digg <a rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&bodytext=<?php the_excerpt(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> <a rel="nofollow" href="http://twitter.com/home?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //StumbleUpon < a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Bookmark @ ">< img src=" " alt=""/>< /a> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> <a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Identi.ca <a rel="nofollow" href="http://identi.ca/notice/new?status_textarea=<?php the_permalink(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Linked In <a rel="nofollow" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&summary=<?php the_excerpt(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Newsvine <a rel="nofollow" href="http://www.newsvine.com/_tools/seed&save?u=<?php the_permalink(); ?>&h=<?php the_title(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Technorati <a rel="nofollow" href="http://technorati.com/faves?add=<?php the_permalink(); ?>" title="Bookmark @ "><img src=" " alt=""/></a> //Yahoo Buzz <a rel="nofollow" href="http://buzz.yahoo.com/submit/?submitUrl=<?php the_permalink(); ?>&submitHeadline=<?php the_title(); ?>&submitSummary=<?php the_excerpt(); ?>&submitCategory=science&submitAssetType=text" title="Bookmark @ "><img src=" " alt=""/></a> |
Now that we have the sites and code selected, we need to add the Icons to the links. So now you have to choose what size of icons will work best. Be carefull, over-sized icons can make your page or site look wonky… choose respectfully.
For this tut I’m using 16px by 16px icons. Create, and upload a folder to your server named ‘images’… (if one dosen’t already exist…it should!). Upload your Icons. Add the address for each image to your bookmarking code, and remove the text name from above each link:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious"><img src="../images/delicious-16x16.png" alt=""/></a> <a rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>" title="Submit this post to Digg"><img src="../images/digg-16x16.png" alt=""/></a> <a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers"><img src="../images/twitter-16x16.png" alt=""/></a> <a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon"><img src="../images/stumbleupon-16x16.png" alt=""/></a> <a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook"><img src="../images/facebook-16x16.png" alt=""/></a> <a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit"><img src="../images/reddit-16x16.png" alt=""/></a> <a rel="nofollow" href="http://identi.ca/notice/new?status_textarea=<?php the_permalink(); ?>" title="Share this on Identi.ca"><img src="../images/identica-16x16.png" alt=""/></a> <a rel="nofollow" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share on LinkedIn"><img src="../images/linkedin-16x16.png" alt=""/></a> <a rel="nofollow" href="http://www.newsvine.com/_tools/seed&save?u=<?php the_permalink(); ?>&h=<?php the_title(); ?>" title="Post on Newsvine"><img src="../images/newsvine-16x16.png" alt=""/></a> <a rel="nofollow" href="http://technorati.com/faves?add=<?php the_permalink(); ?>" title="Share this on Technorati"><img src="../images/technorati-16x16.png" alt=""/></a> <a rel="nofollow" href="http://buzz.yahoo.com/submit/?submitUrl=<?php the_permalink(); ?>&submitHeadline=<?php the_title(); ?>" title="Yahoo! Buzz this!"><img src="../images/yahoo-buzz-16x16.png" alt=""/></a> |
OK. We have our basic framework down. Now I will show you how and where to put this code so it shows up on your WordPress website. Continue reading the rest in part two by following the link below.
About the Author
Kris J Has Written 13 Articles For Us!
Hey I'm Kris Jay, a WordPress Developer @ GDS. I'm usally hanging out in a local pub in Winnipeg, So if You're in Town, Drop Me A Note! Watch out for some Killer Upcoming Projects of Mine Due Out The End of 2010 and Begining of 2011...
