DIY Wordpress Social Media Icons

January 10th, 2010 by Ross

So, I was using a third party plugin to handle all my social media sharing, which was very cool at first, but it started slowing my site down (as it connected to another site), so a few hours ago I ventured out onto the web trying to find the code to do this all myself.

The majority of what I used is copied and pasted from various sources, but also customised for Wordpress and its functions. Speaking of functions, that is where you should head off to first.

Shortening your URLs

There is a wicked little URL shortening service that has an openly usable API which is very easy to implement. To edit functions, browse to your current theme’s folder, and edit the functions.php file.   At the end of the file, add the following lines:

<?php

function CompressURL($url) {

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, “http://to.ly/api.php?longurl=”.urlencode($url));

curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);

curl_setopt($ch, CURLOPT_HEADER, 0);

$shorturl = curl_exec ($ch);

curl_close ($ch);

return $shorturl;

}

?>

This will allow you to share shortened URLs using the to.ly service.   This code was taken from the to.ly API documentation.

For the rest of the steps in this document, you will need to edit single.php.   I placed the code within a <div class=”SocialIcons”> [code for sharing] </div> block.

Facebook

This was the easiest of the lot, which I got from trawling through the design of nomnomnom.co.za (thanks to battica for the code in there!).   Here is the code used for Facebook:

<a target="_blank" title="Facebook" href="http://www.facebook.com/sharer.php?u=<?php $turl = CompressURL(get_permalink($post->ID)); echo $turl; ?>&t=<?php the_title(); ?>" rel="nofollow" class="social-bookmark">

<img alt="Facebook" src="<?php bloginfo('template_directory'); ?>/images/facebook.jpg"/>

</a>

This should work off the bat (make sure you have an image ready in your theme's images folder).

Twitter

This one was a bit more complex, and took me a while because I had many many issues with the URL compression that was originally suggested in the site I used (cannot remember the site as I closed the tab by accident).   Turned out that it wasn't as plug and play as the author had stated, and I had to play with this for a good hour or more...   Here is the Twitter code I ended up using, any variables that you would need to change for your blog are in bold italic.

<a target="_blank" title="Twitter" href="http://twitter.com/home?status=Reading: <?php the_title(); ?> - <?php $turl = CompressURL(get_permalink($post->ID)); echo $turl; ?> (via @nightwulfe)" rel="nofollow" class="social-bookmark">

<img alt="Twitter" src="<?php bloginfo('template_directory'); ?>/images/twitter.jpg"/>

</a>

Again, make sure you have the required images in your theme folder.   Replace the name after the '@' with your Twitter account name.

LinkedIn

This one was a difficult one, in fact, it still is.   Tonight was my first attempt at php.   Thankfully I have the equivalent of an SCJP, so I could read code and play with functions/methods etc, and be able to understand the Wordpress function API.   Having said that, this one is still messing me about.   Don't get me wrong, it does work.   However, I believe it could work better.   The code for this is based on the LinkedIn developer widgets (note that there is a license agreement involved with LinkedIn!).   Again, variables to change are in bold italic.

<a target="_blank" title="LinkedIn" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=add_your_url_here" class="social-bookmark">

<img alt="LinkedIn" src="<?php bloginfo('template_directory'); ?>/images/linkedin.jpg"/>

</a>

Page 1 of 2 | Next page

Posted in General Geekery, How To's, Science, Technology |

Previous post:
Next post: